資訊專欄INFORMATION COLUMN
摘要：最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì)元素的操作。從圖中，我們可以看出元素中父元素子元素之間的關(guān)系。被封裝到對(duì)象中的元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。訪問(wèn)從上可知，返回的是對(duì)象，但是我們有時(shí)也希望直接對(duì)元素進(jìn)行操作。
DOM - Document Object Model，即文檔對(duì)象模型，它通過(guò)對(duì)象樹(shù)來(lái)展示 HTML 代碼。jQuery 最強(qiáng)大的特性之一就是簡(jiǎn)化了對(duì) DOM 元素的操作。
DOM 樹(shù)w3shcool 的 DOM 樹(shù)模型圖就能很好地表現(xiàn) DOM 樹(shù)的結(jié)構(gòu)。
從圖中，我們可以看出 DOM 元素中父元素、子元素之間的關(guān)系。
在開(kāi)發(fā)時(shí)，我們可以通過(guò)調(diào)試工具更清晰地看到 DOM 樹(shù)的結(jié)構(gòu)。
通過(guò) $() 函數(shù)，我們可以創(chuàng)建 jQuery 對(duì)象，這個(gè)函數(shù)可以接受標(biāo)簽名，ID 和類名作為參數(shù)，可以多帶帶使用，也可以同時(shí)使用多個(gè)。
被封裝到 jQuery 對(duì)象中的 DOM 元素會(huì)被自動(dòng)地，隱式地循環(huán)遍歷。
標(biāo)簽名 $("a") //取得文檔中所有 a 標(biāo)簽
ID $("#myId") //取得文檔中 id 為 myId 的 DOM 元素
類名 $(".myClass") //取得文檔中 class 為 myClass 的 DOM 元素
遍歷 DOM我們已經(jīng)知道通過(guò) $() 函數(shù)可以取得一組元素，在此基礎(chǔ)上，jQuery 還提供了很多方法來(lái)操作取得的元素，例如取得父元素、子元素等等。有了這些操作，我們就可以靈活地穿梭在 DOM 樹(shù)中。
1.filter首先我們必須要提到過(guò)濾函數(shù) - filter。
我們知道 $() 函數(shù)可以接受多個(gè)內(nèi)容作為參數(shù)，例如我們希望取得類名為 before 的 a 標(biāo)簽，可以這樣寫(xiě)：
$("a.before")
使用 filter 函數(shù)后，我們也可以這樣寫(xiě)：
$("a").filter(".before")
這樣看上去，好像 filter 只是做了件重復(fù)的事情，但是 filter 的功能肯定不僅限于此。讓我們來(lái)看看它更強(qiáng)大的地方。
假設(shè)現(xiàn)在我們有兩個(gè) class 都為 before 的 a 標(biāo)簽，而我們希望能取到父元素是 span 的那個(gè) a 標(biāo)簽，那么直接用第一種方式寫(xiě)肯定難以實(shí)現(xiàn)，不過(guò)有了 filter 函數(shù)就方便多了：
$("a").filter(function(){
return this.className == "before" && this.parentElement.nodeName == "SPAN";
});
2.連綴
jQuery 中可以使用一行代碼取得多個(gè)指定的 DOM 元素集合，并可以對(duì)這個(gè)集合的元素進(jìn)行操作，這一能力我們稱之為連綴能力。jQuery的這種連綴能力不僅有助于保持代碼簡(jiǎn)潔，而且在替代組合重新指定選擇符時(shí)，還有助于提升腳本性能。
為了可讀性，我們習(xí)慣于把一行代碼拆開(kāi)來(lái)寫(xiě)：
連綴相當(dāng)于是一句話做了很多事情，雖然效率方面表現(xiàn)不錯(cuò)，但無(wú)疑比較難理解，所以我們盡量將其分行寫(xiě)，同時(shí)添加上合適的注釋。
訪問(wèn) DOM從上可知，jQuery 返回的是 jQuery 對(duì)象，但是我們有時(shí)也希望直接對(duì) DOM 元素進(jìn)行操作。這時(shí)，我們需要用到 jQuery 提供的 get 方法。例如，.get(0) 可以訪問(wèn)到 jQuery 對(duì)象封裝的第一個(gè) DOM 元素。
$("a").get(0)
對(duì)此，jQuery 還提供了一種更簡(jiǎn)的寫(xiě)法：
$("a")[0]
這種語(yǔ)法結(jié)構(gòu)有點(diǎn)類似于 Javascript 中的數(shù)組操作，但實(shí)際上兩者是不同，這就相當(dāng)于剝開(kāi) jQuery 的封裝，直接露出 DOM 節(jié)點(diǎn)列表，然后進(jìn)行選擇。
參考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/78151.html
摘要：是如何決定由哪個(gè)元素來(lái)處理事件的，以及又是如何優(yōu)化處理這個(gè)問(wèn)題的，這些都涉及到了事件傳播。事件冒泡的弊端事件冒泡可能會(huì)導(dǎo)致意料之外的行為，例如在響應(yīng)事件時(shí)，依舊是上例，當(dāng)為最外層的添加一個(gè)事件。使用方法可以避免事件傳播導(dǎo)致的問(wèn)題。 Javascript 是如何決定由哪個(gè)元素來(lái)處理事件的，以及 jQuery 又是如何優(yōu)化處理這個(gè)問(wèn)題的，這些都涉及到了事件傳播。 事件傳播策略 當(dāng)頁(yè)面內(nèi)...
摘要：在元素一篇介紹過(guò)，可以使用來(lái)使得代碼在加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這個(gè)機(jī)制。這樣看上去貌似沒(méi)什么問(wèn)題，但是如果有兩個(gè)函數(shù)需要指定時(shí)就會(huì)遇到麻煩，因?yàn)閷傩灾荒鼙４鎸?duì)一個(gè)函數(shù)的引用，如果我們寫(xiě)成以下形式最后代碼執(zhí)行后的效果是會(huì)覆蓋。 在元素一篇介紹過(guò)，jQuery 可以使用 $(document).ready() 來(lái)使得代碼在 DOM 加載完畢后自動(dòng)執(zhí)行代碼，接下來(lái)具體介紹下這...
摘要：此時(shí)，點(diǎn)擊新建的將會(huì)觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過(guò) $() 函數(shù)可以訪問(wèn)文檔中的元素，并返回一個(gè) jQuery 對(duì)象，并且通過(guò)一系列方法，我們可以修改元素的樣式和內(nèi)容，實(shí)際上，我們還可以通過(guò)該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來(lái)改變 DOM 樹(shù)的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過(guò) $() ...
摘要：之前已經(jīng)知道可以使用和等方法來(lái)修改類屬性，今天來(lái)具體討論下各種屬性的操作。非類屬性有時(shí)候，我們還需要對(duì)一些其他的屬性進(jìn)行操作，例如，，等等。例如單選按鈕的屬性。 之前已經(jīng)知道可以使用 addClass 和 removeClass 等方法來(lái)修改類屬性，今天來(lái)具體討論下各種屬性的操作。 非類屬性 有時(shí)候，我們還需要對(duì)一些其他的屬性進(jìn)行操作，例如 href，title，id 等等。這里，...
摘要：為了更方便對(duì)元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個(gè)比較有用的自定義選擇符選擇符。 為了更方便對(duì) DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...
閱讀 838·2021-09-07 09:58
閱讀 2697·2021-08-31 09:42
閱讀 2869·2019-08-30 14:18
閱讀 3095·2019-08-30 14:08
閱讀 1842·2019-08-30 12:57
閱讀 2766·2019-08-26 13:31
閱讀 1306·2019-08-26 11:58
閱讀 1061·2019-08-23 18:06
