国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

細說 jQuery 元素篇（一） - 理解 DOM

everfight / 3014人閱讀

摘要：最強大的特性之一就是簡化了對元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對象中的元素會被自動地，隱式地循環(huán)遍歷。訪問從上可知，返回的是對象，但是我們有時也希望直接對元素進行操作。

DOM - Document Object Model，即文檔對象模型，它通過對象樹來展示 HTML 代碼。jQuery 最強大的特性之一就是簡化了對 DOM 元素的操作。

DOM 樹

w3shcool 的 DOM 樹模型圖就能很好地表現(xiàn) DOM 樹的結(jié)構(gòu)。

從圖中，我們可以看出 DOM 元素中父元素、子元素之間的關(guān)系。
在開發(fā)時，我們可以通過調(diào)試工具更清晰地看到 DOM 樹的結(jié)構(gòu)。

$()函數(shù)

通過 $() 函數(shù)，我們可以創(chuàng)建 jQuery 對象，這個函數(shù)可以接受標簽名，ID 和類名作為參數(shù)，可以多帶帶使用，也可以同時使用多個。
被封裝到 jQuery 對象中的 DOM 元素會被自動地，隱式地循環(huán)遍歷。

標簽名 $("a") //取得文檔中所有 a 標簽

ID $("#myId") //取得文檔中 id 為 myId 的 DOM 元素

類名 $(".myClass") //取得文檔中 class 為 myClass 的 DOM 元素

遍歷 DOM

我們已經(jīng)知道通過 $() 函數(shù)可以取得一組元素，在此基礎(chǔ)上，jQuery 還提供了很多方法來操作取得的元素，例如取得父元素、子元素等等。有了這些操作，我們就可以靈活地穿梭在 DOM 樹中。

1.filter

首先我們必須要提到過濾函數(shù) - filter。
我們知道 $() 函數(shù)可以接受多個內(nèi)容作為參數(shù)，例如我們希望取得類名為 before 的 a 標簽，可以這樣寫：

$("a.before")

使用 filter 函數(shù)后，我們也可以這樣寫：

$("a").filter(".before")

這樣看上去，好像 filter 只是做了件重復(fù)的事情，但是 filter 的功能肯定不僅限于此。讓我們來看看它更強大的地方。
假設(shè)現(xiàn)在我們有兩個 class 都為 before 的 a 標簽，而我們希望能取到父元素是 span 的那個 a 標簽，那么直接用第一種方式寫肯定難以實現(xiàn)，不過有了 filter 函數(shù)就方便多了：

$("a").filter(function(){
  return this.className == "before" && this.parentElement.nodeName == "SPAN";
});
2.連綴

jQuery 中可以使用一行代碼取得多個指定的 DOM 元素集合，并可以對這個集合的元素進行操作，這一能力我們稱之為連綴能力。jQuery的這種連綴能力不僅有助于保持代碼簡潔，而且在替代組合重新指定選擇符時，還有助于提升腳本性能。
為了可讀性，我們習(xí)慣于把一行代碼拆開來寫：

連綴相當(dāng)于是一句話做了很多事情，雖然效率方面表現(xiàn)不錯，但無疑比較難理解，所以我們盡量將其分行寫，同時添加上合適的注釋。

訪問 DOM

從上可知，jQuery 返回的是 jQuery 對象，但是我們有時也希望直接對 DOM 元素進行操作。這時，我們需要用到 jQuery 提供的 get 方法。例如，.get(0) 可以訪問到 jQuery 對象封裝的第一個 DOM 元素。

$("a").get(0)

對此，jQuery 還提供了一種更簡的寫法：

$("a")[0]

這種語法結(jié)構(gòu)有點類似于 Javascript 中的數(shù)組操作，但實際上兩者是不同，這就相當(dāng)于剝開 jQuery 的封裝，直接露出 DOM 節(jié)點列表，然后進行選擇。

參考

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78151.html

相關(guān)文章

  • 細說 jQuery 事件篇（三） - 事件傳播

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

    Cc_2011 評論0 收藏0

  • 細說 jQuery 事件篇（一） - 代碼執(zhí)行時機

    摘要：在元素一篇介紹過，可以使用來使得代碼在加載完畢后自動執(zhí)行代碼，接下來具體介紹下這個機制。這樣看上去貌似沒什么問題，但是如果有兩個函數(shù)需要指定時就會遇到麻煩，因為屬性只能保存對一個函數(shù)的引用，如果我們寫成以下形式最后代碼執(zhí)行后的效果是會覆蓋。 在元素一篇介紹過，jQuery 可以使用 $(document).ready() 來使得代碼在 DOM 加載完畢后自動執(zhí)行代碼，接下來具體介紹下這...

    dunizb 評論0 收藏0

  • 細說 jQuery DOM操作篇（二） - DOM 樹操作

    摘要：此時，點擊新建的將會觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過 $() ...

    Anchorer 評論0 收藏0

  • 細說 jQuery DOM操作篇（一） - 屬性操作

    摘要：之前已經(jīng)知道可以使用和等方法來修改類屬性，今天來具體討論下各種屬性的操作。非類屬性有時候，我們還需要對一些其他的屬性進行操作，例如，，等等。例如單選按鈕的屬性。 之前已經(jīng)知道可以使用 addClass 和 removeClass 等方法來修改類屬性，今天來具體討論下各種屬性的操作。 非類屬性 有時候，我們還需要對一些其他的屬性進行操作，例如 href，title，id 等等。這里，...

    ideaa 評論0 收藏0

  • 細說 jQuery 元素篇（二） - 選擇符

    摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。 為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...

    104828720 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<