jquery選擇器與css選擇器的風(fēng)格類似,但是jquery涉及到的功能更為強(qiáng)大,利用jquery選擇器,可以很快的找出特定的DOM元素,并且對其進(jìn)行操作,無需擔(dān)心瀏覽器是否支持這一選擇器。
站在用戶的角度思考問題,與客戶深入溝通,找到站前網(wǎng)站設(shè)計與站前網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站設(shè)計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋站前地區(qū)。根據(jù)選擇器行為特點(diǎn)劃分,jquery選擇器主要有以下幾種分類:
(1)基本選擇器
(2)層次選擇器
(3)過濾選擇器
(4)表單選擇器
1.基本選擇器
特點(diǎn):最常用、最簡單。
選擇器 | 描述 | 返回 | 示例 |
#id(id選擇器) | 根據(jù)給定的id匹配一個元素 | 單個元素 | $("#test")選擇id為test的元素 |
.class(類選擇器) | 根據(jù)給定的class名稱匹配多個元素 | 集合元素 | $(".test")選擇類名為test的所有元素 |
element(元素選擇器) | 根據(jù)給定的元素名匹配多個元素 | 集合元素 | $("div")選擇所有<div>元素 |
*(全部選擇器) | 匹配所有元素 | 集合元素 | $("*")選擇所有元素 |
sele1,sele2,seleN有效選擇器 | 將每一個選擇器匹配到的元素合并后一起返回 | 集合元素 | $("div,p.test")選擇所有的<div>和擁有class為test的<p>元素合并的集合 |
注:在網(wǎng)頁中,每個id名稱只能使用一次,class名稱可重復(fù)使用。
2.層次選擇器
特點(diǎn):利用DOM元素間的層次關(guān)系。
選擇器 | 描述 | 返回 | 示例 |
$("a b") 后代選擇器 | 選擇a元素中所有的b(后代)元素 | 集合元素 | $("div span")選擇<div>后代元素中的所有的<span>元素 |
$("parent>child") 子選擇器 | 選擇parent元素下的child(子)元素。 | 集合元素 | $("div>span")選擇<div>下的所有<span>子元素 |
$("prev+next")相鄰?fù)呍剡x擇器 | 選擇緊接在prev元素后的next元素 | 單個元素 | $(".test+p")選擇緊接在class為test的元素后的第一個<p>同輩元素 |
$("prev~siblings")一般同輩元素選擇器 | 選擇器prev元素后的所有同輩元素 | 集合元素 | $("#test~div")選擇id為test的元素后面的所有<div>同輩元素 |
注:
(1)子選擇器與后代選擇器的區(qū)別:后代選擇器包括孫元素。
<body>
<div>
<p>
<span></span>
</p>
<span></span>
<span></span>
</div>
</body>
如代碼所示,當(dāng)我們使用$("div span")后代元素選擇器時,可以匹配到<div>中后代為<span>的元素,所以匹配結(jié)果為3個;當(dāng)我們使用$("div>span")子元素選擇器時,可以匹配到<div>中子元素為<span>的元素,所以匹配結(jié)果為2個(因?yàn)閜標(biāo)簽中的span元素不是div的子元素)。
(2)可以用next()方法代替$("prev+next")選擇器;用nextAll()方法代替$("prev~siblings")選擇器。同時,有一個方法可選擇所有的同輩節(jié)點(diǎn)元素,即siblings()方法。
3.過濾選擇器
特點(diǎn):通過過濾規(guī)則選擇所需的DOM元素。按照不同的過濾規(guī)則,過濾選擇器可分為:基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子元素過濾、表單對象屬性過濾。
基本過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
:first | 選擇第一個元素 | 單個元素 | $("div:first")選擇所有<div>元素中第1個<div>元素 |
:last | 選擇最后一個元素 | 單個元素 | 同上反推 |
:not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("div:not(.test)")選擇class不是test的div元素 |
:even | 從一個元素集合中選擇索引是偶數(shù)的所有元素 | 集合元素 | $("div:even")選擇索引是偶數(shù)的div元素 |
:odd | 從一個元素集合中選擇索引是奇數(shù)的所有元素 | 集合元素 | 同上原理 |
:eq(index) | 從一個元素集合中選擇索引等于index的元素 | 單個元素 | $("div:eq(1)")選擇索引等于1的<div>元素 |
:gt(index) | 從一個元素集合中選擇索引大于index的元素 | 集合元素 | $("div:gt(1)")選擇索引大于1的<div>元素 |
:lt(index) | 從一個元素集合中選擇索引小于index的元素 | 集合元素 | 同上反推 |
:header | 選擇所有的標(biāo)題元素 | 集合元素 | $(":header")選擇網(wǎng)頁中所有的<h2>,<h3>...元素 |
:animated | 選擇當(dāng)前正在執(zhí)行動畫的所有元素 | 集合元素 | $("div:animated")選擇正在執(zhí)行動畫的<div>元素 |
:focus | 選擇當(dāng)前獲取焦點(diǎn)的元素 | 集合元素 | $("focus")選擇當(dāng)前獲取焦點(diǎn)的元素 |
內(nèi)容過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
:contains(text) | 選取含有文本內(nèi)容為"text"的元素 | 集合元素 | $("div:contains('test')")選擇含有文本test的<div>元素 |
:empty | 選取不包含子元素或者文本的元素(即空元素) | 集合元素 | $("div:empty")選取不包含子元素的<div>元素 |
:has(selector) | 選取含有選擇器所匹配的元素的元素 | 集合元素 | $("div:has(p)")選取含有<p>元素的<div>元素 |
:parent | 選擇擁有子元素(包括文本)的元素 | 集合元素 | $("div:parent")選擇含有子元素的<div>元素 |
內(nèi)容過濾選擇器的過濾規(guī)則主要以標(biāo)簽所包含的子元素來進(jìn)行篩選過濾,其中子元素也包括了文本信息。
可見性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
:hidden | 選擇所有不可見的元素 | 集合元素 | $(":hidden") |
:visible | 選擇所有可見的元素 | 集合元素 | $("visible") |
隱藏元素包括:<input type="hidden"/>、<div >、<div >,如果需要確定元素類型,在前方加上元素名即可。例如,$("input:hidden")。
屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
[attribute] | 選擇擁有此屬性的元素 | 集合元素 | $("div[id]")選擇擁有屬性id的元素 |
[attribute=value] | 選擇屬性的值為value的元素 | 集合元素 | $("div[class=test]")選擇屬性class為“test”的<div>元素 |
[attribute!=value] | 選擇屬性的值不等于value的元素 | 集合元素 | 同上反推 |
[attribute^=value] | 選擇屬性的值以value開始的元素 | 集合元素 | $("div[class=te]")將選擇到例如class為"test"的<div>元素 |
[attribute$=value] | 選擇屬性的值以value結(jié)束的元素 | 集合元素 | 同上反推 |
[attribute*=value] | 選擇屬性的值含有value的元素 | 集合元素 | $("div[class=es]")將選擇到例如class為"test"的<div>元素 |
[attribute|=value] | 選擇屬性等于給定字符串或以該字符串為前綴 | 集合元素 | $("div[class|='te']")選擇屬性title等于te或者以te為前綴的元素 |
[attribute~=value] | 選擇屬性用空格分隔的值中包含一個給定值的元素 | 集合元素 | $("div[class~='te']")將選擇到例如class為"te abc"的<div>元素 |
[attribute1]...[attributeN] | 多個屬性選擇器合并成一個復(fù)合屬性選擇器 | 集合元素 | $("div[id][title$='test']")選擇同時擁有id,并且title以test結(jié)束的<div>元素 |
屬性過濾選擇器主要是通過元素的屬性來獲取相應(yīng)的元素。
子元素過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
:nth-child(index/odd/even/equation) | 選擇每個父元素下的第index個子元素或者奇偶元素(index)從1開始計算 | 集合元素 | $("div.test :nth-child(2)")選擇class為"test"的<div>父元素下的第二個子元素 |
:first-child | 選擇每個父元素的第一個子元素 | 集合元素 | $("ul:first-child")將選擇每個<ul>元素中第一個<li>元素 |
:last-child | 選擇每個父元素的最后一個子元素 | 集合元素 | 同上反推 |
:only-child | 如果某個元素是它父元素中唯一的子元素,那將會被匹配 | 集合元素 | $("ul li:only-child")在<ul>中選擇唯一子元素<li> |
需要注意的是,“每個父元素”與“父元素”的區(qū)別,前者是多個元素的集合,后者是單個元素。:nth-child(3n)可以選擇到每個父元素下索引值是3的倍數(shù)的元素。
表單對象屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
:enabled | 選擇所有可用元素 | 集合元素 | $("#form :enabled")選擇id為form的表單內(nèi)的所有可用元素 |
:disabled | 選擇所有不可用元素 | 集合元素 | 同上反推 |
:checked | 選擇所有被選中的元素 | 集合元素 | $("input:checked")選擇所有被選中的<input>元素 |
:selected | 選擇所有被選中的選項(xiàng)元素 | 集合元素 | $("select option:selected") |
表單對象屬性過濾選擇器主要是針對表單元素進(jìn)行過濾。
4.表單選擇器
選擇器 | 描述 | 返回 | 示例 |
:input | 選擇所有的<input>、<textarea>、<select>、<button>元素 | 集合元素 | $(":input") |
:text | 選擇所有的單行文本框 | 集合元素 | $(":text") |
:password | 選擇所有的密碼框 | 集合元素 | $(":password") |
:radio | 選擇所有的單選框 | 集合元素 | $(":radio") |
:checkbox | 選擇所有的復(fù)選框 | 集合元素 | $(":checkbox") |
:submit | 選擇所有的提交按鈕 | 集合元素 | $(":submit") |
:p_w_picpath | 選擇所有的圖像按鈕 | 集合元素 | $(":p_w_picpath") |
:reset | 選擇所有的重置按鈕 | 集合元素 | $("reset") |
:button | 選擇所有按鈕 | 集合元素 | $("button") |
:file | 選擇所有的上傳域 | 集合元素 | $("file") |
表單選擇器能使我們能夠方便的獲取到表單的某個或某類型的元素。
本文參考:
《鋒利的jQuery(第2版)》,人民郵電出版社,單東林 張曉菲 魏然
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章名稱:(JQuery學(xué)習(xí)筆記)我對jQuery選擇器的總結(jié)-創(chuàng)新互聯(lián)
分享鏈接:http://aaarwkj.com/article28/dpppcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、Google、商城網(wǎng)站、網(wǎng)站維護(hù)、用戶體驗(yàn)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容