jQuery選擇器

jQuery選擇器類似於CSS選擇器，用來選取網頁中的元素

示例:$("h3").css("background","#09F");

     1.獲取並設定網頁中所有<h3>元素的背景

     2.“h3”為選擇器語法，必須放在$()中

     3.$(“h3”)返回jQuery物件

     4..css()是為jQuery物件設定樣式的方法

jQuery選擇器分類：

jQuery選擇器功能強大，種類也很多，分類如下：

1. 通過CSS選擇器選取元素

①基本選擇器

②層次選擇器

③屬性選擇器

2. 通過過濾選擇器選擇元素

①基本過濾選擇器

②可見性過濾選擇器

基本選擇器：

基本選擇器包括標籤選擇器、類選擇器、ID選擇器、並集選擇器和全域性選擇器

名稱	語法構成	描述	示例
標籤選擇器	element	根據給定的標籤名匹配元素	$("h2" )選取所有h2元素
類選擇器	.class	根據給定的class匹配元素	$(" .title")選取所有class為title的元素
ID選擇器	#id	根據給定的id匹配元素	$(" #title")選取id為title的元素
並集選擇器	selector1,selector2,...,selectorN	將每一個選擇器匹配的元素合併後一起返回	$("div,p,.title" )選取所有div、p和擁有class為title的元素
全域性選擇器	*	匹配所有元素	$("*"  )選取所有元素

①標籤選擇器：標籤選擇器根據給定的標籤名匹配元素

$(document).ready(function(){

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

【獲取dt標籤併為其新增click事件】

       $("dd").css("display","block");

      【設定<dd>標籤中的內容顯示出來】

   });

   $("h1").css("color","blue");

  【設定<h1>標籤中的字型顏色為藍色】

})

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

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

【獲取並設定price元素的背景顏色和內邊距】

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

$("#author").css("color","#083499");

【獲取並設定id為author的標籤的字型顏色】

④並集選擇器：並集選擇器用來合併元素集合

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

【獲取dt，dd，intro並設定字型顏色為紅色】

⑤全域性選擇器：全域性選擇器可以獲取所有元素

$("*").css("font-weight","bold");

【通過全域性選擇器把所有元素的字型加粗顯示】

層次選擇器：

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

名稱	語法構成	描述	示例
後代選擇器	ancestor descendant	選取ancestor元素裡的所有descendant（後代）元素	$("#menu span" )選取#menu下的<span>元素
子選擇器	parent>child	選取parent元素下的child（子）元素	$(" #menu>span" )選取#menu的子元素<span>
相鄰元素選擇器	prev+next	選取緊鄰prev元素之後的next元素	$(" h2+dl " )選取緊鄰<h2>元素之後的同輩元素<dl>
同輩元素選擇器	prev~sibings	選取prev元素之後的所有siblings元素	$(" h2~dl " )選取<h2>元素之後所有的同輩元素<dl>

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

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

【設定textRight元素中的所有<p>標籤的字型全部為紅色】

②子選擇器：子選擇器用來獲取元素的子元素

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

【設定textRight元素下的子元素p的字型全部為紅色】

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

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

【設定h1元素相鄰的元素p並加上下劃線】

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

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

【設定h1元素同輩的的元素p並加上下劃線】

屬性選擇器：

屬性選擇器通過HTML元素的屬性來選擇元素：a標籤帶有class屬性

語法構成	描述	示例
[attribute]	選取包含給定屬性的元素	$(" [href]" )選取含有href屬性的元素
[attribute=value]	選取等於給定屬性是某個特定值的元素	$(" [href ='#']" )選取href屬性值為“#”的元素
[attribute !=value]	選取不等於給定屬性是某個特定值的元素	$(" [href !='#']" )選取href屬性值不為“#”的元素

語法構成	描述	示例
[attribute^=value]	選取給定屬性是以某些特定值開始的元素	$(" [href^='en']" )選取href屬性值以en開頭的元素
[attribute$=value]	選取給定屬性是以某些特定值結尾的元素	$(" [href$='.jpg']" )選取href屬性值以.jpg結尾的元素
[attribute*=value]	選取給定屬性是以包含某些值的元素	$(" [href* ='txt']" )選取href屬性值中含有txt的元素

①根據屬性名獲取元素：

屬性選擇器可以根據是否包含某屬性來選取元素：a標籤帶有class屬性

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

