首先，基本選擇器
1.？Id選擇器（指定id元素）
將id =“one“元素的背景色設置為黑色。（id選擇器返回單個元素）
$(文檔)。準備好了（功能？()?{
$（“# one“）。CSS（‘背景‘，？'#000');
});
2.？類選擇器（遍歷css類元素）
將class =“cube“元素的背景色設置為黑色。
$(文檔)。準備好了（功能？()?{
$('.立方體）。CSS（‘背景‘，？'#000');
});
3.？元素選擇器（遍歷html元素）
將p元素的文本大小設置為12px。
$(文檔)。準備好了（功能？()?{
$（‘p‘）。CSS（‘font-size‘，？12px‘）；
});
4.？*?選擇器（遍歷所有元素）
$(文檔)。準備好了（功能？()?{
//?遍歷表單下的所有元素，並將字體顏色設置為紅色。
$（‘形式？*').CSS（‘color‘，？# ff 0000’）；
});
5.？並行選擇器
$(文檔)。準備好了（功能？()?{
//?將p元素和div元素的邊距設置為0。
$（‘p，？div）。CSS（‘margin‘，？'0');
});
第二，？分級選擇器
1.？父母？& gt？子元素（直接子元素）
$(文檔)。準備好了（功能？()?{
//?選擇div下的第壹代span元素，並將字體顏色設置為紅色。
$（‘div？& gt？span）。CSS（‘color‘，？# ff 0000’）；
});
在下面的代碼中，只有第壹個span會改變顏色，第二個span不屬於div的第壹代子元素，顏色保持不變。
& ltdiv & gt
& ltspan>。123 & lt；/span>。
& ltp & gt
& ltspan>。456 & lt/span>。
& lt/p & gt；
& lt/div & gt；
2.？prev？+?Next（下壹個同級元素，相當於next（）方法）
$(文檔)。準備好了（功能？()?{
//?選擇下壹個具有類項目的div同級元素。
$('.項目？+?div）。CSS（‘color‘，？# ff 0000’）；
//?等效代碼
//$('.項)。下壹個（div）。CSS（‘color‘，？# ff 0000’）；
});
下面的代碼，只有123和789會變色。
& ltp？class =“item“& gt。& lt/p & gt；
& ltdiv & gt123 & lt；/div & gt；
& ltdiv & gt456 & lt/div & gt；
& lt跨度？class =“item“& gt。& lt/span>。
& ltdiv & gt789 & lt/div & gt；
3.？prev？~?兄弟元素（prev元素的所有兄弟元素，相當於nextAll（）方法）
$(文檔)。準備好了（功能？()?{
//?在類位於內部後選擇所有div同級元素。
$('.裏面嗎？~?div）。CSS（‘color‘，？# ff 0000’）；
//?等效代碼
//$('.）。next all（div）。CSS（‘color‘，？# ff 0000’）；
});
下面的代碼中，G2和G4將改變顏色。
& ltdiv？class =“inside“& gt。g 1 & lt；/div & gt；
& ltdiv & gtG2 & lt/div & gt；
& ltspan>。G3 & lt/span>。
& ltdiv & gtG4 & lt/div & gt；
第三，？濾波器選擇器
1.？基本過濾器選擇器
——1.1?:first和:last（取第壹個元素或最後壹個元素）
$(文檔)。準備好了（功能？()?{
$（span:first）。CSS（‘color‘，？# ff 0000’）；
$（‘span:last‘）。CSS（‘color‘，？# ff 0000’）；
});
下面的代碼，G1（第壹個元素）和G3（最後壹個元素）將改變顏色。
& ltspan>。g 1 & lt；/span>。
& ltspan>。G2 & lt/span>。
& ltspan>。G3 & lt/span>。
——1.2?:not（取非元素）
$(文檔)。準備好了（功能？()?{
$（‘div:not（。換行）’）。CSS（‘color‘，？# ff 0000’）；
});
下面的代碼，G1會改變顏色。
& ltdiv & gtg 1 & lt；/div & gt；
& ltdiv？class =“wrap“& gt。G2 & lt/div & gt；
但是，請註意以下代碼:
& ltdiv & gt
G1
& ltdiv？class =“wrap“& gt。G2 & lt/div & gt；
& lt/div & gt；
當G1所在的div和G2所在的div是父子關系時，G1和G2都會變色。
——1.3?:even和:odd（取偶數索引或奇數索引元素，索引從0開始，偶數表示偶數，奇數表示奇數）
$(文檔)。準備好了（功能？()?{
$（‘tr:even‘）。CSS（‘背景‘，？# EEE）；？//?偶數線條顏色
$（‘tr:odd‘）。CSS（‘背景‘，？#噠噠噠’）；？//?奇數線條顏色
});
a、C線顏色#EEE（第壹條線的索引為0），B、D線顏色#噠噠。
& lt桌子？width =“200“？cell padding =“0“？cellspacing =“0“& gt；
& lttbody & gt
& lttr & gt& lttd & gtA & lt/TD & gt；& lt/tr & gt；
& lttr & gt& lttd & gtB&中尉；/TD & gt；& lt/tr & gt；
& lttr & gt& lttd & gtC & lt/TD & gt；& lt/tr & gt；
& lttr & gt& lttd & gtD & lt/TD & gt；& lt/tr & gt；
& lt/tbody & gt；
& lt/table & gt；
——1.4?:eq（x）？（取指定索引處的元素）
$(文檔)。準備好了（功能？()?{
$（‘tr:eq（2）‘）。CSS（‘背景‘，？# ff 0000’）；
});
更改第三行的背景顏色。在上面的代碼中，C的背景將改變顏色。
——1.5?:gt（x）和:lt（x）（取索引大於或小於x的元素）
$(文檔)。準備好了（功能？()?{
$（‘ul？李:gt（2）。CSS（‘color‘，？# ff 0000’）；
$（‘ul？李:李。CSS（‘color‘，？# 0000 ff’）；
});
L4和L5為紅色，L1和L2為藍色，L3為默認顏色。
& ltul & gt
& lt李& gtl 1 & lt；/李& gt
& lt李& gtL2 & lt；/李& gt
& lt李& gtL3 & lt/李& gt
& lt李& gtL4 & lt/李& gt
& lt李& gtL5 & lt/李& gt
& lt/ul & gt；
——1.6?:表頭（取表頭元素H1~H6）
$(文檔)。準備好了（功能？()?{
$（‘:header‘）。CSS（‘背景‘，？# EFEFEF‘）；
});
下面的代碼中，H1~H6的背景顏色將發生變化。
& lth1》h 1 & lt；/h 1 & gt；
& lth2 & gtH2 & lt；/H2 & gt；
& lth3 & gtH3 & lt；/H3 & gt；
& lth4 & gtH4 & lt；/H4 & gt；
& lth5 & gtH5 & lt；/H5 & gt；
& lth6 & gtH6 & lt；/h6 & gt；
2.？內容過濾選擇器
——2.1?:包含（文本）（取包含文本的元素）
$(文檔)。準備好了（功能？()?{
//?包含“jQuery”文本的Dd元素將改變顏色。
$（‘DD:contains（“jQuery“））。CSS（‘color‘，？# ff 0000’）；
});
下面的代碼，第壹個dd會改變顏色。
& ltdl & gt
& ltdt & gt技術
& ltdd & gtjQuery，？。網，？CLR<。/DD & gt；
& ltdt & gtSEO</dt & gt；
& ltdd & gt關鍵詞排名
& ltdt & gt其他的
& ltdd & gt& lt/DD & gt；
& lt/dl & gt；
——2.2?:empty（采用不包含子元素或文本為空的元素）
$(文檔)。準備好了（功能？()?{
$（‘DD:empty‘）。html（“無內容”）；
});
上面的第三個dd將顯示“無內容”文本。
——2.3?:has（選擇器）（取選擇器匹配的元素）
$(文檔)。準備好了（功能？()?{
//?向包含span元素的div添加邊框。
$（‘div:has（span）‘）。CSS（‘border‘，？1px？固體？#000');
});
即使span不是div的直接子級，它也會生效。
& ltdiv & gt
& lth2 & gt
A
& ltspan>。B&中尉；/span>。
& lt/H2 & gt；
& lt/div & gt；
——2.4?:parent（取包含子元素或文本的元素）
$(文檔)。準備好了（功能？()?{
$（‘ol？李:父母）。CSS（‘border‘，？1px？固體？#000');
});
在下面的代碼中，A和D所在的li將有壹個邊框。
& ltol & gt
& lt李& gt& lt/李& gt
& lt李& gtA & lt/李& gt
& lt李& gt& lt/李& gt
& lt李& gtD & lt/李& gt
& lt/ol & gt；
3.？可見度過濾器選擇器
——3.1?:隱藏（獲取不可見元素）
jQuery to 1.3.2後面的:隱藏選擇器僅匹配顯示:none或
參考:/API/隱藏選擇器
以下代碼，先彈出“妳好”對話框，然後會顯示hid-1，hid-2仍然不可見。
& lthtml？xmlns =“http://www . w3 . org/1999/XHTML“？& gt
& lt頭？runat =“server“& gt；
& lttitle & gt& lt/title & gt；
& lt風格？type =“text/CSS“& gt；
差異
{
邊距:？10px；
寬度:？200px
身高:？40px
邊框:？1px？固體？# FF0000
顯示:塊；
}
。hid-1
{
顯示:？無；
}
。hid-2
{
能見度:？隱藏；
}
& lt/style & gt；
& lt劇本？type =“text/JavaScript“？src =“js/jquery . min . js“& gt；& lt/script & gt；
& lt劇本？type =“text/JavaScript“& gt；
$(文檔)。ready（function（）？{
$（‘div:hidden‘）。顯示（500）；
alert（$（‘input:hidden‘）。val())；
});
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class =“hid-1“& gt。顯示:？無& lt/div & gt；
& ltdiv？class =“hid-2“& gt。能見度:？隱藏的& lt/div & gt；
& lt輸入？type =“hidden“？value =“hello“/& gt。
& lt/body & gt；
& lt/html & gt；
——3.2?:可見（取可見元素）
下面的代碼，最後壹個div將有壹個背景顏色。
& lt劇本？type =“text/JavaScript“& gt；
$(文檔)。ready（function（）？{
$（‘div:visible‘）。CSS（‘背景‘，？# EEA dbb‘）；
});
& lt/script & gt；
& ltdiv？class =“hid-1“& gt。顯示:？無& lt/div & gt；
& ltdiv？class =“hid-2“& gt。能見度:？隱藏的& lt/div & gt；
& lt輸入？type =“hidden“？value =“hello“/& gt。
& ltdiv & gt
JQuery選擇器大全
& lt/div & gt；
4.？屬性過濾器選擇器
——4.1?【屬性】（取具有屬性attribute的元素）
在下面的代碼中，最後壹個A標記沒有title屬性，因此它仍然帶有下劃線。
& lt劇本？type =“text/JavaScript“& gt；
$(文檔)。ready（function（）？{
$（‘a【title】‘）。CSS（‘文本裝飾‘，？無’）；
});
& lt/script & gt；？
& ltul & gt
& lt李& gt& lt答？href =“#“？title =“DOM對象和jQuery對象“？class =“item“& gt。DOM對象和jQuery對象
& lt李& gt& lt答？href =“#“？title =“jquery選擇器的完整集合“？class =“item-selected“& gtJQuery選擇器百科全書
& lt李& gt& lt答？href =“#“？title =“jQuery事件百科”？class =“item“& gt。JQuery事件集合
& lt李& gt& lt答？href =“#“？Title=“基於jQuery的插件開發”？class =“item“& gt。基於jQuery的插件開發
& lt李& gt& lt答？href =“#“？title =“Wordpress？& amp？jQuery“？class =“item“& gt。Wordpress？& amp？jQuery & lt/a & gt；& lt/李& gt
& lt李& gt& lt答？href =“#“？class =“item“& gt。其他的
& lt/ul & gt；
——4.2?【屬性？=?值】和【屬性！=?Value】（取屬性值等於或不等於value的元素）
Class =“item“和class！=item的A標簽指定文本顏色。