jQuery詳細(xì)教程一(個人整理)

1.onload和ready的區(qū)別

   在實(shí)際應(yīng)用中，我們都很少直接去使用window.onload，因?yàn)樗枰却龍D片之類的大型元素加載完畢后才能執(zhí)行JS代碼。所以，最頭疼的就是網(wǎng)速較慢的情況下，頁面已經(jīng)全面展開，圖片還在緩慢加載，這時頁面上任何的JS交互功能全部處在假死狀態(tài)。并且只能執(zhí)行單次在多次開發(fā)和團(tuán)隊開發(fā)中會帶來困難。

2.將$符的所有權(quán)剔除

jQuery.noConflict();

3.bind(),live(),delegate(),on()的區(qū)別

1) bind()

.bind()注冊的事件直接指向相對應(yīng)的DOM元素

優(yōu)點(diǎn):

跨瀏覽器

非常方便和快捷地綁定事件

簡單的實(shí)現(xiàn)方法（.click() .hover() ,etc…）讓它用起來很方便

對于簡單的ID選擇器來說，使用.bind()不僅方便，而且當(dāng)觸發(fā)這個事件的時候能夠即時響應(yīng)。

缺點(diǎn):

這個方法會附加相同的處理程序到每一個匹配到的元素上

對于動態(tài)添加的屬于匹配到的元素，不會被觸發(fā)事件的

性能問題，對于處理大量的匹配元素的時候

如果在頁面加載前要處理添加事件的話，會影響加載效率的

2) live()

.live()方法使用的是事件委托的概念來執(zhí)行所謂的“神奇方法”。

優(yōu)點(diǎn):

相對于.bind()的循環(huán)注冊很多次事件處理程序來說，.live()只注冊一次事件處理程序

從.bind()更新到.live()的方法對程序更改很少，只需要替換“bind”為”live”

對于動態(tài)添加的屬于匹配到的元素，也能夠“神奇”的執(zhí)行處理程序

在document元素沒有全部加載完之前都能夠幾乎不花時間地綁定并觸發(fā)事件

缺點(diǎn):

此方法在jQuery1.7的時候已經(jīng)廢除，你應(yīng)該逐步從你的代碼中替換掉該方法

鏈接不能夠正常的支持這個方法

這個方法被拋棄是因?yàn)樗荒軌蚪壎ㄊ录幚沓绦虻絛ocument上

event.stopPropagation()不再有效了，因?yàn)槭录呀?jīng)委托到了document上了

由于所有的選擇器和事件信息都是附加到了document上的，所以一個確定的事件要觸發(fā)，必須通過大量的存儲信息來匹配到

由于事件都是委托到了document上的，所以如果DOM太深的話，會影響到性能的

3) delegate()

.delegate()方法的行為有點(diǎn)類似.live()。但是不是把選擇器和事件的信息附加到了document上，而是可以自行選擇它要附加的DOM元素，這個技術(shù)可以讓事件的委托正常工作優(yōu)點(diǎn)

優(yōu)點(diǎn):

可以自由選擇附加的選擇器和事件信息的位置

鏈接也可以有效的支持了

jQuery仍然需要循環(huán)訪問選擇器和事件數(shù)據(jù)來確定匹配，但是因?yàn)槟軌蜻x擇這些信息附加的位置，所以通過匹配的量小很多了

由于這種技術(shù)使用了事件委托，所以它能很好的動態(tài)處理添加到DOM元素

如果你委托事件到了document上，你也可以在document全部準(zhǔn)備完之前綁定和調(diào)用

缺點(diǎn):

方法從.bind()更改到.delegate()比較麻煩

如果把選擇器和事件數(shù)據(jù)附加到了document上，仍然需要很多的匹配信息，但是相對于.live()的存儲量要小很多了

4) on()

優(yōu)點(diǎn):

為各種事件綁定方法帶來了統(tǒng)一性

簡化了jQuery代碼庫，并刪除一個界別的重定向，因?yàn)橥ㄟ^調(diào)用這個方法實(shí)現(xiàn)了 .bind() .live() 和 .delegate()

仍然提供了好用的.delegate()方法，但是也仍然對.bind()方法提供了支持

缺點(diǎn):

因?yàn)檎{(diào)用這個方法的各個形式，會帶來一些混亂

總結(jié)

使用.bind()方法是很浪費(fèi)資源的，因?yàn)樗ヅ溥x擇器中的每一項并且挨個設(shè)置相同的事件處理程序

建議停止使用.live()方法，因?yàn)樗呀?jīng)被棄用了，由于他有很多的問題

.delegate()方法“很劃算”用來處理性能和響應(yīng)動態(tài)添加元素的時候

新的.on()方法主要是可以實(shí)現(xiàn).bind() .live() 甚至 .delegate()的功能

建議使用.on()方法，如果你的項目使用了1.7+的jQuery的話

4.event 對象有很多可用的屬性

