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

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

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","200px"},3000)
                      .fadeOut("slow");
          })

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

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","200px"},3000)
                      .fadeOut("slow");
          })

 5、停止动画stop()，stop(bool clearQueue,bool gotoEnd)后面这个重载是我自己为方便加进去的。stop()不带参数的话即为停止当前动画，注意，是停止当前动画！动到哪停到哪，相当于急刹车！而带参数的即不同，第一个参数针对有多个动画的动画队列，若使用stop（）只停止正在进行的动画，要是后面还有动画还要继续执行，第一个参数设为true之后后面的动画就停止了。而gotoEnd这个参数的作用在于中途停止动画的话是否直接到动画结束后的状态，否则停在哪就是哪~

 $("#panel").hover(function(){
              $(this).stop()
                      .animate({height:"150","300"},200);
          },function(){
              $(this).stop(true,true)
                      .animate({height:"22","60"},300);
          })

但是gotoEnd是有问题的，他相当于直接无动画执行最后一步，若之前设置元素的长宽要经过两个动，透明度是第三个动画，而直接执行的话gotoend的话他就只管透明度了，长宽就不管了。

所以要注意避免动画累积，或者进行其他动画的时候做动画判断

$("element").is(":animated"){//判断元素是否完成动画
            //如果当前没有动画，再添加新动画
}

辅助交互动画函数：toggle，slideToggle，可以加入时间参数，等同于show/hide和slideDown/slideUp交换着用

 $("button").click(function(){
              $(this).prev("div").toggle(1000);
          });

fadeTo(speed,to)函数，改变函数的透明度

 $("button").click(function(){
              $(this).prev("div").fadeTo(1000,1);