jQuery 选择器和 CSS 选择器的区别是什么? 下面本篇文章给大家介绍一下 jQuery 选择器和 CSS 选择器的区别. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
到底什么是选择器? 通过常接触的 CSS 选择器和 jQuery 选择器理解一下, 我们知道 CSS 是用于分离网页的结构和表现的, 也就是说对于一个网页, html 定义网页的结构, CSS 描述网页的样子, 一个很经典的例子是说 HTML 就像一个人的骨骼, 器官, 而 CSS 就是人的皮肤, 有了这两样也就构成了一个植物人了, 加上 JavaScript, 这个植物人就可以对外界刺激做出反应, 可以思考, 运动, 可以给自己整容化妆 (改变 CSS) 等等, 成为一个活生生的人.
我们知道, jQuery 选择器和 CSS 选择器的写法十分类似, 都具有隐式迭代的特点, 无需循环遍历符合选择器要求的每个元素, 使用起来相对方便, 通常, 把 CSS 选择器用 $("")包起来就成了一个 jQuery 选择器, 如
CSS 选择器 | jQuery 选择器 | |
ID 选择器 | #myID | $("#myID") |
类选择器 | .myClass | $(".myClass") |
标签选择器 | p | $("p") |
层次选择器 | div > strong | $("div>strong") |
css 称为伪类选择器 < br ztid="81" ow="0" oh="0"> jQuery 称之为过滤选择器 | p:nth-child(3) | $("p:nth-child(3)") |
见下面的例子, CSS 为每个段落的文字设置成 14px, 颜色是红色, jQuery 中设置文字为 16px, 颜色为蓝色, 因为 jQuery 设置的是 DOM 加载后的行为, 所有的段落表现为蓝色, 16px 字
- <!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 选择器的效率
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.
jQuery 选择器的效率
id 选择器 $('#id')和元素标签选择器 $('form')
类选择器 $('.className')
属性选择器 $('[attribute=value]')和伪类选择器 $(':hidden')
更多 jQuery 的相关知识, 可访问: web 前端课程 https://www.html.cn/ !!
来源: http://www.css88.com/qa/jquery/17983.html