11.58 事件
11.581 事件绑定方法与解绑
绑定事件：
//
绑定方式一：
$('.box1').click(
function
() {
alert(
'绑定方式一'
)
});
//
绑定方式二：
$('.box1').on("click",
function
() {
alert(
'绑定方式一'
)
});
//
绑定方式三：
$('.box1').bind('click',{'a':'b'}
function
(e) {
alert(
'绑定方式二'
);
console.log(e.data);
});
$(
'.box1').bind('mouseover mouseout',
function
() {
//
绑定多个事件做同一件事
console.log('绑定多个事件做同一件事'
)
});
$(
'.box1'
).bind({
'mouseup':
function
() {
console.log(
'mouseover'
);
},
'mousedown':
function
() {
console.log(
'mouseout'
);
}
});
解绑事件：
//
移除事件，unbind没有参数则代表移除所有事件
setTimeout(
function
() {
$(
'.box1').unbind('mouseover'
);
},
3000
);
setTimeout(
function
() {
$(
'.box1'
).unbind();
},
10000
)
.off(
"click",
function
(){
xxxxx
})
11.582 绑定事件示例
点击事件：click
//
click与dblclick只应该存在一个，大多数都是单击事件
$('.box1').click(
function
(event)
//
console.log(event.type); // event.type事件的类型为：click
console.log(event.target);
//
event.target指的是点击的那个元素
})
$(
'.box1').dblclick(
function
(event) {
console.log(event.target);
//
event.target指的是点击的那个元素
})
鼠标：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
$('.box1').mousedown(
function
(event) {
console.log(
'按照鼠标左键不松手'
);
});
$(
'.box1').mouseup(
function
(event) {
console.log(
'按照鼠标左键松手'
);
});
$(
'.box1').mousemove(
function
(event) {
console.log(
'移动鼠标'
, event.pageX, event.pageY);
});
$(
'.box1').mouseover(
function
(event) {
console.log(
'元素以及该元素的子元素在鼠标移入时都会触发,当前的div是：'
, event.target.innerText);
});
$(
'.box1').mouseout(
function
(event) {
console.log(
'元素以及该元素的子元素在鼠标离开时都会触发，当前的div是：'
, event.target.innerText);
});
$(
'.box1').mouseenter(
function
(event) {
console.log(
'元素以在鼠标移入时都会触发(与子元素无关),当前的div是：'
, event.target.innerText);
});
$(
'.box1').mouseleave(
function
(event) {
console.log(
'元素以在鼠标移入时都会触发(与子元素无关)，当前的div是：'
, event.target.innerText);
});
对于input框：focus、blur、input
input能够实时检测 textarea ， input:text ， input:password ， input:search 这几个元素的内容变化，但IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代，使用jQuery库的话直接使用on同时绑定这两个事件即可
$('#inp').on("focus",
function
() {
console.log(
'鼠标聚焦'
);
});
$(
'#inp').on("blur",
function
() {
console.log(
'鼠标失去焦点'
);
});
//
当input框的值发生变化时，实时触发
$("#inp").on("input",
function
() {
console.log($(
this
).val());
})
$(
"#i1").on("input propertychange",
function
() {
alert($(
this
).val());
})
按键：keydown、keyup
$('#inp').keydown(
function
(e) {
console.log(e.keyCode);
});
$(window).on(
"keydown",
function
(e) {
//
获取用户按下那个按键
console.log(e.keyCode);
if
(e.keyCode === 16
){
flag
=
true
;
}
});
$(
'#inp').keyup(
function
(event) {
//
绑定一个按键抬起的事件
console.log('键盘按键弹起'
);
});
$(window).on(
"keyup",
function
(e) {
console.log(e.keyCode);
if
(e.keyCode === 16
){
flag
=
false
;
}
});
change:
//
表单事件change
$('#inp').change(
function
() {
console.log(
this
.value);
//
失去焦点时就会得到值
});
$(
'input[name=sex]').change(
function
(event) {
console.log(
this
.value);
});
$(
'#select').change(
function
() {
console.log(
this
.value);
});
选中checkbox框：select
//
表单事件select,CheckBox框被选中时触发
$('#inp1').select(
function
() {
console.log(
this
.value);
});
$(
'#inp2').select(
function
() {
console.log(
this
.value);
});
提交事件：submit
//
表单事件submit
$('#form').submit(
function
(event) {
console.log($(
'input[name=user]'
).val());
console.log($(
'input[name=pwd]'
).val());
event.preventDefault();
});
hover:不能使用on绑定hover事件
//
hover事件
$(".father").hover(
//
鼠标移到.father上时让.son添加一个.show
function
() {
$(
this
).find(".son").addClass("show"
);
},
function
() {
//
鼠标移出.father上时让.son移除一个.show
$(
this
).find(".son").removeClass("show"
);
})
11.583 事件冒泡应用之事件委托
添加的事件不能用于动态增加事件,例如之前我们在做表格的增删改时，每新增一行内容都需要重新绑定事件，基于事件委托就可以解决该问题
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
$('ul').on('mouseover','li',
function
(e) {
$(e.target).css(
'background-color','#ddd').siblings().css('background-color','white'
);
//
e.stopPropagation();
return
false
;
})
$(
"table").on("click", ".delete",
function
() {
//
删除按钮绑定的事件
})
11.584 页面加载完成执行
$(document).ready(
function
(){
在这里写你的JS代码...
})
简写:
$(
function
(){
你在这里写你的代码
})
与window.onload()函数的区别：window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用，且只能使用一次；jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数），可以使用多次
11.59 动画效果
1
、show() 显示隐藏的匹配元素 语法：show(speed,callback)
参数：
speed：三种预定速度之一的字符串(
'slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==
1秒）
callback:在动画完成时执行的函数，每个元素执行一次
2
、hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
3
、toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
1
、slideDown 通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数用法和参数跟上面类似
2
、slideUp 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似
3
、slideToggle 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数跟toggle用法类似
1、fadeIn/fadeOut 通过不透明度的变化来实现所有匹配元素的淡入/
淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
2
、fadeTo 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
3、fadeToggle 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数,这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方
animate、stop、delay
1
、animate 概念：用于创建自定义动画的函数 语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(
"slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000
)
fn:在动画完成时执行的函数，每个元素执行一次。
2
、stop 概念：停止所有在指定元素上正在运行的动画 语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
3、delay 概念：用来做延迟的操作 语法：delay(1000)，一秒之后做后面的操作
11.510 .each()
//
为每一个li标签添加class="c1"
$("li").each(
function
(){
$(
this
).addClass("c1"
);
});
//
使用内置$.each()进行迭代
var
arry=[11,22,33,44
];
$.each(arry,
function
(k,v){
console.log(k,v);
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1");
//
对所有标签做统一操作
终止each循环
return
false
；
11.511 .data()
.data(key, value): 在匹配的元素上存储任意相关数据/保存一些状态。
$("div").data("k",100);
//
给所有div标签都保存一个名为k，值为100
.data(key): 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
$("div").data("k");
//
返回第一个div标签中保存的"k"的值 100
.removeData(key): 移除存放在元素上的数据，不加key参数表示移除所有保存的数据
$("div").removeData("k");
//
移除元素上存放k对应的数据
