jquery學習-基本選擇器
阿新 • • 發佈：2018-11-27
jquery選擇器也就是使用jquery方法簡單快速的查詢元素。
1.）jquery基本選擇器：
- id選擇器：用#號 + 標籤名稱來表示。
- 類選擇器：用.(點) + 標籤名稱來表示。
- 標籤選擇器：用標籤名稱來表示。
- 子元素選擇器：用>符號來表示。
- 後代選擇器：用空格來表示。
- 組合選擇器：多元素選擇器。
幾個基本選擇器的程式碼例項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> <style type="text/css"> #box1,.box2{ height: 100px; width: 100px; border: 1px solid red; margin: 20px; } </style> </head> <body> <div id="box1"></div> <div class="box2"></div> <p>12155</p> <p>13215</p> <div id="box3"> <div class="box3"> <p>22222</p> <p>22222</p> </div> </div> <script> $('#box1').css('background','green'); //id選擇器：選擇id為box1的元素，設定它的css樣式背景顏色為green。 //css（)方法：用來設定或者獲取css樣式。 $('.box2').css('background','gray'); //類選擇器：選擇類為box的元素，設定它的css樣式背景顏色為gray。 $('p').css('color','red'); //標籤選擇器：選擇標籤名稱為p的元素，設定它的css樣式背景顏色為red。 $('#box3 .box3').css('background','gray'); //後代選擇器：選擇id為box3的後代元素，這個後代元素的類名稱為box3， // 再將這個後代元素css樣式背景顏色為gray。 $('.box3 > p').css('color','red'); //子元素選擇器：選擇類名稱為box3下所有名稱為p的子元素。 $('#box1,.box2,#box3,.box3').css('background','red'); //組合選擇器：選擇id為box1、類名稱為box2，id為box3，類名稱為box3這幾個元素。 //設定它的css樣式背景顏色為red。 </script> </body> </html>