成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

細(xì)說 jQuery 事件篇（一） - 代碼執(zhí)行時(shí)機(jī)

dunizb / 2813人閱讀

摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動(dòng)執(zhí)行代碼，接下來具體介紹下這個(gè)機(jī)制。這樣看上去貌似沒什么問題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)閷傩灾荒鼙４鎸?duì)一個(gè)函數(shù)的引用，如果我們寫成以下形式最后代碼執(zhí)行后的效果是會(huì)覆蓋。

在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動(dòng)執(zhí)行代碼，接下來具體介紹下這個(gè)機(jī)制。

  
$document.ready() 可以簡寫為 $()，為了書寫更直觀，本文暫不采用簡寫方式。
比較 window.onload

我們可以使用原生 Javascript 中的 window.load 方法實(shí)現(xiàn) $document.ready() 的效果，但兩者還是有不小的差異。
對(duì)于 window.load 是指整個(gè)文檔對(duì)象已經(jīng)完完全全地加載到頁面中來，而 jQuery 的 $document.ready() 方法則是指 DOM 完全就緒，兩者的差異可以用一個(gè)例子來說明：

  
假設(shè)當(dāng)前頁面具有大量的圖像文件，對(duì)于 window.load 方法，必須等到所有關(guān)聯(lián)的圖像文件都已經(jīng)下載完畢后才生效，而 $document.ready() 則在 HTML 下載完畢并已經(jīng)解析為 DOM 樹時(shí)便已經(jīng)生效。

這樣看上去貌似 jQuery 的方法要優(yōu)于原生 Javascript 的處理方法，實(shí)際上也的確如此，但對(duì)于有些情況下，則必須使用 load 方法才會(huì)生效，例如上例中的圖像，當(dāng)我們?cè)诖a中需要對(duì)圖像的長寬屬性進(jìn)行處理時(shí)，則需要使用 load 方法來實(shí)現(xiàn)，這兩種方法應(yīng)該根據(jù)實(shí)際需求配合使用。

單頁面執(zhí)行多個(gè)腳本

在傳統(tǒng)的 Javascript 代碼中，我們經(jīng)?？吹綄⒁粋€(gè)函數(shù)指定給 DOM 元素的對(duì)應(yīng)屬性，例如如下代碼：

function myClick() {
  //do some stuff here.
}

也可以寫成這種形式：

document.querySelector("button").onclick = myClick;

  
這里寫成 myClick 而不是 myClick()，因?yàn)榍罢咧傅氖菍?duì)函數(shù)引用，后者指的是函數(shù)執(zhí)行，前者因?yàn)槭且?，所以可以再將來被再次調(diào)用，而后者則是指頁面加載時(shí)立即調(diào)用執(zhí)行，不能再被調(diào)用。

這樣看上去貌似沒什么問題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)?onclick 屬性只能保存對(duì)一個(gè)函數(shù)的引用，如果我們寫成以下形式：

document.querySelector("button").onclick = myClick1;
document.querySelector("button").onclick = myClick2;

最后代碼執(zhí)行后的效果是 myClick2 會(huì)覆蓋 myClick1。
而如果我們使用 jQuery 的機(jī)制，則能很好地解決這個(gè)問題，每次調(diào)用 $doucment.ready() 時(shí)都會(huì)向內(nèi)部的行為隊(duì)列添加一個(gè)新的函數(shù)，當(dāng)頁面加載完畢后，所有的函數(shù)都會(huì)按順序執(zhí)行。

$(document).ready(function() {
  $("button").click(function() {
    //do myClick1 stuff here.
  });
  $("button").click(function() {
    //do myClick2 stuff here.
  });
});

然而實(shí)際上現(xiàn)版本的 Javascript 已經(jīng)引入 addEventListener 方法來解決這個(gè)問題：

document.querySelector("button").addEventListener("click", myClick1, false);
document.querySelector("button").addEventListener("click", myClick2, false);

但是考慮到兼容性，jQuery 可以讓我們更加輕松地應(yīng)對(duì)這個(gè)問題。

解決命名沖突

很多時(shí)候，我們需要使用的庫不僅僅只有 jQuery，而由于很多庫都會(huì)采用 $ 來作為標(biāo)識(shí)符，因此就需要一種解決命名沖突的機(jī)制。
為了解決這個(gè)常見的問題，jQuery 提供了一個(gè) noConflict() 方法，使用該方法后，可以將 $ 的控制權(quán)過度給其他的庫來使用。假設(shè)我們有個(gè) myLibrary 的庫，該庫也使用 $ 來作為標(biāo)識(shí)符，那么使用方法為：

此時(shí)再寫 jQuery 方法時(shí)就必須采用以下的形式：

jQuery(document).ready(function($) {
  //do stuff here.
});

或者使用簡寫方式：

jQuery(function($) {
  //do stuff here.
});

這個(gè)其實(shí)很好理解，即我們將 jQuery 對(duì)象本身作為參數(shù)傳遞給回調(diào)函數(shù)，并且在內(nèi)部命名為 $，這樣在回調(diào)函數(shù)內(nèi)部可以自由書寫正常的 jQuery 代碼。

參考

http://book.douban.com/subject/24669823/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78144.html

相關(guān)文章

  • 細(xì)說 jQuery 事件篇（三） - 事件傳播

    摘要：是如何決定由哪個(gè)元素來處理事件的，以及又是如何優(yōu)化處理這個(gè)問題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會(huì)導(dǎo)致意料之外的行為，例如在響應(yīng)事件時(shí)，依舊是上例，當(dāng)為最外層的添加一個(gè)事件。使用方法可以避免事件傳播導(dǎo)致的問題。 Javascript 是如何決定由哪個(gè)元素來處理事件的，以及 jQuery 又是如何優(yōu)化處理這個(gè)問題的，這些都涉及到了事件傳播。 事件傳播策略 當(dāng)頁面內(nèi)...

    Cc_2011 評(píng)論0 收藏0

  • 細(xì)說 jQuery Ajax操作篇（一） - 數(shù)據(jù)加載

    摘要：同樣將其綁定在按鈕點(diǎn)擊事件上查看結(jié)果為這里需要注意，如果文檔內(nèi)的格式錯(cuò)誤，雖然不會(huì)報(bào)錯(cuò)，但是將無法執(zhí)行回調(diào)函數(shù)。 Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。 加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設(shè)當(dāng)前頁面為： load showImg(http://segmen...

    paulli3 評(píng)論0 收藏0

  • 細(xì)說 jQuery 事件篇（四） - 改變事件過程

    摘要：事件對(duì)象是一種結(jié)構(gòu)，它會(huì)在元素獲得處理事件的機(jī)會(huì)時(shí)傳遞給調(diào)用的事件處理程序。事件對(duì)象的屬性指的是事件目標(biāo)，它將保存發(fā)生事件的目標(biāo)元素。所以，接下來我們就要想辦法改變事件過程來阻止這個(gè)行為。 在 《細(xì)說 jQuery 事件篇（三） - 事件傳播》 中提到了事件冒泡可能造成的弊端，當(dāng)時(shí)舉了 mouseout 的例子，對(duì)于 mouseout 這個(gè)特殊情況，我們可以用 hover 方法來解決，...

    nifhlheimr 評(píng)論0 收藏0

  • 細(xì)說 jQuery 事件篇（二） - 處理簡單事件

    摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個(gè)方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。 增添樣式 基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...

    ckllj 評(píng)論0 收藏0

  • 細(xì)說 jQuery 事件篇（五） - 事件的移除和重綁定

    摘要：一種做法是在事件處理程序中使用條件語句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕后，所有的事件的處理程序又被重新綁定回來。 如果我們需要移除已經(jīng)注冊(cè)的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。 移除處理程序 假設(shè)有個(gè) div 和 button，當(dāng)我們點(diǎn)擊...

    boredream 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<