锋利的jQuery第2版学习笔记4、5章

第4章，jQuery中的事件和动画

注意：使用的jQuery版本为1.7.1

jQuery中的事件

JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。

1、执行时机

window.onload方法在网页所有元素都加载完毕之后才执行，$(document).ready()方法在DOM完全就绪就可以被调用

由于$(document).ready()方法内注册事件，只要DOM就绪就会被执行，因此有可能此时元素的关联文件还未下载完，例如图片的宽高可能无效。为解决此问题，使用jQuery另一个方法-----load()方法。load()方法会在元素的onload事件绑定一个处理函数。

$(window).load(function(){
     //编写代码
});

等价于：

window.onload = function(){
     //编写代码
};

2、多次使用

windows.onload()方法不能保存多个函数引用，而$(document).ready()可以

3、简写形式

$(document).ready(function(){
     //编写代码
});

简写：

$(function(){
     //编写代码
});

$(document)也可以简写为$()，当$()不带参数时，默认参数就是document，因此还可以简写：

$().ready(function(){
     // coding
});

3种方式都是一样的功能

事件绑定

使用bind()方法来对匹配元素进行特定事件绑定，调用格式：

bind(type [,datd] ,fn);

第一个参数是事件类型，包括：blur、focus、load、resize、scroll等等，当然也可以是自定义名称

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数则是用来绑定的处理函数

使用：

$("#panel h5.head").bind("click",function(){
     // coding
});

合成事件

jQuery有两个合成事件---hover()、toggle()，类似ready()，hover()和toggle()都是jQuery自定义方法

1、hover()方法

hover(enter,leave)

用于模拟光标悬停事件，当光标移动到元素上，触发指定的第一个函数，移出元素，触发指定的第二个函数

2、toggle()方法

toggle(fn1,fn2,fn3.....)，在jQuery1.9被移除

用于模拟鼠标连续点击事件，第1次点击触发第一个函数，第2次点击触发第二个函数，第3次点击触发第三个，依次类推，重复调用

事件冒泡

停止事件冒泡

使用event.stopPropagation()可以停止事件冒泡

阻止默认行为

网页中的元素有自己的默认行为，例如点击超链接会跳转、单击提交按钮，表单会提交，有时需阻止事件默认行为

jQuery中提供了preventDefault()方法来阻止默认行为

event.preventDefault()

注：若想对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件对象上同时调用stopPropagation和preventDefault的一种简写方式

事件对象属性

1、event.type，获取事件的类型

2、event.preventDefault()，阻止默认行为

3、event.stopPropagation()，阻止事件冒泡

4、event.target，获取触发事件的元素

5、event.relatedTarget，在标准DOM中，mouseout和mouseout所发生的元素可以通过event.target来访问，相关元素可以通过event.relatedTarget访问

6、event.pageX和event.pageY，用于获取光标相对于页面的x坐标和y坐标，若页面有滚动条，还要加上滚动条的宽高

7、event.which，在鼠标事件中获取鼠标的左（1）、中（2）、右键（3），在键盘事件中获取键盘的按键

8、event.metaKey，键盘事件中获取<ctrl>按键

更多属性访问：http://docs.jquery.com/Events/jQuery.Event

移除事件

1、移除按钮元素上以前注册的事件

使用unbind()方法，语法结构：

unbind([type],[data]);

第一个参数是事件类型，第二个参数是要移除的函数

（1）若没有参数，删除所有绑定事件

（2）若提供了事件类型作为参数，则只删除该类型的绑定事件

（3）若都传递，则只有这个特定的事件处理函数会被删除

注：对于只需要触发一次，之后就解绑的情况，jQuery提供了one()方法，可以为元素绑定处理函数，触发一次之后，立即删除

one()方法的结构与bind()方法类似，使用方法也与bind()方法类似，语法结构：

one(type [,data] ,fn);

模拟操作

1、常用模拟

使用trigger()方法完成模拟操作：

$("#btn").trigger("click");     // 触发id为btn的click事件
// 也可以简化：
$("#btn").click();

2、触发自定义事件

trigger()方法不仅可触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件

例：

$('#btn').bind("myClick",function(){
    $('#test').append("<p>我的自定义事件</p>");
});
$('#btn').trigger("myClick");

3、传递数据

$('#btn').bind("myClick",function(event,message1,message2){
    $('#test').append("<p>"+message1+message2+"</p>");
});
$('#btn').trigger("myClick",["我的自定义","事件"]);

4、执行默认操作

trigger()方法触发事件后，还会执行浏览器默认操作

$('input').trigger("focus");

不仅会触发绑定在input上的事件，也会使input元素获得焦点

使用triggerHandler()方法可以只触发事件，而不执行浏览器默认操作

$('input').triggerHandler("focus");

只会触发绑定事件，不会是input元素获得焦点

其他用法

1、绑定多个事件类型

