資訊專(zhuān)欄INFORMATION COLUMN
摘要：選擇器選擇器一基本選擇器語(yǔ)法說(shuō)明選擇文檔中的所有元素元素選擇器，選擇所有的元素，返回?cái)?shù)組選擇器，返回單個(gè)元素選擇器，返回?cái)?shù)組并列選擇器，返回所有的元素和元素二層次選擇器語(yǔ)法說(shuō)明后代選擇器，選擇所有元素下面的所有子元素，包含非直接
title: jQuery 選擇器
date: 2017-01-07 20:32:26
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("*") | 選擇文檔中的所有元素 |
| $("div") | 元素選擇器，選擇所有的div元素，返回?cái)?shù)組 |
| $("#id") | Id選擇器，返回單個(gè)元素 |
| $(".class") | class選擇器，返回?cái)?shù)組 |
| $("p , div") | 并列選擇器，返回所有的p元素和div元素 |
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("A B") | 后代選擇器，選擇所有A元素下面的所有B子元素，包含非直接子節(jié)點(diǎn) |
| $("A > B") | 子元素選擇器，選擇A下面的直接B子元素，不包含非直接子節(jié)點(diǎn) |
| $("A + B") | 緊鄰兄弟元素選擇器，選擇A元素后面緊鄰的B元素，如果沒(méi)有不選中，等同于next()方法 |
| $("A ~ B") | 兄弟元素選擇器，選擇A后面所有的B元素，等同于nextAll()方法 |
1、基本過(guò)濾選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("span : first") | 選取第一個(gè)元素 |
| $("span : last") | 選取第二個(gè)元素 |
| $("span : not(.wrap)") | 取非元素 |
| $("tr : even") | 選取偶數(shù)行（索引從0開(kāi)始） |
| $("tr : odd") | 選取奇數(shù)行（索引從0開(kāi)始） |
| $("tr : eq(2)") | 選取指定索引的元素（索引從0開(kāi)始） |
| $("tr : gt(2)") | 選取大于索引號(hào)的元素（索引從0開(kāi)始） |
| $("ul li : lt(2)") | 選取小于索引號(hào)的元素（索引從0開(kāi)始） |
| $(" : header") | 選取所有的標(biāo)題元素 |
| $(" : animated") | 選取所有的動(dòng)畫(huà)元素 |
2、內(nèi)容過(guò)濾選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("span : contains("hello")") | 選取包含具體文本的元素 |
| $("span : empty”) | 選取不包含子元素或文本為空的元素 |
| $("ol li : parent”) | 選取包含子元素或文本不為空的元素 |
| $("div : has(span)”) | 選取子元素含有指定元素的元素，不是直系子元素也會(huì)生效 |
3、可見(jiàn)性過(guò)濾選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("div : hidden") | 僅選取display:none或input type="hidden"的元素，不選取visibility: hidden或opacity:0的元素，也就是說(shuō):hidden只匹配那些“隱藏的”并且不占空間的元素 |
| $("div : visible") | 選取可見(jiàn)的元素 |
4、屬性過(guò)濾選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $("[href]") | 選取所有帶有 href 屬性的元素 |
| $("[href = "#"]") | 選取所有 href 屬性的值等于 "#" 的元素 |
| $("[href != "#"]") | 選取所有 href 屬性的值不等于 "#" 的元素 |
| $("[herf ^= "http"]") | 選取所有 href 屬性的值以 "http" 開(kāi)頭的元素 |
| $("[herf $= ".jsp"]") | 選取所有 href 屬性的值以 "jsp" 結(jié)尾的元素 |
| $("[herf *= "www"]") | 選取所有 href 屬性的值包含 "www" 的元素 |
1、基本表單選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $(":input") | 選取所有的 input 元素 |
| $(":text") | 選取所有type="text"的 input 元素 |
| $(":password") | 選取所有type="password"的 input 元素 |
| $(":radio") | 選取所有type="radio"的 input 元素 |
| $(":checkbox") | 選取所有type="checkbox"的 input 元素 |
| $(":submit") | 選取所有type="submit"的 input 元素和button的元素 |
| $(":reset") | 選取所有type="reset"的 input 元素和button的元素 |
| $(":button") | 選取所有type="button"的 input 元素和所有標(biāo)簽為button的元素 |
| $(":image") | 選取所有type="image"的 input 元素 |
| $(":file") | 選取所有type="file"的 input 元素 |
2、表單元素過(guò)濾選擇器
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| $(":enabled") | 選擇所有啟用的 input 和 button 元素 |
| $(":disabled") | 選擇所有禁用（即設(shè)置了disabled="disabled"）的 input 和 button 元素 |
| $(":selected") | 選擇所有被選中下拉列表 選項(xiàng) |
| $(":checked") | 選擇所有被選中的復(fù)選框 或單選 按鈕元素 |
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
語(yǔ)法： jQuery選擇器.css("css屬性", "css屬性值");
$("div").css("background-color","red");
六、jQuery查找父、子、兄弟節(jié)點(diǎn)的方法
| 語(yǔ)法 | 說(shuō)明 |
|---|---|
| jQuery.parent(expr) | 找父節(jié)點(diǎn)，可以傳入expr進(jìn)行過(guò)濾，比如$("span").parent()或者$("span").parent(".class") |
| jQuery.parents(expr) | 查找所有祖先元素，從父元素開(kāi)始查找 |
| jQuery.closest(expr) | 查找第一個(gè)匹配的祖先元素，從當(dāng)前元素開(kāi)始查找 |
| jQuery.children(expr) | 返回所有子節(jié)點(diǎn)，這個(gè)方法只會(huì)返回直接的孩子節(jié)點(diǎn)，不會(huì)返回所有的子孫節(jié)點(diǎn) |
| jQuery.contents() | 返回下面的所有內(nèi)容，包括節(jié)點(diǎn)和文本。 |
| jQuery.prev() | 返回上一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn) |
| jQuery.prevAll() | 返回所有之前的兄弟節(jié)點(diǎn) |
| jQuery.next() | 返回下一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn) |
| jQuery.nextAll() | 返回所有之后的兄弟節(jié)點(diǎn) |
| jQuery.siblings() | 返回兄弟姐妹節(jié)點(diǎn)，不分前后 |
| jQuery.find(expr) | 不會(huì)有初始集合中的內(nèi)容，比如$("p"),find("span"),是從子元素中找，等同于$("p span") |
| jQuery.filter(expr) | 會(huì)有初始集合中的內(nèi)容 |
jQuery選擇器大全
jQuery選擇器總結(jié)
w3school-jQuery 參考手冊(cè) - 選擇器
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84758.html
摘要：選擇器，若未作特別說(shuō)明，獲取的都是元素集合。過(guò)濾器名語(yǔ)法說(shuō)明選取所有不可見(jiàn)元素選取所有可見(jiàn)元素注意過(guò)濾器一般是包含的內(nèi)容為樣式為表單類(lèi)型為和的元素。四子元素過(guò)濾器子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。 轉(zhuǎn)自個(gè)人博客本來(lái)是單獨(dú)整理了一個(gè)CSS選擇器的，但是在jQuery中基本都有對(duì)應(yīng)的，所以就不發(fā)了。 jQuery選擇器，若未作特別說(shuō)明，獲取的都是元素集合。...
摘要：代表的上下文對(duì)象是一個(gè)的上下文對(duì)象，可以調(diào)用的方法和屬性值特殊選擇器點(diǎn)擊測(cè)試通過(guò)原生處理點(diǎn)擊測(cè)試通過(guò)原生處理直接通過(guò)的方法改變顏色通過(guò)包裝成對(duì)象改變顏色 DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象 如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對(duì)象，jQuery方法會(huì)把這個(gè)DOM對(duì)象給包裝成一個(gè)新的jQuery對(duì)象 元素一 元素二 元素三 var ...
摘要：基本概念學(xué)習(xí)目標(biāo)學(xué)會(huì)如何使用，掌握的常用，能夠使用實(shí)現(xiàn)常見(jiàn)的效果。想要實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，也很麻煩代碼冗余。實(shí)現(xiàn)動(dòng)畫(huà)非常簡(jiǎn)單，而且功能更加的強(qiáng)大。注意選擇器返回的是對(duì)象。 jQuery基本概念 學(xué)習(xí)目標(biāo)：學(xué)會(huì)如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實(shí)現(xiàn)常見(jiàn)的效果。 為什么要學(xué)習(xí)jQuery？ 【01-讓div顯示與設(shè)置內(nèi)容.html】 使用javasc...
摘要：基本概念學(xué)習(xí)目標(biāo)學(xué)會(huì)如何使用，掌握的常用，能夠使用實(shí)現(xiàn)常見(jiàn)的效果。想要實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，也很麻煩代碼冗余。實(shí)現(xiàn)動(dòng)畫(huà)非常簡(jiǎn)單，而且功能更加的強(qiáng)大。注意選擇器返回的是對(duì)象。 jQuery基本概念 學(xué)習(xí)目標(biāo)：學(xué)會(huì)如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實(shí)現(xiàn)常見(jiàn)的效果。 為什么要學(xué)習(xí)jQuery？ 【01-讓div顯示與設(shè)置內(nèi)容.html】 使用javasc...
摘要：基本概念學(xué)習(xí)目標(biāo)學(xué)會(huì)如何使用，掌握的常用，能夠使用實(shí)現(xiàn)常見(jiàn)的效果。想要實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果，也很麻煩代碼冗余。實(shí)現(xiàn)動(dòng)畫(huà)非常簡(jiǎn)單，而且功能更加的強(qiáng)大。注意選擇器返回的是對(duì)象。 jQuery基本概念 學(xué)習(xí)目標(biāo)：學(xué)會(huì)如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實(shí)現(xiàn)常見(jiàn)的效果。 為什么要學(xué)習(xí)jQuery？ 【01-讓div顯示與設(shè)置內(nèi)容.html】 使用javasc...
閱讀 2234·2023-04-25 17:57
閱讀 1345·2021-11-24 09:39
閱讀 2556·2019-08-29 16:39
閱讀 3382·2019-08-29 13:44
閱讀 3234·2019-08-29 13:14
閱讀 2403·2019-08-26 11:36
閱讀 3909·2019-08-26 11:00
閱讀 988·2019-08-26 10:14
