CSS選擇器和jQuery選擇器的區別與聯繫之一
到底什麼是選擇器？經過常接觸的CSS選擇器和jQuery選擇器理解一下，咱們知道CSS是用於分離網頁的結構和表現的，也就是說對於一個網頁，HTML定義網頁的結構，CSS描述網頁的樣子，一個很經典的例子是說HTML就像一我的的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript,這個植物人就能夠對外界刺激作出反應，能夠思考、運動、能夠給本身整容化妝（改變CSS）等等，成爲一個活生生的人。javascript
咱們知道，jQuery選擇器和CSS選擇器的寫法十分相似，都具備隱式迭代的特色，無需循環遍歷符合選擇器要求的每一個元素，使用起來相對方便，一般，把css選擇器用$("")包起來就成了一個jQuery選擇器，如css
| CSS選擇器 | jQuery選擇器 | |
| ID選擇器 | #myID | $("#myID") |
| 類選擇器 | .myClass | $(".myClass") |
| 標籤選擇器 | p | $("p") |
| 層次選擇器 | div > strong | $("div>strong") |
| css稱爲僞類選擇器 jQuery稱之爲過濾選擇器 |
p:nth-child(3) | $("p:nth-child(3)") |
見下面的例子，CSS爲每一個段落的文字設置成14px,顏色是紅色，jQuery中設置文字爲16px,顏色爲藍色，由於jquery設置的是DOM加載後的行爲，全部的段落表現爲藍色，16px字html
<!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>
<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>
那麼二者的區別在哪裏呢？java
一、但二者的做用不一樣，CSS選擇器找到元素後爲設置該元素的樣式，jQuery選擇器找到元素後添加行爲。jquery
二、jQuery選擇器擁有更好的跨瀏覽器的兼容性。瀏覽器
三、選擇器的效率。code
CSS選擇器的效率orm
- id選擇器（#myid）
- 類選擇器（.myclassname）
- 標籤選擇器（div,h1,p）
- 相鄰選擇器（h1+p）
- 子選擇器（ul > li）
- 後代選擇器（li a）
- 通配符選擇器（*）
- 屬性選擇器（a[rel="external"]）
- 僞類選擇器（a:hover,li:nth-child）
上面九種選擇器的效率是從高到低排下來的，基中ID選擇器的效率是最高，而僞類選擇器的效率則是最底。詳細的介紹你們還能夠點擊Writing efficient CSS selectors。htm
jQuery選擇器的效率blog
- id選擇器$('#id')和元素標籤選擇器$('form')
- 類選擇器$('.className')
- 屬性選擇器$('[attribute=value]')和僞類選擇器$(':hidden')
相關文章
- 1. CSS選擇器和jQuery選擇器的區別與聯繫之一
- 2. jQuery選擇器與CSS選擇器
- 3. css選擇器和jQuery選擇器
- 4. Jmeter之CSS選擇器/JQuery選擇器關聯
- 5. CSS的子選擇器與後代選擇器的區別
- 6. CSS選擇器之屬性選擇器、關係選擇器
- 7. CSS 選擇器和ID選擇器的區別
- 8. CSS中ID選擇器和類（class）選擇器的區別
- 9. CSS後代選擇器和子代選擇器區別
- 10. jQuery選擇器之層級選擇器
- 更多相關文章...
- • XQuery 選擇 和 過濾 - XQuery 教程
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
