一，jQuery常用事件
1.(keyup/keydown)键盘事件
批量操作
2.hover(不是原生DOM事件，是jQuery封装的)
接收两个匿名函数
$('').hover(function() {鼠标移上去要做的事},function() {鼠标移下去要做的事} )
3.input事件:
只要input框的发生变化就会触发此事件
4.click点击事件
click(function(){...}) //一般用于监视点击事件 hover(function(){...}) //一般用于对用户光标起反应 blur(function(){...}) //一般用于捕获用户输入完成的输入内容 focus(function(){...}) //获得焦点时触发 change(function(){...}) //一般用于监视表单状态 keyup(function(){...}) //一般与keydown配合实现键盘事件的批量操作 keydown(function(){...})
input(function(){...}) //一般用于监视输入框的输入内容
二，jQuery绑定事件的方式
//1.jQ对象.事件(事件处理函数() {动作})
$(''").click(function() {})
//2.jQ对象.on(事件,事件处理函数() {动作})
$("").on('click',function() {})
注意：像click、keydown等DOM中定义的事件，我们都可以使用".on()"方法来绑定事件，但是"hover"这种jQuery中定义的事件就不能用".on()"方法来绑定了
补充：移除事件
//off()移除用on()绑定的事件 格式： jQ对象.off(事件,事件对象函数() {动作}) jQ对象.off(事件,[选择器],事件对象函数() {动作})
$("").off('click',function() {...})
三，阻止后续事件执行
1.return false; //常见阻止表单提交
2.event.stopPropagation() //event代表事件本身
//实例：阻止默认事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止默认事件</title> </head> <body> <form action=""> <button id="b1">点我</button> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
三、事件冒泡
DOM中事件的特点：
父标签的事件会被子标签触发
补充：阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>点我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
四、事件委托：
基于一个已经存在的标签给未来的标签绑定事件
$('').on('click','选择器',function() {})
注意：
若想使用事件委托的方式绑定非原生DOM（例如：hover）事件处理函数，可以参照如下代码分两步绑定事件
$('ul').on('mouseenter','li',function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave','li',function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
六、页面加载完毕
1.window.onload = function() {}
1.存在的问题
1.会等到页面上的文档、图片、视频等所有资源都加载完才会触发
2.多次调用的化存在覆盖声明的问题
2.jQuery帮我们封装的
1.$(document).ready(function() {...})
2.优势:
1.只要文档加载完就会触发
2.不存在覆盖声明的问题
3.简写
$(function() {绑定事件的操作...})
七、补充
1.动画(了解即可)
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
2.each遍历工具
遍历一个jQuery对象，为每个匹配元素执行一个函数，.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，都会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。
1.$.each(遍历的对象,function() {})
2.$('div').each(function() {})
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
注意：
jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素-被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的.each()方法:
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用return false提前结束each循环。
终止each循环：
return false；
3.data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key,value):
//在匹配的元素上存储任意相关数据 $("div").data("k",100); //给所有div标签都保存一个名为k，值为100
.data(key):
//返回匹配的元素集合中的第一个元素的给定名称的数据存储的值--通过HTML5 data-* 属性设置 $("div").data("k"); //返回第一个div标签中保存的"k"的值
.removeData(key):
//移除存放在元素上的数据，不加key参数表示移除所有保存的数据 $("div").removeData("k"); //移除元素上存放k对应的数据
任意jQuery对象都有data方法，可以保存任意值，用来代替全局变量
4.扩展
1.jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于 插件开发者想jQuery中添加新函数时使用。
<script> jQuery.extend({ min:function(a, b){return a < b ? a : b;}, max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>
2.jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。
<script> jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery对象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
//单独写在文件中的扩展: (function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery);