到底什么是选择器？通过常接触的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. ios每日一发--仿侧边抽屉效果

    效果图如下 代码实现以及思路下面分析: 代码创建导航控制器 Appdelegate.m中 #import "AppDelegate.h" #import "ViewCon ...

  2. Java生成和操作Excel文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  3. 20145320《Java程序设计》第二次实验报告

    20145320<Java程序设计>第二次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.12 15: ...

  4. SQL语句中：UNION与UNION ALL的区别

    有些人看到题目,瞬间觉得楼主也太弱了吧,这种问题也要拿出来写,这种问题 随便会点sql 的人基本都会 Union   是会删除冗余数据 Union ALL 不会删除冗余数据 将所有的结果都展现给用户 ...

  5. 各大Oj平台介绍 刷题平台

    https://leetcode.com/ http://www.cnblogs.com/lzmfywz/archive/2012/02/07/2342010.html 1.题库与网站资源题库-在线提 ...

  6. 如何保存CONSOLE LOG

    很早以前就想过问题,但因为我们一直有自动化程序去做,所以没仔细研究.   今天学习了一下,其实很简单,在sdsf.da 里面搜索master会看到下面这样一个TASK *MASTER* STC0000 ...

  7. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

  8. JS控制checkbox全选、取消全选、删除功能的代码贴出来。。

    function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...

  9. :radio :checkbox

    匹配所有单选按钮   示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...

  10. HTML5——语音输入

    一.使用方式: <input type="text" x-webkit-speech /> 二.属性 1.lang属性:语言种类 <input type=&quo ...