Go语言视频零基础入门到精通

admin

JQuery的事件

1. 1 /**
2. 2 *    1.事件绑定的快捷方式：
3. 3 */
4. 4 $("button:eq(0)").dblclick(function(){
5. 5 alert("hahaah")
6. 6 });
7. 7     缺点：绑定的事件无法取消。
8. 8
9. 9 /**
10. 10 *    2.使用on进行事件绑定。
11. 11 */
12. 12 //2.1使用on进行单事件绑定。
13. 13     $("button:eq(0)").on("click",function(){
14. 14     alert("haha");
15. 15     });
16. 16                 
17. 17 //2.2使用on进行多事件绑定。
18. 18 $("button:eq(0)").on("click dblclick mouseover",function(){
19. 19     console.log("123");
20. 20     });
21. 21                 
22. 22 //2.3使用on同时给多个事件分别绑定不同的函数。
23. 23     $("button:eq(0)").on({
24. 24 "click":function(){
25. 25         console.log("click");
26. 26     },
27. 27     "mouseover":function(){
28. 28         console.log("mouseover");
29. 29 }
30. 30 });
31. 31                 
32. 32 //2.4 使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到。
33. 33     $("button:eq(0)").on("click",{"name":"zhangsan"},function(e){
34. 34         console.log(e);
35. 35         console.log(e.data);
36. 36         console.log(e.data.name);
37. 37     });

复制代码

事件委派

　　1.事件委派：将原来绑定在DOM节点上的事件，改为绑定在其父节点甚至根结点上，然后委派给当前节点执行。
　　2.事件委派的作用：
　　　　(1)将事件直接绑定在根结点上，可以减少事件绑定次数，更加节省资源。
　　　　(2)使用事件委派绑定的事件当页面新增同类型标签时，新的标签也可以获得绑定的已有事件。
其他事件函数
事件解绑

1. 1 $("button:eq(0)").off("click");//清除所有的click事件
2. 2 $("button:eq(0)").off("click",func);//只清除绑定了func函数的click事件
3. 3 $("button:eq(0)").off("click dblclick");//清除多个事件
4. 4 $("button:eq(0)").off("click","p");//清除事件委派
5. 5 $("p").off();//清除绑定的所有事件

复制代码

  
one()：使用one绑定是事件只能执行一次

1. $("button:eq(0)").one("click",function(){});//使用one绑定是事件只能执行一次

复制代码

  
.trigger():自动触发某个节点绑定的事件
　　接收两个参数：
　　　　1.需要触发的事件类型。
　　　　2.数组格式：表示传递给事件回调函数的参数。
  

1. 1                 $("button:eq(0)").on("click",function(e,a,b,c){
2. 2                     console.log(a);
3. 3                     console.log(b);
4. 4                     console.log(c);
5. 5                     console.log(arguments[1]);
6. 6                     
7. 7                 });
8. 8                 
9. 9                 
10. 10                 setTimeout(function(){
11. 11                     $("button:eq(0)").trigger("click",[1,2,3],function(){
12. 12                         console.log("trigger了一个事件");
13. 13                     });
14. 14                 },3000);

复制代码

  
注意：
　　①事件回调函数的第一个参数必须是事件对象，因此我们传递的第二个开始接收。
　　②传递的参数可以使用arguments进行读取。
  
.triggerHandler():用法与tirgger()相同
triggerHandler()与trigger()的区别
　　(1)triggerHandler() 不能触发HTML事件，例如表单的submit事件.而trigger()可以触发所有事件。
　　(2)triggerHandler() 只能触发所匹配元素中的第一个元素的事件；trigger()，将触发所有匹配元素的事件。
　　(3)triggerHandler() 的返回值是事件回调函数的返回值，如果事件回调函数没有返回值，则返回undefined；trigger的返回值永远是调用事件的DOM对象，符合JQ的链式语法。
  
.hover() ：
　　　　接受两个函数：分别表示mouseover()和mouseout()两个事件。如果只写一个函数，表示mouseover()。

1. 1 $("p:eq(0)").hover(function(){
2. 2         $(this).css("background-color","red");
3. 3     },function(){
4. 4         $(this).css("background-color","blue");
5. 5 });