$(function(){
     $("div").bind("mouseout mouseover",function(){
          //do something 
     });
};

2、添加事件命名空间，便于管理

$(function(){
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("mouseover.plugin",function(){
        $('body').append("<p>mouseover事件</p>");
    });
    $('div').bind("dbclick",function(){
        $('body').append("<p>dbclick事件</p>");
    });
    $('button').click(function(){
        $('div').unbind(".plugin");
    });
});

在所绑定的事件后面添加命名空间，删除时只需要指定命名空间即可，单击<button>后，plugin的命名空间被删除，而不再plugin空间中的dbclick事件依然存在

3、相同事件名称，不同命名空间执行方法

$(function(){
    $('div').bind("click",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click.plugin事件</p>");
    });
    $('button').click(function(){
        $('div').trigger("click!"); //注意感叹号
    });
});

单击<div>元素后，会同时触发click事件和click.plugin事件，若只单击<button>则只触发click事件，不触发click.plugin事件，注意trigger("click!")后面的感叹号的作用是匹配所有不包含命名空间中的click方法

若两者都要触发，改为如下代码：

$("div").trigger("click");

jQuery中的动画

1、show()方法和hide()方法

（1）show()方法和hide()方法

调用hide()方法会将该元素的display样式改为“none”

元素隐藏后可以使用show()方法将元素的display样式设置为先前的显示状态

（2）show()方法和hide()方法让元素动起来

希望调用show()方法时元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，速度关键字“slow”

$(“element”).show("slow");

元素会在600ms内慢慢显示，还有normal（400ms），fast（200ms），还可以指定一个数字（单位是毫秒）

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});

2、fadeIn()方法和fadeOut()方法

fadeIn(),fadeOut()只改变元素的不透明度，fadeOut()会在指定的时间内降低元素的不透明度，直至元素完全消失（display:none），fadeIn()相反。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    });
});

也可以使用关键字和指定时间参数，单位毫秒

3、slideUp()方法和slideDown()方法

这两个方法只会改变元素的高度，若一个元素的display为none，slideDown()会将这个元素自上而下延伸显示，slideUp()正好相反

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().slideDown();
    },function(){
        $(this).next().slideUp();
    });
});

一样可以使用关键字和指定时间参数，单位毫秒

自定义动画方法animate()

animate(params, speed, callback);

（1）params：一个包含样式属性及值的映射，例：{property:"value",property:"value1",....}

（2）speed：速度参数，可选

（3）callback：动画完成时执行的函数，可选

1、自定义简单动画

<div id="panels"></div>

#panels{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0050d0;
    background: #96e555;
    cursor: pointer;
}

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
    });
});

三秒之内，div右移500px，只会移动一次

2、累加、累减动画

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"+=500px"},3000);
    });
});

3、多重动画

（1）同时执行多个动画

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px","200px",height:"200px"},3000);
    });
});

这是同时执行的动画

（2）按顺序执行多个动画

把多个动画拆开即可

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
        $(this).animate({"200px"},3000);
        $(this).animate({height:"200px"},3000);
    });
});

链式写法：

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000)
                .animate({"200px"},3000)
                .animate({height:"200px"},3000);
    });
});

4、综合动画

$(function(){
    $("#panels").css("opacity","0.5");//设置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px","200px"},3000)
                .fadeOut("slow");
    });
});

5、动画回调函数

若想在最后完成时改变CSS样式，而不是淡出，则需要使用回调函数，而不是将css()方法写在fadeOut()方法的位置，因为css()方法并不会加入动画队列

$(function(){
    $("#panels").css("opacity","0.5");//设置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px","200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
});

注：callback回调函数适合jQuery的所有动画效果

停止动画和判断是否处于动画状态

1、停止元素的动画

使用stop()方法

stop([clearQueue],[gotoEnd]);

参数均为可选参数，为boolean值

clearQueue表示是否清空动画队列，gotoEnd表示直接将正在执行的动画跳转到末状态

如果直接使用stop()方法，则会立即停止正在执行的动画，若还有动画等待执行，则以当前状态继续执行下一个动画

2、判断元素是否处在动画状态

if(!$("element").is(":animate")){
    //do something
}

3、延迟动画

使用delay()方法可以对动画进行延迟操作

$(function(){
    $("#panels").css("opacity","0.5");//设置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .delay(1000)     // 延迟的是下一个动画
                .animate({top:"200px","200px"},3000);
    });
});

其他动画方法

1、toggle(speed,[callback])方法

2、slideToggle(speed,[easing],[callback]);

3、fadeTo(speed,opacity,[callback]);

4、fadeToggle(speed,[easing],[callback]);

1、toggle()

可切换元素的可见状态

$("#panel h5.head").click(function(){
    $(this).next().toggle();
});

等价于：

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});

2、slideToggle()方法

通过高度变化切换匹配元素可见性

3、fadeTo()方法

把元素的不透明度以渐进方式调整到指定值，只调整元素的不透明度，

4、fadeToggle()方法

通过元素不透明度变化来切换元素的可见性，只调整元素的不透明度

第5章，jQuery对表单、表格的操作及更多应用

本章大多是使用前面介绍的方法的应用，没啥笔记