區別:1、兩者的作用不同,CSS選擇器找到元素後為設定該元素的樣式,jQuery選擇器找到元素後添加行為;2、jQuery選擇器擁有更好的跨瀏覽器的兼容性;3、CSS選擇器和jQuery選擇器的效率不同。
我們知道,jQuery選擇器和CSS選擇器的寫法十分類似,都具有隱式迭代的特點,無需循環遍歷符合選擇器要求的每個元素,使用起來相對方便,通常,把css選擇器用$("")包起來就成了一個jQuery選擇器,如
CSS選擇器 | jQuery選擇器 | |
ID選擇器 | #myID | ##$("#myID")|
.myClass | $(".myClass") | |
p | $("p") | |
p > strong | # $("p>strong") | |
jQuery稱之為過濾選擇器 ##p:nth-child(3 ) |
$("p:nth-child(3)") |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style type="text/css"> p { font-size: 14px; color:#F00 } p:nth-child(3){color:#690} </style> <script src="jquery/jquery-1.11.3.js"></script> <script> $(document).ready(function() { $("p").css({"color":"#00f","font-size":"16px"}); $("p:nth-child(3)").css({"font-size":"24px"}); }); </script> </head> <body> <p>第一段</p> <p>第二段</p> <p>第三段</p> <p>第四段</p> </body> </html>
1、兩者的作用不同,CSS選擇器找到元素後設定該元素的樣式,jQuery選擇器找到元素後再加入行為。
2、jQuery選擇器擁有更好的跨瀏覽器的兼容性。
3、選擇器的效率。
CSS選擇器的效率
1、id選擇器(#myid)
2、類別選擇器(.myclassname)
3、標籤選擇器(p,h1,p)
4、相鄰選擇器(h1 p)
5、子選擇器(ul >li)
##6、後代選擇器(li a)7、通配符選擇器(*)8、屬性選擇器(a[rel="external"])9、偽類選擇器(a:hover,li:nth-child)上面九種選擇器的效率是從高到低排下來的,基中ID選擇器的效率是最高,而偽類選擇器的效率則是最底。詳細的介紹大家也可以查看Writing efficient CSS selectors(網址:http://csswizardry.com/2011/09/writing-efficient-css-selectors/)。 jQuery選擇器的效率1、id選擇器$('#id')和元素標籤選擇器$('form')2、類別選擇器$('.className')3、屬性選擇器$('[attribute=value]')和偽類選擇器$(':hidden')更多編程相關知識,請造訪:程式設計課程
! !以上是jquery選擇器和CSS選擇器的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!