复制代码

  
.toggle():
　　①如果不传入参数，表示当前元素如果为显示状态，则隐藏，如果为隐藏状态，则显示。
　　②传入一个动画执行效果： "ease" ,"slow"，"fast"。
　　③传入一个函数，表示动画执行完成后显示的回调函数。
　　④接受一个boolean类型的参数，true为显示，fasle表示隐藏

1. 1 $("button:eq(0)").on("click",function(){
2. 2     $("p:eq(0)").toggle();
3. 3 $("p:eq(0)").toggle("ease");
4. 4 $("p:eq(0)").toggle("ease",function(){alert(1)});
5. 5 $("p:eq(0)").toggle(true/false);
6. 6 });

复制代码

JQuery的 动画
show()方法： 让隐藏元素显示。同时修改宽度，高度，透明度(width/height/opacity)
　　①不传参。直接显示，而不进行动画。
　　②参数传入时间毫秒，或者表示速度的字符串“slow”,"normal","fast"则将在制定时间内完成动画。
　　③参数也可以传入回调函数，表示动画完成后执行的回调函数。
hide()：让显示的元素隐藏，效果与show()相反，其他一样。

1. 1                 $("#div1").show(3000,function(){
2. 2                     alert(123);
3. 3                 });
4. 4
5. 5                 $("#div1").hide(3000);

复制代码

slideXX():
　　slideDown()：让隐藏的元素显示，修改height属性。
　　slideUp()：让显示的元素隐藏，修改height属性。
　　slideToggle（()：让显示的元素隐藏，让隐藏是元素显示

1.                 $("#div1").slideDown(3000);
2.                 $("#div1").slideUp(3000);
3.                 $("#div1").slideToggle(3000);

复制代码

fadeXX():
　　fadeOut()：让显示的隐藏，修改透明度(opacity)
　　fadeIn()：让隐藏多少显示，修改透明度(opacity)
　　fadeToggle()：让显示的元素隐藏，让隐藏是元素显示,改透明度(opacity)
　　fadeTo()：作用月fadeToogle()相同，多了第二个参数，表示动画完成后的最终透明度。

1. 1                 $("#div1").fadeOut(3000);
2. 2                 $("#div1").fadeIn(3000);
3. 3                 $("#div1").fadeToggle(3000);
4. 4                 $("#div1").fadeTo(3000,0.25);

复制代码

animate()
animate()动画：自定义动画，接受4个参数
　　①动画完成后最终状态的CSS键值对集合。注意：css的样式，要求使用驼峰命名法。
　　②动画完成的时间，可以是毫秒，可以是“slow”,"normal","fast"。
　　③动画完成的效果： 可选值"linear","swing"
　　④动画完成后的回调函数。

1.                 $("#div1").animate({
2.                     "width":"0px",
3.                     "opacity":"0",
4.                     "fontSize":"34px"
5.                 },3000,"linear",function(){});

复制代码

stop()：停止当前节点的所有动画，后续动画不再执行，动画回调不再调用
finish()：直接结束当前节点的所有动画，动画直接进入最后状态，直接调用动画回调。

1. 1                 $("button:eq(0)").click(function(){
2. 2                     /**
3. 3                      *  停止当前节点的所有动画，后续动画不再执行，动画回调不再调用
4. 4                      */
5. 5                     $("#div1").stop();
6. 6                     /**
7. 7                      *     直接结束当前节点的所有动画，动画直接进入最后状态，直接调用动画回调。
8. 8                      */
9. 9                     $("#div1").finish();
10. 10                 })

复制代码

delay()：延时动画，表示延时多少毫秒后再执行动画。

1. 1                 $("#div1").animate({
2. 2                     "fontSize":"64px"
3. 3                 },2000,"linear",function(){})
4. 4                 .delay(5000)//延时5秒执行下面的动画
5. 5                 .animate({
6. 6                     "width":"0px",
7. 7                     "opacity":"0",
8. 8                     "fontSize":"34px"
9. 9                 },3000,"linear",function(){});

复制代码