锋利的jQuery读书笔记(四)

第四章 jQuery的事件和动画
1 事件绑定

示例;$(“p”).bind(“click”,function(){
$(this).next().show();
});
2 改变事件绑定的类型
$(function(){
$(“p”).bind(“click”,function(){
$(this).next().show();
}).bind(“mouseout”,function(){
$(this).next().hide();
});
})

3 简写绑定事件
$(function(){
$(“p”).click(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
});

4 合成事件
1）hover()方法
$(function(){
$().hover(function(){
$(this).next().show();
},function(){
$(this).next(),hide();
});
});
等价写法：
$(function(){
$(“p”).bind(“click”,function(){
$(this).next().show();
}).bind(“mouseout”,function(){
$(this).next().hide();
});
})

5 toggle()方法的语法结构
toggle(fn1,fn2,fn…);鼠标第一次点击出发第一个函数，第二次点击出发第二个函数依次类推，最后一个执行完后，则重新循环执行。此外toggle还有另一个作用切换元素的可见状态
应用示例：
$("#aa").toggle(function(){
alert(111);
},function(){
alert(222);
});

6 事件冒泡
1）

三个元素都绑定了单击事件，则单击 的同时，也单击了div,body,每个元素都会依次响应单击事件
2）引发的问题：本来只想出发span的单击事件，然而div，body的单击事件也触发了
3）停止冒泡事件
$(“span”).click(function(event){
(“span”).html(“aaa”);
event.stopPropagation();//停止冒泡事件，也可用return false代替
});
4）阻止元素的默认行为，jQuery中提供了preventDefault()方法来阻止元素的默认行为

其中event.preventDefault()方法可以使用return false代替
5）获取事件类型
$(“a”).click(function(event){
alert(event.type);//获取事件类型x x
return false;//阻止链接跳转
});
$
6）获取触发事件的元素
$(a[href=‘http://google.com’]).click(function(event){
var tg = event.target
})
7）event.relatedTarget 获取相关联的元素
8）event.pageX和event.pageY相对于x坐标和y坐标
9）event.which获取鼠标的左中右键（1左键 2中键 3右键），键盘事件中获取键盘的按键
10 ）event.metaKey获取键盘事件中按键

7 移除事件按钮元素上以前注册的事件
1)
删除所有事件
$(’#delAll’).click(function(){
//处理函数
});
//删除元素的所有click事件,jQuery代码如下：
$("#delAll").click(function(){
$("#btn").unbind(“click”);
});
2)unbind()方法的语法结构：unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数，具体说明如下：
（1）如果没有参数，则删除所有绑定的事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把绑定时传递的处理函数作为第二个参，则只有这个特定的事件处理函数会被删除
3）one()只触发一次，随后立即解除绑定,语法结构和bind()方法相同，如下：
one(type,[data],fn)

8 模拟操作
1）KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").trigger("…(’#btn’).click();
2）出发自定义事件
$("#btn").bind(“myclick”,function(){
$("#btn").alert(“这是我自定义的事件”);
});
$("#btn").trigger(“myclick”);
3）传递数据
$("#btn").bind(“click”,function(event,message1,message2){
alert(111);
});
4）执行默认操作
$(“input”).trigger(“focus”);//触发focus事件，也会使元素本身的到焦点
$(“input”).triggerHander(“focus”);//触发绑定的特定事件，同时取消浏览器对此事件的默认操作

9 其他操作
1）绑定多个事件类型
2）$(function(){
$(“div”).bind(“mouseover mouseout”,function(){
KaTeX parse error: Expected 'EOF', got '}' at position 29: …Class("over"); }̲); }) 3）添加事件命名空…(“div”).unbind(“click”).unbind(“mouseover”);

4）相同事件名称，不同命名空间执行方法（略）

10 jquery动画
1）show()方法和hide()方法，参数有slow normal fast以及特定的时间单位是毫秒如：show(“slow”)后者show(1000)//一秒内显式出来
2）fadeIn()和fadeOut()淡出和淡入
3）slideUp()和slideDown(),由下至上和由上至下延伸
4）自定义动画方法animate()