5.冒泡和默認(rèn)行為的一些方法

6.模擬事件

方法一,$('.box').click(function(){console.log(111)}).trigger('click');使用trigger()可以在打開頁面的時候就模擬點(diǎn)擊事件

方法二就是$('.box').click(function(){console.log(111)}).click();直接使用click()模擬點(diǎn)擊事件,當(dāng)然不局限點(diǎn)擊事件,jQ提供了基本上所有事件的模擬事件:

blur focusin mousedown resize change focusout mousenter scroll click keydown mouseleave select dblclick keypress mousemove submit error keyup mouseout unload focus load mouseover

.trigger()和.triggerHandler()的區(qū)別

1..triggerHandler()方法并不會觸發(fā)事件的默認(rèn)行為，而.trigger()會

$('form').trigger('submit'); //模擬用戶執(zhí)行提交，并跳轉(zhuǎn)到執(zhí)行頁面

$('form').triggerHandler('submit'); //模擬用戶執(zhí)行提交，并阻止的默認(rèn)行為

如果我們希望使用.trigger()來模擬用戶提交，并且阻止事件的默認(rèn)行為，則需要這么寫：

$('form').submit(function (e) {

    e.preventDefault(); //阻止默認(rèn)行為

}).trigger('submit');

2..triggerHandler()方法只會影響第一個匹配到的元素，而.trigger()會影響所有。

3..triggerHandler()方法會返回當(dāng)前事件執(zhí)行的返回值，如果沒有返回值，則返回undefined；而.trigger()則返回當(dāng)前包含事件觸發(fā)元素的 jQuery 對象(方便鏈?zhǔn)竭B綴調(diào)用)。

alert($('input').click(function () {

    return 123;

}).triggerHandler('click')); //返回 123，沒有 return 返回

4..trigger()在創(chuàng)建事件的時候，會冒泡。但這種冒泡是自定義事件才能體現(xiàn)出來，是jQuery 擴(kuò)展于 DOM 的機(jī)制，并非 DOM 特性。而.triggerHandler()不會冒泡。

$('div').bind('myEvent',function(){

    alert('自定義事件' + index);

    index++;

});

$('.div3').trigger("myEvent");

7.命名空間

有時，我們想對事件進(jìn)行移除。但對于同名同元素綁定的事件移除往往比較麻煩，這個時候，可以使用事件的命名空間解決。

$('input').bind('click.abc', function () {

    alert('abc');

});

$('input').bind('click.xyz', function () {

        alert('xyz');

});

$('input').unbind('click.abc'); //移除 click 實(shí)踐中命名空間為 abc 的

注意：也可以直接使用('.abc')，這樣的話，可以移除相同命名空間的不同事件。對于模

擬操作.trigger()和.triggerHandler()，用法也是一樣的。

    $('input').trigger('click.abc');

8.jQuery 提供了一組改變元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顧名滑動、卷動

思義，向上收縮(卷動)和向下展開(滑動)。

$('.down').click(function () {

        $('#box').slideDown();

});

$('.up').click(function () {

        $('#box').slideUp();

});

$('.toggle').click(function () {

        $('#box').slideToggle();

});

注意：滑動、卷動效果和顯示、隱藏效果一樣，具有相同的參數(shù)。

9.三．淡入、淡出

$('.in').click(function () {

        $('#box').fadeIn('slow');

});

$('.out').click(function () {

        $('#box').fadeOut('slow');

});

$('.toggle').click(function () {

        $('#box').fadeToggle();

});

上面三個透明度方法只能是從 0 到 100，或者從 100 到 0，如果我們想設(shè)置指定值就沒

有辦法了。而 jQuery 為了解決這個問題提供了.fadeTo()方法。

$('.toggle').click(function () {

        $('#box').fadeTo('slow', 0.33); //0.33 表示值為 33

});

注意：淡入、淡出效果和顯示、隱藏效果一樣，具有相同的參數(shù)。對于.fadeTo()方法，

如果本身透明度大于指定值，會淡出，否則相反。

10.自定義動畫

，jQuery 提供了一個.animate()方法來創(chuàng)建我們的自定$('.animate').click(function () {義動畫，滿足更多復(fù)雜多變的要求。

$('#box').animate({

                  'width' : '300px',

                'height' : '200px',

                'fontSize' : '50px',

            'opacity' : 0.5

        });

注意：一個 CSS 變化就是一個動畫效果，上面的例子中，已經(jīng)有四個 CSS 變化，已經(jīng)實(shí)現(xiàn)了多重動畫同步運(yùn)動的效果。

很多時候需要停止正在運(yùn)行中的動畫，jQuery 為此提供了一個.stop()方法。

它有兩個可選參數(shù)：.stop(clearQueue, gotoEnd)；clearQueue 傳遞一個布爾值，代表是否清空未執(zhí)行完的動畫列隊，gotoEnd 代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)。