jQuery中的事件与动画

jQuery中的事件与动画

1、window.onload方法和$(document).ready()方法区别：

         a、window.onload:在网页中所有的元素（包括元素所有的关联文件）完全加载到浏览器后才执行，即javascript此时才可以访问网页中的任何元素

         b、$(document).ready():通过$(document).ready处理，DOM完全就绪后可以被任意调用

2、Bind()的调用格式：Bind( type [,data] , fn);

         a、type：事件类型，类型包括：blur、focus 、load 、resize 、scroll 、unloand 、click 、dblclick 、mousedown 、mouseup 、mousemove 、mouseover 、mouseout 、mouseenter 、mouseleave 、change 、select 、submit 、keydown 、keypress 、keyup 和error等，也可以是自定义名称

         b、date:可选参数，作为event.data属性值传递给事件对象的额外数据对象

         c、是用来绑定的处理函数

3、jQuery中的合成方法：Hover() 和 toggle()

4、冒泡：在页面上有多个事件，也可以有多个元素响应同一个事件。

5、Hover()方法：模拟光标悬停事件。也就是当光标移动到元素上时，会触发指定的第一个函数（enter）；移除时触发第二个函数（leave）。

$(function(){

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

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

             },function(){

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

             });

         });

6、toggle(fn1,fn2,fn3……fnN)：模拟鼠标连续单击事件，第一次单击触发函数fn1，第二次fn2…….

$(funcion){                                                   

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

                   $(this).addclass("highlight").show();

},function(){

         $(this).remove("highlight");

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

             });

});

7、事件冒泡：

a、在程序中使用对象非常简单，只需要为函数添加一个参数

$(“element”).bind(“click”,function(event){

//event:事件对象

b、停止事件冒泡是为了阻止事件中的其他对象的事件处理函数被执行

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

                var txt = $('#msg').html() ;

                $('#msg').html(txt);

   even.stopPropagation();//停止

            });

c、阻止默认行为：事件对象.preventDefault();或 return false;

d、事件捕获：事件捕获和事件冒泡是两个相反的过程。从最外层元素开始，最里层结束

8、. Event.type()方法：该方法的作用是可以获取到事件的类型

       

  $(“a”).click (function(event){

           alert(event.type);//获取事件类型

            return false;//阻止连接跳转

       })；

9、. Event.pageX()方法/event.pageY()方法：该方法的作用是获取的光标相对于页面的 x 坐标和 y 坐标。如果没有使用jQuery时，那么IE浏览器中是用event.x()/event.y ()方法 而在Firefox浏览器中是用event.pageX()/event.pageY()方法。

       

  $(“a”).click (function (event){

   alert(“Current mouse position:” + event.pageX + “ , ” + event.pageY);

                //获取鼠标当前相对于页面的坐标

   return false;  // 阻止连接跳转

})；

10,show()和hide()方法:

$(function(){
    $(“#panel h5.head”).toggle(function(){
        $(this).next(“div.content”).hide()    },function(){
    $(this).next(“div.content”).show();
                  });                           
});

$(“#panle h5.head”).toggle(function(){
$(this).next(“div.content”).hide(600);
},function(){
$(this).next(“div.content”).show(600);
});

11:show（）方法和hide（)方法会同时修改元素的多个样式属性，即高度、宽度和不 透明度；fadeOut（）方法和fadeIn（）方法只会修改元素的不透明度 ；slideDown（）方法和slideUp（）方法只会u改变元素的高度。

12,jQuery的事件:

1事件绑定、

2合成事件、

3事件对象的属性、

4事件冒泡、

5移除事件、

6模式事件操作,

7其他事件用法

13,jQuery的动画方法:

•Hide（）和show（）  说明：同时修改多个样式属性即高度、宽度和不透明度

•Fadeln（）和fadeOut（）说明：只改变不透明度

•slideUp（）和slideDown（）说明：只改变高度

•fadeTo（）说明：只改变不透明度

•Totggle（）说明：用来代替hide（）方法和show（）方法，所以会同时修改多个样式即高度、宽度和不透明度。

•slideToggle（）说明：用来代替slideUp（）方法，所以只能改变高度

•Animate（）说明：属于自定义动画方法。以上各种动画方法实质内部都调用来animate（）方法