標籤：style min ext nbsp back bsp 動態 inpu jquery選取器
jQuery選取器的優勢
1.簡潔的寫法
$()函數在很多JavaScript類庫中都被作為一個選取器函數來使用，在jQuery中也不例外。其中$("#ID")用來代替document.getElementById()函數，即通過ID擷取元素。
2.支援CSS1到CSS3選取器
jQuery選取器的寫法與CSS選取器的寫法十分相似，只不過兩者的作用效果不同，CSS選取器是找到元素後添加樣式，而jQuery選取器是找到元素後添加行為。
3.完善的處理機制
使用jQuery選取器不僅簡潔，而且還能避免很多錯誤。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script></head><body> <div>test</div> <script> document.getElementById("tt").style.color="red"; </script></body></html>
運行以上代碼，瀏覽器會因為網頁中沒有id為"tt"的元素而報錯，因此，必須修改代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script></head><body> <div>test</div> <script> if(document.getElementById("tt")){ document.getElementById("tt").style.color="red"; } </script></body></html>
但是如果我們需要操作很多元素，那麼需要對每一個元素都進行一次判斷，還太麻煩了吧！！
這個時候jQuery站了出來，其在這方面的問題上處理的非常不錯，即便頁面不存在該元素也不會報錯哦！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script></head><body> <div>test</div> <script> $("#tt").css("color","red"); </script></body></html>
但是需要注意的是，$("#tt")擷取的永遠都是對象，即便是網頁上沒有這個元素，因此當要用jQuery來檢查某個元素在網頁上是否存在時，不能使用以下代碼：
if ( $("#tt") ){ //do something}
而應該根據擷取到元素的長度來判斷
if ( $("#tt").length > 0 ){ //do something}
或者轉化成DOM對象來判斷
if ( $("#tt")[0] ){ //do something}
選取器
| 1.基本選取器 | 描述 | 返回 | 樣本 |
|---|---|---|---|
| #id | 根據給定的id匹配一個元素 | 單個元素 | $("#test")選取id為test的元素 |
| .class | 根據給定的類名匹配元素 | 集合元素 | $(".test")選取所有class為test的元素 |
| element | 根據給定元素名匹配元素 | 集合元素 | $("p")選取的p標籤 |
| * | 匹配所有元素 | 集合元素 | $("*")選取所有元素 |
| seletor1,....,seletorN | 將每一個選取器匹配到的元素合并後一起返回 | 集合元素 | $("div,span,p.myClass")選取所有div,span,和擁有myClass類的p標籤合并成一組元素 |
| 功能 | 代碼 | 執行按鈕 |
|---|---|---|
| 改變id為one的元素的背景色 | $("#one").css("background","#bbffaa"); | |
| 改變class為mini的所有元素的背景色 | $(".mini").css("background","#bbffaa"); | |
| 改變div標籤的背景色 | $("div").css("background","#bbffaa"); | |
| 改變所有元素的背景色 | $("*").css("background","#bbffaa"); | |
| 改變所有的span標籤和id為two的元素的背景色 | $("#span,#two").css("background","#bbffaa"); |
| 2.層次選取器 | 描述 | 返回 | 樣本 |
|---|---|---|---|
| $("祖先 後代") | 選取祖先元素裡面的所有後代元素 | 集合元素 | $("div span")選取div裡的所有span元素 |
| $("parent > child") | 選取父親元素裡面的孩子項目 | 集合元素 | $("div > span")選取div元素下名為span的子項目 |
$("prev + next") $(".prev").next("next") |
選取緊接在prev元素後的next元素 | 集合元素 | $(".one + div")選取class為one的下一個div的同輩元素 $(".one").next("div") |
$("prev ~ siblings") $("prev").nextAll("siblings") |
選取prev元素之後的所有siblings元素 | 集合元素 | $("#two~div")選取id為two的元素後面的所有div同輩元素 $("#two").nextAll("div") |
| 功能 | 代碼 | 執行按鈕 |
|---|---|---|
| 改變body內所有div的背景色 | $("body div").css("background","#bbffaa"); | |
| 改變body內子div的背景色 | $("body > div").css("background","#bbffaa"); | |
| 改變class為one的下一個div同輩元素背景色 | $(".one + div").css("background","#bbffaa"); | |
| 改變id為two的元素後面的所有div同輩元素的背景色 | $("#two ~ div").css("background","#bbffaa"); |
因頁面元素過多，動態元素的id衝突，請跳轉至下一篇
篩選器（過濾選取器）
點我--->>至下一篇
史上最全的jQuery選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
