到底什么是选择器？通过常接触的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[rel="external"]）
  9. 伪类选择器（a:hover,li:nth-child）

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

jQuery选择器的效率

  1. id选择器$('#id')和元素标签选择器$('form')
  2. 类选择器$('.className')
  3. 属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

CSS选择器和jQuery选择器的区别与联系之一的更多相关文章

  1. CSS选择器与jQuery选择器的异同：一些特殊的选择器

    在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类.下面是一些jQuery扩展的选择器:(来自http://www.cnblogs.c ...

  2. Jmeter之CSS选择器/JQuery选择器关联

    选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jquery选择器总结 转自（永远的麦子）

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

  5. jQuery选择器种类整理

    选择器概念 jQuery选择器是通过标签.属性或者内容对HTML内容进行选择,选择器运行对HTML元素组或者单个元素进行操作. jQuery选择器使用$符号,等同于jquery,例如: $(“li”) ...

  6. jQuery简介以及jQuery选择器

    一 简介 1 定义:jQuery库是JavaScript的封装库 2 优点: 1) : 代码开源 2) : 选择器强大 3) : 完善的Ajax 4) : 浏览器兼容性高 5) : 文档完善(帮助文档 ...

  7. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  8. 各jQuery选择器的用法(转)

    这篇文章来介绍下jQuery的选择器. 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依 赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事 ...

  9. jquery jquery选择器总结 转自（永远的麦子）

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

随机推荐

  1. JQuery选择器中含有冒号的ID处理差异的分析

    问题提出 对于一个输入框, 如果其id中含有冒号(:),选择器使用需要有特殊写法, 例如 id为下 <input type="text" value="ddd&qu ...

  2. js web实现移动端触控

    // 触摸事件 $(".m_l_i_l a").on("touchstart", function(){ $(this).css("color&quo ...

  3. cat hesA/Models/score_tgt.sc| awk '{ print $2,$19}' | sort -n -k 1

    cat hesA/Models/score_tgt.sc| awk '{ print $2,$19}' | sort -n -k 1 print the second collum in order

  4. 对java多线程的认识

    多线程的概念:多线程是一种机制,它允许在程序中并发的执行多个线程,且每个线程间相互独立. 实现多线程的两种方式: 1.继承java.lang.Thread类,并且重写它的run方法,将线程的执行主体放 ...

  5. JS中反斜杠和单双引号的配合使用效果

    <div id="tag"></div> <div id="tag1"></div> <div id=&q ...

  6. 转：SVN服务器搭建和使用（三）

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html 接下来,试试用TortoiseSVN修改文件,添加文件,删除文件, ...

  7. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...

  8. QTP vbs学习

    1.helloworld Dim helloworld helloworld = "QTP自动化测试技术导航" mxgbox helloworld   2.显示申明变量 Optio ...

  9. ubuntu 中增加鼠标右键菜单，为Windows 的exe 程序快速增加桌面快捷键

    #!/bin/bashmyfile=$NAUTILUS_SCRIPT_SELECTED_FILE_PATHSmyfilename=${myfile##*/}myfilename=${myfilenam ...

  10. 点击checkbox，触发事件

    时间选择: 起始时间:<input type="text" value="2016-03-21 12:24:10" id="starttime& ...