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

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

成都創(chuàng)新互聯(lián)公司專(zhuān)注于叢臺(tái)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城開(kāi)發(fā)。叢臺(tái)網(wǎng)站建設(shè)公司,為叢臺(tái)等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

  

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

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

jQuery.noConflict();

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

1) bind()

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

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

跨瀏覽器

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

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

對(duì)于簡(jiǎn)單的ID選擇器來(lái)說(shuō)，使用.bind()不僅方便，而且當(dāng)觸發(fā)這個(gè)事件的時(shí)候能夠即時(shí)響應(yīng)。

缺點(diǎn):

這個(gè)方法會(huì)附加相同的處理程序到每一個(gè)匹配到的元素上

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

性能問(wèn)題，對(duì)于處理大量的匹配元素的時(shí)候

如果在頁(yè)面加載前要處理添加事件的話(huà)，會(huì)影響加載效率的

2) live()

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

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

相對(duì)于.bind()的循環(huán)注冊(cè)很多次事件處理程序來(lái)說(shuō)，.live()只注冊(cè)一次事件處理程序

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

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

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

缺點(diǎn):

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

鏈接不能夠正常的支持這個(gè)方法

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

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

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

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

3) delegate()

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

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

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

鏈接也可以有效的支持了

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

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

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

缺點(diǎn):

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

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

4) on()

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

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

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

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

缺點(diǎn):

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

總結(jié)

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

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

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

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

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

4.event 對(duì)象有很多可用的屬性

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

6.模擬事件

方法一,$('.box').click(function(){console.log(111)}).trigger('click');使用trigger()可以在打開(kāi)頁(yè)面的時(shí)候就模擬點(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()方法并不會(huì)觸發(fā)事件的默認(rèn)行為，而.trigger()會(huì)

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

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

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

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

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

}).trigger('submit');

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

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

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

    return 123;

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

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

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

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

    index++;

});

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

7.命名空間

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

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

    alert('abc');

});

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

        alert('xyz');

});

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

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

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

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

8.jQuery 提供了一組改變?cè)馗叨鹊姆椒ǎ?slideUp()、.slideDown()和.slideToggle()。顧名滑動(dòng)、卷動(dòng)

思義，向上收縮(卷動(dòng))和向下展開(kāi)(滑動(dòng))。

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

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

});

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

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

});

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

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

});

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

9.三．淡入、淡出

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

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

});

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

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

});

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

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

});

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

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

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

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

});

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

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

10.自定義動(dòng)畫(huà)

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

$('#box').animate({

                  'width' : '300px',

                'height' : '200px',

                'fontSize' : '50px',

            'opacity' : 0.5

        });

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

很多時(shí)候需要停止正在運(yùn)行中的動(dòng)畫(huà)，jQuery 為此提供了一個(gè).stop()方法。

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

網(wǎng)站標(biāo)題：jQuery詳細(xì)教程一(個(gè)人整理)
文章URL：http://muchs.cn/article40/ipgoeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)