資訊專欄INFORMATION COLUMN
摘要：為了更方便對(duì)元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個(gè)比較有用的自定義選擇符選擇符。
為了更方便對(duì) DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。
CSS 選擇符jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下：
為了給 id 為 myUl 的 ul 元素下直接 li 元素添加樣式，我們可以這樣寫(xiě)：
$(document).ready(function() {
$("#myUl > li").addClass("xxx");
});
當(dāng)在 jQuery 中使用 $(document).ready(function() {}) 時(shí)，位于其中的所有代碼都會(huì)在 DOM 加載后立即執(zhí)行。我們也可以簡(jiǎn)寫(xiě)為：$(function() {})。
對(duì)于 CSS 選擇符的內(nèi)容，可以參考這個(gè)手冊(cè) - 《CSS 選擇器參考手冊(cè)》
屬性選擇符屬性選擇符是 jQuery 中很有用的一類(lèi)選擇符，即通過(guò) DOM 元素的屬性來(lái)選擇特定的元素。例如 a 標(biāo)簽的 href 屬性。
Segmentfault Baidu
對(duì)于上例兩個(gè) a 標(biāo)簽，我們希望選擇 segmentfault 進(jìn)行操作，而不是 baidu，那么我們可以通過(guò)屬性選擇符來(lái)操作：
$("a[)
為了簡(jiǎn)化操作，屬性選擇符還從正則里面借鑒了一些語(yǔ)法過(guò)來(lái)：
^ 表示值在字符串的開(kāi)始
$ 表示值在字符串的結(jié)尾
* 表示要匹配的值可以出現(xiàn)在字符串中的任意位置
! 表示對(duì)值取反
那么上述的屬性選擇符的操作我們就可以簡(jiǎn)化為：
$("a[href*="segmentfault"]")
同樣可以取得鏈接為 segmentfault 的 a 標(biāo)簽。
自定義選擇符除了上述的選擇符外，jQuery 還添加了獨(dú)有的自定義選擇符，在介紹自定義選擇符前，需要說(shuō)明一點(diǎn)：
與原生的 DOM 選擇符相比，自定義選擇符在性能方面是表現(xiàn)較差的，因此如果能使用原生的方法，盡量不要頻繁使用自定義選擇符，從而保證性能。
自定義選擇符的使用有點(diǎn)像 CSS 中的偽類(lèi)，即先使用一個(gè)冒號(hào) （:），然后再寫(xiě)詳細(xì)的內(nèi)容。同樣舉例說(shuō)明：
此時(shí)，我們希望取得內(nèi)容為 A 的 li 元素，我們可以這樣操作：
$("li:eq(0)")
由于 Javascript 的數(shù)組是從0開(kāi)始計(jì)數(shù)，所以第一個(gè)元素用0取。
介紹個(gè)比較有用的自定義選擇符 - contain 選擇符。
依然是上例，現(xiàn)在我們希望取得內(nèi)容中含有 C 的元素，可以這樣寫(xiě)：
$("li:contains(C)")
參考
http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78148.html
摘要：最強(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í)，點(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ò) $() ...
摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。其他類(lèi)似的操作事件都可以通過(guò)這個(gè)方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來(lái)說(shuō)明。 增添樣式 基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見(jiàn)的情形，舉例說(shuō)明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...
摘要：前一篇介紹可以通過(guò)添加全局函數(shù)來(lái)開(kāi)發(fā)插件，實(shí)際上全局函數(shù)就是對(duì)對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì)對(duì)象進(jìn)行擴(kuò)展，我們可以使用別名。添加實(shí)例方法此時(shí)頁(yè)面內(nèi)只有一個(gè)元素，添加新增的實(shí)例方法進(jìn)入頁(yè)面后實(shí)例方法添加成功。 前一篇介紹可以通過(guò)添加全局函數(shù)來(lái)開(kāi)發(fā) jQuery 插件，實(shí)際上全局函數(shù)就是對(duì) jQuery 對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì) jQuery.prototype 對(duì)象進(jìn)行擴(kuò)展...
摘要：創(chuàng)建一個(gè)有背景色的添加方法如下當(dāng)頁(yè)面載入后，會(huì)逐漸消失，動(dòng)畫(huà)效果如同直接使用方法。動(dòng)畫(huà)并發(fā)效果當(dāng)對(duì)多個(gè)元素應(yīng)用動(dòng)畫(huà)效果時(shí)，這些效果是同時(shí)發(fā)生的，即并發(fā)的。 除了使用 jQuery 內(nèi)置的 hide,show,toggle 等方法來(lái)展現(xiàn)效果，還可以使用更為強(qiáng)大的 animate 方法來(lái)展現(xiàn)動(dòng)畫(huà)效果。 創(chuàng)建一個(gè)有背景色的 div： div { width: 100px; hei...
閱讀 1884·2021-10-12 10:12
閱讀 2631·2021-09-29 09:42
閱讀 2886·2021-09-03 10:28
閱讀 2315·2019-08-30 15:54
閱讀 1219·2019-08-30 15:53
閱讀 1468·2019-08-30 11:26
閱讀 3416·2019-08-30 11:02
閱讀 2201·2019-08-30 11:02
