第四章 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)
2)引发的问题:本来只想出发span的单击事件,然而div,body的单击事件也触发了
3)停止冒泡事件
$(“span”).click(function(event){
(“span”).html(“aaa”);
event.stopPropagation();//停止冒泡事件,也可用return false代替
});
4)阻止元素的默认行为,jQuery中提供了preventDefault()方法来阻止元素的默认行为
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190328233830595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ==,size_16,color_FFFFFF,t_70)
其中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()