★簡潔的寫法：

　　$()函數在很多javaScript庫中都被當成一個選擇器函數來使用，在jQuery中也是如此。$(“#id”)等同於document.getElementById(“id”)。

●完善的處理機制：

　　使用jQuery選擇器不僅比使用傳統的getElementById()和getElementsByTagName()函數簡潔的多，還能避免某些錯誤，適用性更好。

分類

詳細類型

通過CSS選擇器選取元素

基本選擇器

層次選擇器

屬性選擇器

通過過濾選擇器選擇元素

基本過濾選擇器

可見性過濾選擇器

●基本選擇器：包括標簽選擇器、類選擇器、ID選擇器、並集選擇器和全局選擇器

●標簽選擇器根據給定的標簽名匹配元素

　　$(document).ready(function(){

　　　　 $("dt").click(function(){

　　　　 $("dd").css("display","block"); //設置<dd>標簽中的內容顯示出來

　　　　 });

　　$("h1").css("color","blue");//設置<h1>標簽中的字體顏色為藍色

　　})

●類選擇器根據給定的class匹配元素

　　$(".price").css({"background":"#efefef","padding":"5px"});

//設置class為price元素的背景顏色和內邊距（右側網頁中的灰色方框部分）

●ID選擇器根據給定的id匹配元素

　　$("#author").css("color","#083499"); //設置id為author的元素的字體顏色

●並集選擇器用來合並元素集合

　　$(".intro,dt,dd").css("color","#ff0000");

●全局選擇器可以獲取所有元素

$("*").css("font-weight","bold"); //設置所有元素的字體加粗顯示

●層次選擇器：層次選擇器通過DOM 元素之間的層次關系來獲取元素

●後代選擇器用來獲取元素的後代元素

　　$(".textRight p").css("color","red");

　　　　 //設置class為textRight元素中的所有<p>標簽的字體全部為紅色

●子選擇器用來獲取元素的子元素

　$(".textRight>p").css("color","red");

●相鄰選擇器用來選取緊鄰目標元素的下一個元素

　　$("h1+p").css(text-decoration","underline");

●同輩選擇器用來選取目標元素之後的所有同輩元素

　　$("h1~p").css("text-decoration","underline");

●屬性選擇器: 屬性選擇器通過HTML元素的屬性來選擇元素

●根據屬性名獲取元素

　　★屬性選擇器可以根據是否包含某屬性來選取元素

　　　　●a標簽帶有class屬性

　　　　　　$("#news a[class]").css("background","#c9cbcb");

●根據屬性值獲取元素

1、屬性選擇器可以根據屬性的值來選取元素

　　　　●class屬性值為hot

　　　　　　$("#news a[class=‘hot‘]").css("background","#c9cbcb");

2、屬性選擇器可以指定選取不等於屬性是某個特定值的元素

　　 ●class值不等於hot

　　　　　　$("#news a[class!=‘hot‘]").css("background","#c9cbcb");

●根據屬性值包含特定的值獲取元素

1、屬性選擇器可以指定屬性值以指定值開頭的元素

　　●a標簽href屬性值以www開頭

　　　　$("#news a[href^=‘www‘]").css("background","#c9cbcb");

2、屬性選擇器可以指定屬性值以指定值結尾的元素

　　●a標簽href屬性值以html結尾

　　　　$("#news a[href$=‘html‘]").css("background","#c9cbcb");

3、屬性選擇器可以指定屬性值包含指定值的元素

　　●a標簽href屬性值包含“k2”的元素

　　　　$("#news a[href*=‘k2‘]").css("background","#c9cbcb");

●通過特定的過濾規則來篩選出所需的DOM元素

主要分類：

　　　　　　基本過濾選擇器

　　　　　　可見性過濾選擇器

　　　　　　表單對象過濾選擇器

　　　　　　內容過濾選擇器、子元素過濾選擇器、屬性過濾選擇器……

●基本過濾選擇器：

• ●eg：

div class="contain">

<h2>祝福冬奧</h2>

<ul>

<li> 貝克漢姆：衷心希望北京能夠申辦成功！</li>

<li> 姚明：北京申冬奧是個非常棒的機會！加油！</li>

<li> 張虹：北京辦冬奧，大家的熱情定超乎想象！</li>

<li> 肖恩懷特：我愛北京，支持北京申辦冬奧會！</li>

<li> 趙宏博：北京申辦冬奧會是再合適不過了！</li>

<li> 你喜歡哪些冬季運動項目？(點擊進入調查頁)</li>

</ul>

</div>

●$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

●$(".contain li:first").css({"font-size":"16px","color":"#e90202"});

●$(".contain li:last").css("border","none");

●$(".contain li:even").css("background","#f0f0f0");

●$(".contain li:odd").css("background","#cccccc");

●$(".contain li:lt(2)").css({"color":"#708b02"});

●$(".contain li:gt(3)").css({"color":"#b66302"});

●可見過濾選擇器：

　　★通過元素的顯示狀態（顯示/隱藏）來選取 元素。

　　Eg：$("p:hidden").show();

　　　　 $("p:visible").hide();

●選擇器中包含特殊符號

　　★在W3C規範中，規定屬性值不能包含有某些特殊字符，解決此類錯誤的方法是使用轉義符轉義。

　　　　Eg代碼：<div id="id#a">aa</div>

　　　　　　　　 <div id="id[2]">cc</div>

　　　　　　　 　◆獲取這兩個元素的選擇器

　　　　　　　　　　 　 　 $(“#id#a”);

　　　　　　　 　 $(“#id[2]”);

　　　　　　　　　　　　以上代碼不能正確獲取元素，正確的寫法如下：

　　　　　　　　　　　　 $(“#id\\#a”);

　　　　　　　　　　 $(“#id\\[2\\]”);

●選擇器中的空格：選擇器的書寫規範很嚴格，多一個空格或少一個空格，都會影響選擇器的效果

Eg1：選取class為“test”的元素內部的隱藏元素

　　　　　　　　　　var $t_a = $(".test :hidden"); //帶空格的jQuery選擇器

　　　　　　Eg2：選取隱藏的class為“test”的元素

　　　　　　　　　　var $t_b = $(".test:hidden"); //不帶空格的jQuery選擇器