- /**
- * 1. 事件绑定的快捷方式:
- */
- $("button:eq(0)").dblclick(function(){
- alert("hahaah")
- });
缺点: 绑定的事件无法取消.
- /**
- * 2. 使用 on 进行事件绑定.
- */
- //2.1 使用 on 进行单事件绑定.
- $("button:eq(0)").on("click",function(){
- alert("haha");
- });
- //2.2 使用 on 进行多事件绑定.
- $("button:eq(0)").on("click dblclick mouseover",function(){
- console.log("123");
- });
- //2.3 使用 on 同时给多个事件分别绑定不同的函数.
- $("button:eq(0)").on({
- "click":function(){
- console.log("click");
- },
- "mouseover":function(){
- console.log("mouseover");
- }
- });
- //2.4 使用 on 给回调函数传参, 要求是对象格式, 传递的参数可以在 e.data 中取到.
- $("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
- console.log(e);
- console.log(e.data);
- console.log(e.data.name);
- });
事件委派
1. 事件委派: 将原来绑定在 DOM 节点上的事件, 改为绑定在其父节点甚至根结点上, 然后委派给当前节点执行.
2. 事件委派的作用:
(1) 将事件直接绑定在根结点上, 可以减少事件绑定次数, 更加节省资源.
(2) 使用事件委派绑定的事件当页面新增同类型标签时, 新的标签也可以获得绑定的已有事件.
其他事件函数
事件解绑
- $("button:eq(0)").off("click");// 清除所有的 click 事件
- $("button:eq(0)").off("click",func);// 只清除绑定了 func 函数的 click 事件
- $("button:eq(0)").off("click dblclick");// 清除多个事件
- $("button:eq(0)").off("click","p");// 清除事件委派
- $("p").off();// 清除绑定的所有事件
one(): 使用 one 绑定是事件只能执行一次
$("button:eq(0)").one("click",function(){});// 使用 one 绑定是事件只能执行一次
.trigger(): 自动触发某个节点绑定的事件
接收两个参数:
1. 需要触发的事件类型.
2. 数组格式: 表示传递给事件回调函数的参数.
- $("button:eq(0)").on("click",function(e,a,b,c){
- console.log(a);
- console.log(b);
- console.log(c);
- console.log(arguments[1]);
- });
- setTimeout(function(){
- $("button:eq(0)").trigger("click",[1,2,3],function(){
- console.log("trigger 了一个事件");
- });
- },3000);
注意:
事件回调函数的第一个参数必须是事件对象, 因此我们传递的第二个开始接收.
传递的参数可以使用 arguments 进行读取.
.triggerHandler(): 用法与 tirgger() 相同
triggerHandler() 与 trigger() 的区别
(1)triggerHandler() 不能触发 html 事件, 例如表单的 submit 事件. 而 trigger() 可以触发所有事件.
(2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件; trigger(), 将触发所有匹配元素的事件.
(3)triggerHandler() 的返回值是事件回调函数的返回值, 如果事件回调函数没有返回值, 则返回 undefined;trigger 的返回值永远是调用事件的 DOM 对象, 符合 JQ 的链式语法.
.hover() :
接受两个函数: 分别表示 mouseover() 和 mouseout() 两个事件. 如果只写一个函数, 表示 mouseover().
- $("p:eq(0)").hover(function(){
- $(this).CSS("background-color","red");
- },function(){
- $(this).css("background-color","blue");
- });
- .toggle():
如果不传入参数, 表示当前元素如果为显示状态, 则隐藏, 如果为隐藏状态, 则显示.
传入一个动画执行效果: "ease" ,"slow","fast".
传入一个函数, 表示动画执行完成后显示的回调函数.
接受一个 boolean 类型的参数, true 为显示, fasle 表示隐藏
- $("button:eq(0)").on("click",function(){
- $("p:eq(0)").toggle();
- $("p:eq(0)").toggle("ease");
- $("p:eq(0)").toggle("ease",function(){alert(1)});
- $("p:eq(0)").toggle(true/false);
- });
JQuery 的 动画
show() 方法: 让隐藏元素显示. 同时修改宽度, 高度, 透明度 (width/height/opacity)
不传参. 直接显示, 而不进行动画.
参数传入时间毫秒, 或者表示速度的字符串 "slow","normal","fast" 则将在制定时间内完成动画.
参数也可以传入回调函数, 表示动画完成后执行的回调函数.
hide(): 让显示的元素隐藏, 效果与 show() 相反, 其他一样.
- $("#div1").show(3000,function(){
- alert(123);
- });
- $("#div1").hide(3000);
- slideXX():
slideDown(): 让隐藏的元素显示, 修改 height 属性.
slideUp(): 让显示的元素隐藏, 修改 height 属性.
slideToggle((): 让显示的元素隐藏, 让隐藏是元素显示
- $("#div1").slideDown(3000);
- $("#div1").slideUp(3000);
- $("#div1").slideToggle(3000);
- fadeXX():
fadeOut(): 让显示的隐藏, 修改透明度 (opacity)
fadeIn(): 让隐藏多少显示, 修改透明度 (opacity)
fadeToggle(): 让显示的元素隐藏, 让隐藏是元素显示, 改透明度 (opacity)
fadeTo(): 作用月 fadeToogle() 相同, 多了第二个参数, 表示动画完成后的最终透明度.
- $("#div1").fadeOut(3000);
- $("#div1").fadeIn(3000);
- $("#div1").fadeToggle(3000);
- $("#div1").fadeTo(3000,0.25);
- animate()
animate() 动画: 自定义动画, 接受 4 个参数
动画完成后最终状态的 CSS 键值对集合. 注意: css 的样式, 要求使用驼峰命名法.
动画完成的时间, 可以是毫秒, 可以是 "slow","normal","fast".
动画完成的效果: 可选值 "linear","swing"
动画完成后的回调函数.
- $("#div1").animate({
- "width":"0px",
- "opacity":"0",
- "fontSize":"34px"
- },3000,"linear",function(){});
stop(): 停止当前节点的所有动画, 后续动画不再执行, 动画回调不再调用
finish(): 直接结束当前节点的所有动画, 动画直接进入最后状态, 直接调用动画回调.
- $("button:eq(0)").click(function(){
- /**
- * 停止当前节点的所有动画, 后续动画不再执行, 动画回调不再调用
- */
- $("#div1").stop();
- /**
- * 直接结束当前节点的所有动画, 动画直接进入最后状态, 直接调用动画回调.
- */
- $("#div1").finish();
- })
delay(): 延时动画, 表示延时多少毫秒后再执行动画.
- $("#div1").animate({
- "fontSize":"64px"
- },2000,"linear",function(){})
- .delay(5000)// 延时 5 秒执行下面的动画
- .animate({
- "width":"0px",
- "opacity":"0",
- "fontSize":"34px"
- },3000,"linear",function(){});
来源: https://www.cnblogs.com/JiangLai/p/8990209.html