前端-----jQuery（二）
JQuery中的常用事件
|
.click() |
鼠标单击触发事件，参数可选（data，function） |
|
.dblclick() |
双击触发，同上 |
|
.mousedown()/up() |
鼠标按下/弹起触发事件 |
|
.mousemove() |
鼠标移动事件 |
|
.mouseover()/out() |
鼠标移入/移出触发事件 |
|
.mouseenter()/leave() |
鼠标进入/离开触发事件* |
|
.hover(func1,func2) |
鼠标移入调用func1函数，移出调用func2函数 |
|
.focusin() |
鼠标聚焦到该元素时触发事件 |
|
.focusout() |
鼠标失去焦点时触发事件 |
|
. focus()/.blur() |
鼠标聚焦/失去焦点触发事件（不支持冒泡） |
|
.change() |
表单元素发生改变时触发事件 |
|
.select() |
文本元素被选中时触发事件 |
|
.submit() |
表单提交动作触发* |
|
.keydown()/up() |
键盘按键按下/弹起触发 |
|
.on() |
多事件的绑定 |
|
.off() |
移除事件的绑定 |
|
.trigger(“event”) |
触发事件event调用 |
|
.triggerHandler() |
触发事件，不会冒泡，不会触发默认事件 |
注：
1、以上事件函数大多有三种用法：
2、mouseover与mouseenter区别：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，称作支持冒泡处理，冒泡处理指子元素与父元素共同定义的事件，在触发子元素时，或者没有定义子元素，事件就会向父级传播，引发父级事件触发。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
3、form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。
4、on（）使用
基本用法：.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}
$( "button" ).on( "click", {
name: "Mr.Tory"
}, greet );
可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的
JQuery的事件对象属性与方法
|
.type |
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click |
||
|
.data |
事件调用时传入额外参数 |
||
|
.target |
|
||
|
.which |
指示按了哪个键或按钮 |
||
|
.timeStamp |
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数 |
||
|
.pageX/Y |
相对于文档左/上边缘的鼠标位置 |
||
|
.result |
上一个相同事件处理器函数返回的值 |
||
|
.preventDefalut() |
阻止事件的默认动作 |
||
|
.stopPropagation() |
取消事件冒泡 |
动画效果方法：
// 基本
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])
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
010 120 230 340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
伏笔...
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
模态框编辑的数据回填表格
插件(了解即可)
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>
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);
jQuery学习笔记：https://segmentfault.com/a/1190000014818364
