到底什么是选择器？通过常接触的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 -- 教你如何轻松学习Swift语法(二)

    前言:swift语法基础篇(二)来了,想学习swift的朋友可以拿去参考哦,有兴趣可以相互探讨,共同学习哦.      一.可选类型(重点内容)   1.什么是可选类型?        1.1在OC开 ...

  2. 湖大OJ-实验C----NFA转换为DFA

    实验C----NFA转换为DFA Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit us ...

  3. 【java开发系列】—— struts2简单入门示例

    前言 最近正好有时间总结一下,过去的知识历程,虽说东西都是入门级的,高手肯定是不屑一顾了,但是对于初次涉猎的小白们,还是可以提供点参考的. struts2其实就是为我们封装了servlet,简化了js ...

  4. Java中内存中的Heap、Stack与程序运行的关系

    堆和栈的内存管理 栈的内存管理是顺序分配的,而且定长,不存在内存回收问题:而堆 则是随机分配内存,不定长度,存在内存分配和回收的问题:堆内存和栈内存的区别可以用如下的比喻来看出:使用堆内存就象是自己动 ...

  5. [firefox]在Debian7及其衍生版下安装firefox

    Easy way to install Firefox browser on Debian 7 wheezy Debian by default comes with Iceweasel web br ...

  6. POJ - 2339 Rock, Scissors, Paper

    初看题目时就发了个错误,我因为没有耐心看题而不了解题目本身的意思,找不到做题的突破口,即使看了一些题解,还是没有想到方法. 后来在去问安叔,安叔一语道破天机,问我有没有搞清题目的意思,我才恍然大悟,做 ...

  7. 十一、Java基础---------内部类与匿名内部类

    内部类分为普通内部类(有名)和匿名内部类.普通内部类分为成员内部类.局部内部类.静态内部类(嵌套内部类).顾名思义,内部类就是定义在一个类内部的类.什么时候都会使用内部类呢?当我们定义一个类,发现内部 ...

  8. jenkins+gerrit

    Verified 功能 http://www.cnblogs.com/zhanchenjin/p/5032218.html

  9. androidBroadCast总结

    BoradCast广播1.接受广播 BroadCastReceiver(接收系统的广播) 1-1:电话的广播 1-1-1:拨打电话的广播 1.创建一个类,继承BoradcastReceiver 2.重 ...

  10. Shader的自定义特性使用

    使用自定义特性关键字,可以动态对Shader某一部分代码进行开关操作 shader(定义了KEYWORD1特性): 定义:#pragma shader_feature KEYWORD1 判断:#ifd ...