好记心不如烂笔头之JQuery学习，第四章

2022-11-30 12:14:19

---恢复内容开始---

JQuery中的事件和动画

JQuery中的事件：

$(document).ready()该事件和JS中的window.load类似，但是window.load中需要等待所有资源加载完毕后才处理（例如图片下载完），而$(document).ready()是在DOM树加载完毕后就进行处理了。但是在过程中有些也是需要加载完再处理的，比如知道图片的高宽比等，这时候就可以用$(window).load(function(){})这样处理了，与window.load等价。

多次执行也可以使用，不比跟window.load = function(){fun1();fun2;}酱紫了，直接

$(document).ready(fun1());

$(document).ready(fun2());

//简写

$().ready(fun1());
$().ready(fun2());

$(function(){fun1()});

绑定事件：

$().ready($("#panel h5").bind("click",function(){fun1()}));

或者

$(function(){

    $("#panel h5").bind("click",function(){fun1()});

    })

合成事件：

1、hover(fun1(),fun2());

模拟光标的悬停事件，光标移到上面时，执行fun1，离开时执行fun2

也是一载入进去就能绑定

 $(function(){

             $("#panel h5").hover(function(){

                 $(this).next("div").show();

             },function(){

                 $(this).next("div").hide();

             })

         })

2、toggle方法，模拟鼠标连续点击事件，第一次点击xxx，第二次点击xxx......

toggle(fun1,fun2,fun3,......)

$(function(){

             $("#panel h5").toggle(function(){fun1()},function(){fun2()});

         })

toggle方法还有一个用途：隐藏元素。使用例子如下：

 $(function(){

             $("#panel h5").toggle( function(){

                 $(this).next("div").toggle();

                     },function(){

                         $(this).next("div").toggle();

                     });

         })

事件冒泡和解决方案

例如，在body里有DIV，DIV里有DIV或者span，大家都定义了click事件，当点击最底层click会导致顶层的click事件也被触发。这个现象就叫做事件冒泡

为了解决这一问题，需要停止事件冒泡，做法为在绑定的function()里添加参数event，在最后的事件处理结束后，增加 event.stopPropagation();

$(function(){

            $("span").bind("click",function(event){

                var text = $("#msg").html()+"<p>内层span元素被单击</p>";

                $("#msg").html(text);

                event.stopPropagation();

            });

            $("#content").bind("click",function(event){

                var text = $("#msg").html()+"<p>外层DIV元素被单击</p>";

                $("#msg").html(text);

                event.stopPropagation();

            });

            $("body").bind("click",function(){

                var text = $("#msg").html()+"<p>body元素被单击</p>";

                $("#msg").html(text);

            });

        })

阻止默认行为：

event.preventDefault();

同样在绑定事件的时候增加event参数，一般用于进行数据校验，当发现不对的时候停止默认行为

阻止默认行为和停止冒泡都可以使用return false;代替!!!!

移除绑定

指定元素，使用$("#test").unbind("事件名","事件方法");或者只指定事件名，当只有一个事件，什么都不用指定。

one方法，$("test").one("事件名","事件方法");绑定事件，但是这个事件只会执行一次，之后再触发事件将不会有作用

模拟事件

指定元素，使用trigger("事件名")来模拟$("test").trigger("click");

或者$("test").click();

而使用trigger在于他的广泛性，能触发任何事件，包括自定义事件，能以数组方式传递参数$("test").trigger("click",["aaa","bbbb"]);

绑定多个事件，可以为指定函数一次性绑定多个事件，例子如下：

 $(function(){

            $("p").bind("mouseover mouseout",function(){

                $(this).toggleClass("over");

            })

        })

可以为事件增加命名空间，为事件解绑的时候直接解绑命名空间就完事，命名空间在每个事件后加点加命名空间名：

$("div").bind("click.plus",function(){......});

其中.plus为命名空间。

一个元素可以有多个相同的事件，例如click可以有带命名空间的事件

$(function(){

           $("div").bind("click",function(){

               $("body").append("<p>click event</p>");

           });

           $("div").bind("click.plus",function(){

               $("body").append("<p>click.plus event</p>");

           });

           $("button").click(function(){

               $("div").trigger("click!");     //注意！号

           });

        });

在此模拟事件中，感叹号意味着匹配不带命名空间的事件。若没有感叹号，两个事件一起触发

4.2 JQuery中的动画

1、隐藏和显示：hide() ,show()这两个属性都是在指定元素后实现的，hide（）方法会记住原先的display属性，然后将display的属性设为none，show()将还原原来的display属性。这是默认的使用方法。

在方法当中增加参数可以控制动画显示速度，可以选择slow（600ms），normal（400ms），fast（200ms）

 $("button").toggle(function(){

           $("div").hide("fast");

       },function(){

           $("div").show(600);

       })

2、fadeOut和fadeIn方法，这两个方法和show、hide不同在于show、hide是减少长宽来消失元素，增大长宽来显示元素，而fadeOut，fadeIn是通过透明度的变化来显示元素的

 $("button").toggle(function(){

           $("div").fadeOut("slow");

       },function(){

           $("div").fadeIn(600);

       })

3、slidUp，slidDown,通过改变高度来隐藏的，向上隐藏，所以UP是隐藏，down是显示

 <script type="text/javascript">

       $("button").toggle(function(){

           $("div").slideUp("slow");

       },function(){

           $("div").slideDown(600);

       })

    </script>

4、自定义动画，animate（params,speed,callback）params写入参数，各个变化后的CSS属性用{}括起来，两个属性间用，相隔，多个动画用多个animate可以连在一起，最好用链式操作哦。

$("button").click(function(){

              $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)

                      .animate({top:"200px",width:"200px"},3000)

                      .fadeOut("slow");

          })

---恢复内容结束---