1.基本選擇器(3種):
$("標(biāo)簽名"),如$("p")是選取了所有的p標(biāo)簽節(jié)點(diǎn)
$("#id名"),如$("#test")是選取了id為test的標(biāo)簽節(jié)點(diǎn)
$(".class名"),如$(".test")是選取了所有class為test的標(biāo)簽節(jié)點(diǎn)
上面的$("標(biāo)簽名")和$(".class名")返回的都是所有滿足的節(jié)點(diǎn),至于進(jìn)一步篩選可以添加一些函數(shù),如eq,gt,lt等等.
*：匹配所有元素
2.組選擇器:
下面還是現(xiàn)做一個(gè)約定:把"標(biāo)簽名或#id名或.class名"記作mix,則mix表示一個(gè)標(biāo)簽名,或一個(gè)#id或一個(gè).class.
$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
3.層次選擇器
3.1后代選擇器:
$("mix mix"),當(dāng)然可以是多個(gè)嵌套,但后代選擇器可以是深層子代,所以$("mix mix mix ...")這種寫法作用不大.例子:$("div .test"):在div標(biāo)簽內(nèi)的所有具有test的class的后代元素(就是被div嵌套的class屬性為test的標(biāo)簽)
3.2.子選擇器:
$("mix>mix"),這個(gè)放在后代選擇器后面是為了和它做對(duì)比.子選擇器只能選擇第一代子代.不處理深層嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>對(duì)這里的p段落標(biāo)簽有效.但對(duì)
<div><p><p class="test"></p></p></div>對(duì)這里的p段落標(biāo)簽無效,這里要用
$("div .test)
3.3.臨近選擇器:
$("mix+mix"),選取下一個(gè)兄弟節(jié)點(diǎn).如:$("div +#test"),id為test的的節(jié)點(diǎn)必須是div的下一個(gè)兄弟節(jié)點(diǎn).
<div></div><p id="test"></p>在$("div + #test")中能取到p段落節(jié)點(diǎn)
<div></div><p></p><p id="test"></p>則不能取到
3.4~
匹配 prev 元素之后的所有 siblings 元素
4.過濾選擇器（也叫簡單選擇器）
4.1 :first 匹配找到的第一個(gè)元素
4.2 :last 匹配找到的最后一個(gè)元素
4.3 :not
去除所有與給定選擇器匹配的元素
在jQuery 1.3中，已經(jīng)支持復(fù)雜選擇器了（例如:not(div a) 和 :not(div,a)）
$("input:not(:checked)")
4.4 :even
匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
4.5 :odd
匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
4.6 :eq(index)
匹配一個(gè)給定索引值的元素
4.7 :gt(index)
匹配所有大于給定索引值的元素
4.8 :lt(index)
匹配所有小于給定索引值的元素
4.9 :header
匹配如 h1, h2, h3之類的標(biāo)題元素 $(":header").css("background", "#EEE");
4.10 :animated
匹配所有正在執(zhí)行動(dòng)畫效果的元素
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
5.內(nèi)容過濾選擇器
5.1 :contains(text) 匹配包含給定文本的元素
5.2 :empty 匹配所有不包含子元素或者文本的空元素
5.3 :has(selector) 匹配含有選擇器所匹配的元素的元素
5.4 :parent 匹配含有子元素或者文本的元素
6.可見性過濾選擇器
6.1 :hidden
匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會(huì)被匹配到
6.2 :visible
匹配所有的可見元素
7.屬性過濾選擇器
7.1 [attribute]
匹配包含給定屬性的元素。注意，在jQuery 1.3中，前導(dǎo)的@符號(hào)已經(jīng)被廢除！如果想要兼容最新版本，只需要簡單去掉@符號(hào)即可。
7.2 [attribute=value]
匹配給定的屬性是某個(gè)特定值的元素
7.3 [attribute!=value]
匹配所有含有指定的屬性，但屬性不等于特定值的元素。
在jQuery 1.3之前是這樣的："匹配那些沒有指定的屬性的元素，或者指定的屬性不等于特定值的元素。"，這等價(jià)于:not([attr=value])
7.4 [attribute^=value]
匹配給定的屬性是以某些值開始的元素
7.5 [attribute$=value]
匹配給定的屬性是以某些值結(jié)尾的元素
7.6 [attribute*=value]
匹配給定的屬性是以包含某些值的元素
7.7 [selector1][selector2][selectorN]
復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用。
8.子元素過濾選擇器
8.1 :nth-child(index/even/odd/equation)
匹配其父元素下的第N個(gè)子或奇偶元素
8.2 :first-child
匹配第一個(gè)子元素
8.3 :last-child
匹配最后一個(gè)子元素
8.4 :only-child
如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配
9.表單對(duì)象過濾選擇器
案例研究：
實(shí)現(xiàn)如下效果：
關(guān)鍵代碼：
1.首先第5條以后的品牌隱藏：
隱藏：
var $category = $('ul li:gt(5):not(:last)'); //索引大于5的li集合元素，并且不包含最后一個(gè)
$category.hide();
2.顯示
var $toggleBtn = $('div.showmore > a'); // 獲取“顯示全部品牌”按鈕
$toggleBtn.click(function(){
$category.show(); // 顯示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精簡顯示品牌"); //改變背景圖片（上、下）和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
.addClass("promoted"); //添加高亮樣式
return false; //超鏈接不跳轉(zhuǎn)
})
3.切換
var $category = $('ul li:gt(5):not(:last)'); //獲得索引值大于5的品牌集合對(duì)象(除最后一條)
$category.hide(); // 隱藏上面獲取到的jQuery對(duì)象。
var $toggleBtn = $('div.showmore > a'); // 獲取“顯示全部品牌”按鈕
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隱藏$category
$('.showmore a span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("顯示全部品牌"); //改變背景圖片和文本
$('ul li').removeClass("promoted"); // 去掉高亮樣式
}else{
$category.show(); // 顯示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精簡顯示品牌"); //改變背景圖片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
.addClass("promoted"); //添加高亮樣式
}
return false; //超鏈接不跳轉(zhuǎn)
})
聯(lián)系客服
