jquery 第四章 jQuery選擇器
阿新 • • 發佈：2018-12-26
jQuery選擇器優點：
（1）簡潔的寫法
（2）支援css1.0到css3.0的選擇器
（3）完善的處理機制
基本選擇器
標籤選擇器（h2）
，類選擇器（.class）
，ID選擇器（#id）
，並集選擇器$（“div，盤，.title”）:所有div，p和擁有class為.title的元素
，交集選擇器和全域性選擇器（h2.title）選取所有擁有class為title的h2元素
jQuery的四種層次選擇器
後代選擇器 A B（後代）
子選擇器 A>B（子）
相鄰元素選擇器 A~B
同輩元素選擇器 A+B
過濾選擇器
基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單物件屬性過濾選擇器
：frist 第一個元素
：last 最後一個元素
：even 所有索引是偶數的元素
：odd 所有索引是奇數的元素
可見性過濾選擇器
。show();顯示
。hide（）隱藏
!DOCTYPE html> <html> <head> <title>3.html</title> <script type="text/javascript"> //一：類選折器 標籤選擇器 並集選折器/交集選折器/全域性選折器 //1.交集 /* $( function() { $("div#today").css("color","green"); } ); */ //2.並集 /* $( function() { $("#today,#tomary").css("color","pink"); } ); */ //3.全域性 $(function() { $("*").css("color", "yellow"); }); //4.後代選折器 不直接 空格 子元素 //5.子選折器 > 直接子 5、6.相鄰選折器 + 後一個 向後查詢之前的不行 7.同輩~ 三：同輩選折器("[href]")/("[href=]")鍵值 ^ 以誰開頭 "[href^=cn]" $ 以誰結尾 "[href$=cn]" * 包含 "[href$*=cn]" 複合選折器 ( "a[href$*=cn]") 四：過濾選擇器 1.$( function(){ //$("li:first").css("color","pink");第一個 $("li:last").css("color","pink");最後一個 $("li:eq(1)").css("color","pink");某一個 $("li:gt(1)").css("color","pink");大於1 $("li:odd").css("color","pink");奇數 //$("li:even").css("color","pink");偶數 $("[id=box]").css("color","pink"); $("div:hidden");隱藏 $("div:hidden").show();顯示 } } ); //2.可見性過過濾選折器/不可見性過過濾選折器 hidden(); </script> </head> <body> <div id="today">如果愛可以重來</div> <div id="tomary">把最美好的留在昨天</div> //四：過濾選擇器 <ul> <li>吃飯</li> <li>睡覺</li> <li>冰果消消樂</li> </ul> </body> </html>