【獲取id選擇器news下方的元素a並且含有屬性名class，並將其背景改為灰色】

②根據屬性值獲取元素：

屬性選擇器可以根據屬性的值來選取元素：class屬性值為hot

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

【獲取id選擇器news下方的元素a並且class的屬性值等於hot，並將其背景改為灰色】

③根據屬性值獲取元素：

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

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

【獲取id選擇器news下方的元素a並且class的屬性值不等於hot，並將其背景改為灰色】

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

屬性選擇器可以指定屬性值以指定值開頭的元素：a標籤href屬性值以www開頭

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

【獲取id選擇器news下方的元素a並且class的屬性值以'www'開頭，並將其背景改為灰色】

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

屬性選擇器可以指定屬性值以指定值結尾的元素：a標籤href屬性值以html結尾

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

【獲取id選擇器news下方的元素a並且class的屬性值以'html'結尾，並將其背景改為灰色】

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

屬性選擇器可以指定屬性值包含指定值的元素：a標籤href屬性值包含“k2”的元素

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

【獲取id選擇器news下方的元素a並且class的屬性值包含'k2'，並將其背景改為灰色】

過濾選擇器：

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

主要分類：

1. 基本過濾選擇器
2. 可見性過濾選擇器
3. 表單物件過濾選擇器【後面學】
4. 內容過濾選擇器、子元素過濾選擇器……【實際應用不多】

基本過濾選擇器：

語法	描述	示例
:first	選取第一個元素	$(" li:first" )選取所有<li>元素中的第一個<li>元素
:last	選取最後一個元素	$(" li:last" )選取所有<li>元素中的最後一個<li>元素
:not(selector)	選取去除所有與給定選擇器匹配的元素	$(" li:not(.three)" )選取class不是three的元素
:even	選取索引是偶數的所有元素（index從0開始）	$(" li:even" )選取索引是偶數的所有<li>元素
:odd	選取索引是奇數的所有元素（index從0開始）	$(" li:odd" )選取索引是奇數的所有<li>元素

語法	描述	示例
:eq(index)	選取索引等於index的元素（index從0開始）	$("li:eq(1)" )選取索引等於1的<li>元素
:gt(index)	選取索引大於index的元素（index從0開始）	$(" li:gt(1)" )選取索引大於1的<li>元素（注：大於1，不包括1）
:lt(index)	選取索引小於index的元素（index從0開始）	$(“li:lt(1)” )選取索引小於1的<li>元素（注：小於1，不包括1）
:header	選取所有標題元素，如h1~h6	$(":header" )選取網頁中所有標題元素
:focus	選取當前獲取焦點的元素	$(":focus" )選取當前獲取焦點的元素

示例：

<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"});

【通過過濾選擇器給h2設定了背景顏色和字型顏色】

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

【通過過濾選擇器改變了ul的第一個li的背景顏色和字型顏色】

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

【通過過濾選擇器去掉了ul的最後一個li的邊框】

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

【設定li中偶數行的背景顏色】

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

【設定li中奇數行的背景顏色】

④$(".contain li:lt(2)").css({"background ":"green"});

【通過過濾選擇器，獲取li的前兩個元素（編號0和1），並改變背景顏色】

$(".contain li:gt(3)").css({"background ":"green"});

【通過過濾選擇器，獲取li的最後兩個元素（編號4和5），並改變背景顏色】

⑤$(".contain li:eq(2)").css({"background":"#02acaa"});

【通過過濾選擇器，獲取li的第三個元素（編號2），並改變背景顏色】

可見性過濾選擇器：

通過元素顯示狀態來選取元素

語法	描述	示例
:visible	選取所有可見的元素	$(":visible" )選取所有可見的元素
:hidden	選取所有隱藏的元素	$(":hidden" ) 選取所有隱藏的元素

$("p:hidden").show();        【所有隱藏的元素都變成顯示的】

$("p:visible").hide();          【所有顯示的元素都變成隱藏的】

jQuery選擇器注意事項：

①特殊符號的轉義

<div id="id#a">aa</div>

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

想要獲取這兩個元素：

$("#id#a");

$("#id[2]");

【這樣是錯誤的】

$("#id\\#a");

$("#id\\[2\\]");

【要用這樣的轉義符號才能獲取】

②選擇器中的空格：

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

加空格的情況：

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

【選取class為“test”的元素內部的隱藏元素】

不加空格的情況

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

【選取隱藏的class為“test”的元素】