jquery中的事件和动画
目录
一、jquery中的事件
1.加载DOM
2.事件绑定
3.合成事件
4.事件冒泡
5.事件对象的属性
6.移除事件
二.jquery中的动画
1.隐藏和显示
2.滑动效果
3.淡入淡出效果
三、jquery的遍历
1.对象方法遍历
2.全局方法遍历
3.jQuery3.0新特性for of遍历
一、jquery中的事件
1.加载DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法
| 方法 | window.onload | $(document).ready() |
|---|---|---|
| 执行时机 | 必须等待页面中的所有内容加载完毕 | 网页中的DOM结构绘制完毕就执行 |
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
| 简化写法 | 无 | $() |
2.事件绑定
对匹配的元素进行特定的事件绑定: bind()
<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">//为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏$(function(){$(".head").bind("click", function(){//使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定的选择器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隐藏的变为显示$(".content").show();}else{$(".content").hide();}});})</script>3.合成事件
| 方法 | 描述 |
|---|---|
| hover() | 模拟光标悬停事件 |
| toggle() | 模拟鼠标连续单击事件 |
//合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数. $(".head").hover(function(){$(".content").show();}, function(){$(".content").hide();});
//合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个//函数 ... 循环执行. $(".head").toggle(function(){$(".content").show();}, function(){$(".content").hide();});4.事件冒泡
事件会按照 DOM 层次结构像水泡一样不断向上只止顶端
解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为
<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){//事件的冒泡: 什么是事件的冒泡$("body").click(function(){alert("body click");});$("#content").click(function(){alert("div click");});$("span").click(function(){alert("span click");//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡. return false;});})</script>
<body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>5.事件对象的属性
事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了
event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标
6.移除事件
移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)
移除某按钮上的所有事件: $(“btn”).unbind()
one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次
$("a").one("click",function(){alert("click just once");return false;
})二.jquery中的动画
1.隐藏和显示
| 方法 | 描述 |
|---|---|
| hide([speed,[easing],[fn]]) | 隐藏元素方法 |
| show([speed,[easing],[fn]]) | 显示元素方法 |
| toggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
| 参数名称 | 解释 |
|---|---|
| speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) |
| easing | 用来指定切换效果，默认是"swing"，可用参数"linear" |
| fn | 在动画完成时执行的函数，每个元素执行一次 |
以上三个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画。可以通过制定速度参数使元素动起来
以上三个方法会同时减少(增大)内容的高度, 宽度和不透明度
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">function hideFn(){$("#showDiv").hide("slow","swing");}function showFn(){$("#showDiv").show("normal","swing");}function toggleFn(){$("#showDiv").toggle(5000,"linear");}
</script>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">div显示和隐藏
</div>2.滑动效果
| 方法 | 描述 |
|---|---|
| slideToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
| slideDown([speed,[easing],[fn]]) | 向下滑动方法 |
| slideUp([speed,[easing],[fn]]) | 向上滑动方法 |
3.淡入淡出效果
| 方法 | 描述 |
|---|---|
| fadeIn([speed,[easing],[fn]]) | 淡入显示方法 |
| fadeOut([speed,[easing],[fn]]) | 淡出隐藏方法 |
| fadeToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
三、jquery的遍历
1.对象方法遍历
格式：jquery对象.each(function(index,element){});
index:就是元素在集合中的索引element：就是集合中的每一个元素对象 <ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li></ul>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">$(function(){$("ul li").each(function (index,element) {alert(index+"---"+$(element).text());})})
</script>2.全局方法遍历
格式：$.each(jquery对象,function(index,element){});
index:就是元素在集合中的索引element：就是集合中的每一个元素对象 $(function(){var $lis=$("ul li");$.each($lis,function(){alert($(this).text());})})3.jQuery3.0新特性for of遍历
格式：for(变量 of jquery对象){变量；}
变量:定义变量依次接受jquery数组中的每一个元素jquery对象：要被遍历的jquery对象 $(function(){var $lis = $("#city li");for(li of $lis){alert($(li).text());}});jquery中的事件和动画相关推荐
- 四、jQuery 中的事件和动画(嘎嘎详细)
文章目录 前言 一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
- 锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记 第三章 jQuery中的DOM操作 jQuery中的事件 事件绑定 bind方法 合成事件 hover方法 toggle方法 事件冒泡 事件对象 停止事件冒泡 阻止默认行为 ...
- JQuery中的事件以及动画
嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模 糊啦,这个是很让失望的,这里只说明了一点,课是听过啦, ...
- 第7章 jQuery中的事件与动画
一.事件: 1.鼠标事件 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick( ) 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 mouseov ...
- 10-jQuery中的事件与动画教程
jQuery中的事件 作者:曾庆林 事件初探 加载文档完成触发:$(document).ready(function(){}) 事件可以多次执行. 代码可以简写:$(function(){}) 事件绑 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
- java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
- vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
最新文章
- 第十六课.基于K-means的图像分割
- 《TensorFlow技术解析与实战》——导读
- 【项目管理】ITTO-范围管理
- .net利用程序集的GUID解决程序只能运行一次的问题
- boa服务器如何运行cgi,嵌入式WEB服务器BOA+CGI.ppt
- Pyhton 单行、多行注释方法
- 畅想(2)-计算机发展与教育的关系
- 十五步骤手把手学会制作网吧XP母盘制作
- PHP 制作通讯录（六）
- android微信调试网页,Mac OS X EI Capitan 下调试 Android 微信内嵌网页
- STM32不同型号单片机keil工程移植说明
- arcgis dem栅格立体感_arcgis中DEM如何生成等高线
- 初一计算机在线应用,初中计算器_求：计算器（初中数学七年级）在线使用_淘题吧...
- 盘点安卓手机被吐槽最多的三大奇葩设计
- VSCode已经设置过为中文但变成英文的解决办法
- 处理文档用计算机配置文件,2017年自学考试计算机应用基础试题
- CRS-0215: Could not start resource 'ora.rac.rac2.inst'.
- ssh免密码登录3种解决方法
- 产业分析：智能巡检机器人行业
- 罗技GHUB打开一直在加载怎么回事？