到底什么是选择器？通过常接触的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. Java基础之在窗口中绘图——渐变填充（GradientApplet 1）

    Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.*; @SuppressWarnings("s ...

  2. c# signalr聊天室开源资料

    SignalR+LayIM源码: http://www.cnblogs.com/panzi/p/5742089.html 钉钉客户端源码: http://www.cnblogs.com/loveson ...

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

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

  4. Hibernate Validator验证标签说明

    Hibernate Validator是JSR-303的一个实现. 在FormBean里添加Hibernate Validator的注解,与定义一个校验类的做法相比.注解更加简洁.灵活. Bean V ...

  5. property_自己编写一个读取Property文件的Util类

    读取property文件的Util类: 所需jar包: 编写PropertiesUtil类: package com.west.util.property; import java.io.InputS ...

  6. HttpClient请求返回JSON、图片

    /** * Created by RongGuang on 2015/9/19. */ public class RongHttp { /** * Http Post请求 * @param url * ...

  7. [attribute=value] 匹配给定的属性是某个特定值的元素

    描述: 查找所有 name 属性是 newsletter 的 input 元素 HTML 代码: <input type="checkbox" name="news ...

  8. SalesForce 入门

    标签: Salesforce.com 一开始是一个云端的销售自动化(Sales Force Automation, SFA)以及客户关系管理工具(Customer Relationship Manag ...

  9. 公历和农历转换JS代码

    <!-- function CalConv(M) { FIRSTYEAR = 1936; LASTYEAR = 2031; LunarCal = [ new tagLunarCal(23, 3, ...

  10. 至强CPU性能排行，从X3210起，由低至高排列。

    X3210X3220E5410E5506X5355X3320E5507X5365E5-2603E3-1220LE5-2403E5607X3330L5506X3230L5420E5-2407W3520E ...