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

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

注意：使用的jQuery版本为1.7.1

jQuery中的事件

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

一、执行时机

window.onload方法在网页全部元素都加载完毕以后才执行，$(document).ready()方法在DOM彻底就绪就能够被调用

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

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

等价于：

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

二、屡次使用

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

三、简写形式

$(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自定义方法

一、hover()方法

hover(enter,leave)

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

二、toggle()方法

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

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

事件冒泡

中止事件冒泡

使用event.stopPropagation()能够中止事件冒泡

阻止默认行为

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

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

event.preventDefault()

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

事件对象属性

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

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

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

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

五、event.relatedTarget，在标准DOM中，mouseout和mouseout所发生的元素能够经过event.target来访问，相关元素能够经过event.relatedTarget访问

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

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

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

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

移除事件

一、移除按钮元素上之前注册的事件

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

unbind([type],[data]);

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

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

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

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

注：对于只须要触发一次，以后就解绑的状况，jQuery提供了one()方法，能够为元素绑定处理函数，触发一次以后，当即删除

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

one(type [,data] ,fn);

模拟操做

一、经常使用模拟

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

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

二、触发自定义事件

trigger()方法不只可触发浏览器支持的具备相同名称的事件，也能够触发自定义名称的事件

例：

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

三、传递数据

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

四、执行默认操做

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

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

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

使用triggerHandler()方法能够只触发事件，而不执行浏览器默认操做

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

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

其余用法

一、绑定多个事件类型

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

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

$(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事件依然存在

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

$(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中的动画

一、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);
    });
});

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

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

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

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

三、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：动画完成时执行的函数，可选

一、自定义简单动画

<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，只会移动一次

二、累加、累减动画

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

三、多重动画

（1）同时执行多个动画

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

这是同时执行的动画

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

把多个动画拆开便可

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

链式写法：

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

四、综合动画

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

五、动画回调函数

若想在最后完成时改变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",width:"200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
});

注：callback回调函数适合jQuery的全部动画效果

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

一、中止元素的动画

使用stop()方法

stop([clearQueue],[gotoEnd]);

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

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

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

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

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

三、延迟动画

使用delay()方法能够对动画进行延迟操做

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

其余动画方法

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

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

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

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

一、toggle()

可切换元素的可见状态

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

等价于：

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

二、slideToggle()方法

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

三、fadeTo()方法

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

四、fadeToggle()方法

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

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

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