CSS选择器和jQuery选择器的区别与联系之一

到底什么是选择器?我们通过常接触的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称为伪类选择器
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选择器的效率

  1. id选择器(#myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div,h1,p)
  4. 相邻选择器(h1+p)
  5. 子选择器(ul < li)
  6. 后代选择器(li a)
  7. 通配符选择器(*)
  8. 属性选择器(a[])
  9. 伪类选择器(a:hover,li:nth-child)

上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最底。详细的介绍大家还可以点击Writing efficient CSS selectors

jQuery选择器的效率

  1. id选择器$('#id')和元素标签选择器$('form')
  2. 类选择器$('.className')
  3. 属性选择器$('[attribute=value]')和伪类选择器$(':hidden')
更多相关文章
  • JavaScript之jQuery-2jQuery选择器(jQuery选择器、基本选择器、层次选择器、过滤选择器、表单选择器)
    一.jQuery 选择器jQuery 选择器简介  - jQuery 选择器类似于 CSS 选择(定位元素,施加样式),能够实现定位元素,施加行为  - 使用 jQuery 选择器能够将内容与行为分离  - 学会使用选择器是学习 jQuery 的基础jQuery 选择器的优势  - 简洁的写法:  ...
  • jQuery选择器转
    原文:http://www.cnblogs.com/qinwang913/p/3444135.html 一.基本分类 jQuery选择器大致可以分为两类,基本选择器和过滤选择器,总体结构体系如下: 二.基本选择器 基本选择器又可以分为三种,分别为 CSS选择器 层级选择器 表单域选择器 2.1 CS ...
  • jQuery 选择器 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 H ...
  • jquery选择器控制li点击css效果html代码:<ul id="aaa">    <li><a class="curricula qadown" href="#/activities">测试一< ...
  • jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的d ...
  • $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素,返回div元素数组 $(" ...
  • 1.$event对象  $event对象其实就是潜在的jQuery事件对象,通过$event.target获取这个元素,通过$event.currentTarget获取子元素. 例如: <li ng-click="getApplicationListByType(1,$event)& ...
  • 在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象:documentElement是Document对象的属性,返回的是文档根节点 对于HTML文档 ...
一周排行
  • 三张图搞懂JavaScript的原型对象与原型链
    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易 ...
  • 系统要求:内存:1G(官方最低要求1G)硬盘:40G(企业版安装所需4.29G和1.7G数据文件)检查的命令内存# grep MemTotal /proc/meminfo交换空间# grep SwapTotal /p ...
  • 人生无常,世事难料,风雨兼程! 这句话出自一个涉世未深的小年轻口中虽然有几分不妥,但回首这二十几年一路兼程,不由发出此叹. 如普通孩童一般,游戏机+动画片占据了我大部分的童年时光,当时我心中就有一个奇特的梦想:如果自 ...
  •  http://114.215.90.144/student_association/student.git ! [rejected]        master -> master (non-fast-for ...
  • <Oracle 数据备份与恢复微实践>新年新群招募: 中国Oracle精英联盟170513055群介绍:本群是大家的一个技术分享社区,在这里可以领略大师级的技术讲座,还有机会参加Oracle举办的技术沙龙 ...
  •     进公司的第一个项目就遇到了一个比较难缠的客户(10年Java开发经验的客户你伤不起),不过总算过去了.在这个项目中由于APP加载的图片.报表等内容比较多(一直认为是设计上的问题),再加上手机内存的限制,所以经 ...
  • mysql设置初始密码、允许远程访问及忘记root密码后重设
    一.mysql修改设置初始密码安装好后的mysql,使用mysql命令,登录到图形界面:2 ...
  • 如果通过shell访问mongo,要在secondary进行查询.会出现如下错误:                 [[email protected]~]# mongo MongoDB shell v ...
  • 规划:    服务端:rs1.china-kody.com rs1.china-kody.com    客户端:rs2.china-kody.com rs2.china-kody.com配置服务器        cd ...
  •     以下内容是本人接触linux工作后,每次安装后服务器必做的一些操作,如有不对之处欢迎大神指出,感谢.安装系统分区(1) /boot分区给100M; (2) swap分区大小为内存的2倍,最大16G足矣:(3) ...