一、種類???
? ? ? ?1、普通選擇器:通過css選擇器選擇元素,也就是根據(jù)各種條件選擇元素。
? ? ? ?2、過濾選擇器:在選擇器選擇后,再根據(jù)需求再次過濾出需要的元素。-====================================
? ? 選擇器分類:基本選擇器、層次選擇器、屬性選擇器
? ? 過濾器分類: 基本過濾選擇器、可見性過濾選擇器、內(nèi)容過濾器、屬性過濾器(即前面的屬性選擇器)、子元素過濾器、表單過濾器、表單對(duì)象過濾器
二、
? ? 1、基本選擇器
? ? ? ? ? ?1)標(biāo)簽選擇器: $("標(biāo)簽名"), 例:$("div") 選擇所有的div標(biāo)簽
? ? ? ? ? ?2)類選擇器: $(".class") .例:$(".a") 選擇所有class為a的標(biāo)簽
? ? ? ? ? ?3)并集選擇器: $(".class,#id,標(biāo)簽名"),可以加入多個(gè)選擇器,只要符合其中一種就被選擇,每個(gè)選擇器之間用“ ?,”隔開,例:$("#a,.b,div") 同時(shí)選擇id為a 和class為b和所有的div元素?。
? ? ? ? ? ?4)全局選擇器:$("*"),選擇所有元素
? ? 2、層次選擇器(通過DOM元素之間的層次關(guān)系來選取元素)
? ? ? ? ? ?1)后代選擇器:$("祖先元素 ?后代元素") ,例:$("#a ?div") 選擇id為a下的所有div元素,注意是后代元素,不僅僅是子元素包括孫子輩,曾孫子輩等等都是后代。
? ? ? ? ? ?2)子選擇器:$("父級(jí)元素>子元素"), 例:$("#a>div")?選擇id為a的元素下的所有div子元素。
? ? ? ? ? ?3)相鄰元素選擇器:$("元素+兄弟元素"),例:$("#a+.b") 選擇id為a的元素緊鄰的class為b的兄弟元素,注意只選擇一個(gè)元素
? ? ? ? ? ?4)同輩元素選擇器:$("元素~兄弟元素"),例?: ?$("#a~.b") 選擇id為a的元素后的所有class為b的兄弟元素,注意這里選擇的是所有兄弟元素。
? ? 3.屬性選擇器(通過標(biāo)簽的屬性來選擇元素)
? ? ? ? ? ?1)屬性選擇器:$("[屬性]"),例:$("[href]") 選擇包含href屬性的所有元素,注意,屬性必須是行內(nèi)屬性,行外添加屬性不識(shí)別。
? ? ? ? ? ?2)屬性值選擇器:$("[屬性=屬性值]"),例:$("[href=’sss']"),選擇href值為sss的元素
? ? ? ? ? ?3)屬性不等值選擇器:$("[屬性!=屬性值]"),例:$("[href!='#']"),選擇href屬性值不等于 # 的所有元素
? ? ? ? ? ?4)屬性起始值選擇器:$("[屬性^=屬性值]"),例:$("[href^=‘http’]"),選擇所有href屬性值以http開頭的元素。
? ? ? ? ? ? 5)屬性結(jié)束值選擇器:$("[屬性$=屬性值]"),例:$("[href$=‘ss’]"),選擇所有href屬性值以 ss結(jié)尾的元素。
? ? ? ? ? ? 6)屬性所有值選擇器:$("[屬性*=屬性值]"),例:$("[href$='ss']"),選擇所有href屬性值包含 ss 值的元素。?
注意:有特殊符號(hào)的值比如方法 b() 比如地址 “href='https://www.baidu.com/” 需要加單引號(hào)例:?
????$("[onclick='bb()]'") 或?$("[) 當(dāng)然不加單引號(hào)也可以使用的值加入單引號(hào)的寫法也不出錯(cuò),所以不熟練的情況下可以所有的屬性值都加單引號(hào)。???
三、過濾器
? ? 過濾器用法 選擇器:過濾器 例 $("li:first") 選擇li標(biāo)簽,然后過濾選擇第一個(gè)元素,最終結(jié)果是選擇第一個(gè)li標(biāo)簽
? ? ?1、基本過濾器
????????1):first 選取第一個(gè)元素,例:$("li:first")
? ? ? ? 2):last 選取最后一個(gè)元素,
? ? ? ? 3):not(選擇器) 選取除去所有與給定選擇器匹配的元素,例:$("li:not(aa)"),選擇所有class不為 aa的li元素。????
? ? ? ? 4):even 選取索引是偶數(shù)的元素,索引從0開始
? ? ? ? 5):odd 選取索引是奇數(shù)的元素,索引從0開始
? ? ? ? 6):eq(index) 選取索引等于index的元素,索引從0開始
? ? ? ? 7):gt(index) 選取索引大于index的元素,索引從0開始
? ? ? ? 8):lt(index) 選取索引小于index的元素,索引從0開始
? ? ? ? 9):header 選取所有的標(biāo)題元素 h1~h6
????????10):focus 選取當(dāng)前獲取焦點(diǎn)的元素
????????11):animated,選取當(dāng)前所有動(dòng)畫元素,只能選擇使用jQuery方法 元素.animate() 設(shè)置的動(dòng)畫元素.
????2、可見性過濾器
? ? ? ? 1):visibe ? 選取所有可見的元素?
? ? ? ? 2):hidden ? ?選取所有隱藏的元素
jQuery選擇器特殊符號(hào)轉(zhuǎn)義
? ? id="a#b" 或 class="b[0]" 如果選擇器選擇元素時(shí)有類似于這兩種有特殊符號(hào)的值那么需要在特殊符號(hào)前加入“\\” ,"#a\\#b" 和 “b\\[0\\]”?
jQuery選擇器中的空格
? ? 選擇器的寫法規(guī)范很嚴(yán)謹(jǐn),空格多一個(gè)或少一個(gè)都會(huì)影響選擇器的效果
var $t_a = $(".test :hidden"); //帶空格的jQuery選擇器,取class為“test”的元素內(nèi)部的隱藏元素
var $t_b = $(".test:hidden"); //不帶空格的jQuery選擇器?,選取隱藏的class為“test”的元素
? ??