溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JQuery中的選擇器有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JQuery中的選擇器有哪些”吧！
css選擇器
| 選擇器 | 語法 | 描述 | 示例 |
| 標簽選擇器 | E{css規則} | 以文檔標簽作為選擇符 | div{width：100px;} |
| ID選擇符 | #id {css規則} | 以文檔元素的唯一標識id號作為選擇符 | #box{width:100px;height:100px;} |
| 類選擇符 | E.className{css規則} | 以文檔元素的類名作為選擇符 | div.box{color:#fff;} .box{background:red;} |
| 群組選擇器 | E1，E2，E3{css規則} | 多個元素應用同樣的樣式 | div,p,h1{padding:0;margin:0} |
| 后代選擇器 | E F{css規則} | 以元素E的后代元素F作為選擇符 | .box a{color:green;} |
| 通配符選擇器 | *{css規則} | 以文檔的所有元素作為選擇符 | *{font-size:14px;} |
| 偽類選擇器 | 請見鏈接： | ||
jquery選擇器
jquery中的選擇器完全繼承了css中的風格，利用jquery選擇器，可以迅速便捷的找到文檔中的DOM元素，然后給他們添加相應的行為。下面總結一下jquery中的選擇器。
1. 基本選擇器
基本選擇器是jquery中常用的選擇器，也是最簡單的選擇器，他通過元素和標簽來查找DOM中的元素，注意：在網頁中，id名稱只能使用一次，class允許多次使用。
| 選擇器 | 描述 | 返回 | 示例 |
| #id | 根據匹配給定的id匹配一個元素 | 單個元素 | $("#test")選取id為test的元素 |
| .class | 根據給定的類名匹配元素 | 集合元素 | $(".test")選取class為test的元素 |
| element | 根據給定的元素名稱 | 集合元素 | $("p")選取所有的p元素 |
| * | 匹配所有的元素 | 集合元素 | $("*")選取所有的元素 |
| Selector1，Selector2，Selector3... | 將每一個選擇器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,.p.box")選取所有div，所有span，和class名為box的p元素 |
2. 層次選擇器
如果想通過DOM元素之間的層次關系來獲取特定的元素，譬如：后臺元素，兄弟元素，子元素，那么層次選擇器是一個非常好的選擇，下面就總結一下層次選擇器。
| 選擇器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 選取ancestor元素里的所有descendant元素 | 集合元素 | $("div span")選取div里的所有span元素 |
| $("parent>child") | 選取parent下的所有子元素child | 集合元素 | $("div>span")選取div下的所有名為span的子元素 |
| $(" prev+next ") | 選取緊接在prev元素后面的next元素 | 集合元素 | $(".one+div")選取class名為one的下一個div元素 |
| $("prev~siblings") | 選取元素prev元素之后的所有兄弟siblings元素 | 集合元素 | $(".one~p")選取class名為one后面的所有子元素為siblings的元素 |
注意：
$("prev+next")可以用$("prev").next("next元素")替換。
$("prev~siblings")可以用$("prev").nextAll("next元素")替換
例子：
$(".box+div") 等價 $(".box").next("div");
$(".box~div") 等價 $(".box").nextAll("div");
3. 過濾選擇器
過濾選擇器是根據特定的規則來篩選特定的DOM元素，過濾規則與css中的偽類選擇器語法相同。過濾選擇器以“：”開頭，過濾選擇器根據過濾煩人內容不同，可以分為基本過濾選擇器，屬性過濾，內容過濾，表單過濾子元素過濾，可見性過濾
（1） 基本過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| ：first | 選取第一個元素 | 單個元素 | $("div:first")選取所有div的第一個div元素 |
| ：last | 選取最后一個元素 | 單個元素 | $("div:last")選取所有div第最后一個div元素 |
| ：not（selector） | 選取除了selector元素之外的元素 | 集合元素 | $("div:not('.box')")選取除了class名為box元素的其他div元素 |
| ：even | 選取所有索引號為偶數的元素，索引號從0開始 | 集合元素 | $("div:even")選取所有索引號為偶數的div元素 |
| ：odd | 選取所有索引號為奇數的元素，索引號從0開始 | 集合元素 | $("div:odd")選取所有索引號為奇數的 div元素 |
| ：eq（index） | 選取索引號為index的元素 | 單個元素 | $("div:eq(0)")選取索引號為0的div元素，也就是第一個div元素 |
| :gt(index) | 選過索引號大于index的元素 | 集合元素 | $("div:gt(2)")選取索引號大于2的div元素 |
| ：lt（index） | 選取索引號小于index的 元素 | 集合元素 | $("div:lt(3)")選取索引號 小于3的 div元素 |
| ：header | 選取網頁中所有的標題元素（h1，h2，h3，h4，h5，h6） | 集合元素 | $(":header")選取網頁中所有 的標題元素 H1，h2... |
| :animated | 選取當前正在執行動畫的元素 | 集合元素 | $("div:animated")選取當前正在執行動畫的 div |
（2） 內容選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| ：conntains("text") | 篩選文本中包含"text"的元素 | 集合元素 | $("p:contains('你好')")選取文本包含“你好”的元素 |
| ：empty | 選取不包含子元素或文本的空元素 | 集合元素 | $("div:empty")選取不包含子元素或文本的div元素 |
| ：has(selector) | 選取含有selector元素的元素 | 集合元素 | $("div:has('p')")選取含有p元素的div元素 |
| ：parent | 選擇含有子元素或文本的元素 | 集合元素 | $("div:parent")選取含有子元素或文本的div元素 |
（3） 選擇可見性選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| ：hidden | 選取所有不可見的元素 | 集合元素 | $(":hidden")選取所有不可見的元素，包括display：none；type="hidden";visiblity:hidden |
| :visible | 選取所有可見元素 | 集合元素 | $(":visible")選取所有可見元素 |
（4） 屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| [attribute] | 選擇擁有此屬性的元素 | 集合元素 | $("div[id]")選取擁有id屬性的 div元素 |
| [attribute=value] | 選擇屬性值為value的元素 | 集合元素 | $("div[title='box']")選取title為box的 div元素 |
| [attribute！=value] | 選擇屬性值不等于value的元素 | 集合元素 | $("div[title!='box']")選取title不為box的 div元素，其中沒有title屬性的元素也會被選擇 |
| [attribut^=value] | 選擇屬性值以value開頭的元素 | 集合元素 | $("div[title^=''b"])選取title以b開頭的 div元素 |
| [attribut$=value] | 選擇屬性值以value結束的元素 | 集合元素 | $("div[title$=''b"])選取title以b結尾的 div元素 |
| [attribut*=value] | 選擇屬性值含有value的元素 | 集合元素 | $("div[title*=''b"])選取title屬性值含有b的 div元素 |
| [selector1] [selector2] [selectorN] | 選擇含有多個屬性的選擇器 | 集合選擇器 | $("div[id][class='box']")選取含有id屬性和class屬性，并且class="box"的div元素 |
（5）子元素過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| ：nth-child(index/even/odd)注意：index從1開始 | 選取每個父元素下的第index元素或奇偶元素 | 集合元素 | $("ul li:nth-child(3)")選擇ul下的第三個li |
| ：first-child | 選取父元素下的第一個子元素 | 集合元素 | $("ul li: first-child ")選擇ul下的第一個li |
| ：last-child | 選取父元素下的最后一個子元素 | 集合元素 | $("ul li:last-child ")選擇ul下的最后一個li |
| ：only-child | 如果某個元素是它父元素中惟一的子元素，那么將會被匹配。如果父元素中含有其它元素，剛不會匹配 | 集合元素 | $("ul li:only-child ")在ul中選擇是唯一元素的li元素 |
（6） 表單對象屬性過濾選擇器
此選擇器主要是選取表單元素進行過濾
| 選擇器 | 描述 | 返回 | 示例 |
| ：enabled | 選取所有可用元素 | 集合元素 | $("#form1 :enabled")選取form1下所有可用的元素 |
| ：disabled | 選取所有不可用元素 | 集合元素 | $("#form2:disabled")選取id為form2表單內的所有不可用的元素 |
| ：checked | 選中所有被選中的元素（單選，復選） | 集合元素 | $("#form3:checked")選中id為form3表單下所有被選中的元素 |
| ：selected | 選取所有被選中 的選項元素（下拉列表） | 集合元素 | $("select:selected")選取所有被選中的選項元素 |
4. 表單選擇器
jquery中專門加入了表單選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| ：input | 選取所有的<input><textarea><select><button>元素 | 集合元素 | $(":input")選取所有的<input><textarea><select><button>元素 |
| ：text | 選取所有的當行文本框 | 集合元素 | $(":text")選取所有的單行文本框 |
| :password | 選取所有的密碼框 | 集合元素 | $(":password")選取所有的密碼框 |
| ：radio | 選取所有的單選框 | 集合元素 | $(":radio")選取所有的單選框 |
| ：checkbox | 選取所有的多選框 | 集合元素 | $(":checkbox")選取所有的多選框 |
| ：submit | 選取所有的提交按鈕 | 集合元素 | $(":submit")選取所有的提交按鈕 |
| ：reset | 選取所有的重置按鈕 | 集合元素 | $(":reset")選取所有的重置按鈕 |
| ：image | 選取所有的圖像按鈕 | 集合元素 | $(":image")選取所有的圖像按鈕 |
| ：button | 選取所有的按鈕 | 集合元素 | $("button")選取所有的按鈕 |
| ：file | 選取所有的上傳域 | 集合元素 | $(":file")選取所有的上傳域 |
| ：hidden | 選取所有的不可見元素 | 集合元素 | $(":hidden")選取所有不可見元素 |
感謝各位的閱讀，以上就是“JQuery中的選擇器有哪些”的內容了，經過本文的學習后，相信大家對JQuery中的選擇器有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
