2019独角兽企业重金招聘Python工程师标准>>> 

    jQuery与CSS在选择器方面，有很多的相似之处，本文稍加总结,方便对比使用。

注：本文以jQuery1.9.1版本和CSS3为例进行说明，CSS在选择器方面存在 CSS 版本适应问题，请自行前往http://www.w3school.com.cn/cssref/css_selectors.asp 查看各选择器的 CSS 版本适应情况。

1 jQuery的版本

    jQuery 分 3 个系列版本 1.x 、 2.x与3.x，主要的区别：a、2.x与3.x版本不再兼容IE6、7、8 b、2.x与3.x版本为移动端做了优化c、2.x与3.x版本由于减少了一些代码，比 jQuery 1.x 更小且更快。（引用自：http://www.imooc.com/code/8066 涉及3.x的内容为本人添加）1.x的最新版本是1.12.42.x的最新版本是2.2.41.12 and 2.2 分支只会维护现有功能、不会再引入新功能，未来主流分支是3.x,目前最新版本是3.1.0 (引用自：http://blog.jquery.com/)

2 jQuery对象与DOM对象

类型 jQuery对象 DOM对象
定义 jQuery方法包装后的对象 DOM对象就是一个单独的DOM元素
产生 通过jQuery方法——即$()——包装后的对象，即是jQuery对象 通过标准JavaScript提供的原生方法得到的DOM元素就是DOM对象
相同点 都可以操作DOM元素  
两者关系 jQuery对象是一个类数组的对象,这个对象里面其实是包含了DOM对象的信息的,然后封装了很多jQuery的操作方法  

3 jQuery对象与DOM对象的转换

类型 jQuery对象转换为DOM对象 DOM对象转换为jQuery对象
方法一 $('div')[0].style.color = 'red' $(document.getElementsByTagName('div'))
方法二 $('div').get(0).style.color = 'red' 无
含义 利用数组下标或取到jQuery对象中的DOM对象(jQuery对象转化成DOM对象方法一，因为jQuery 对象是一个类数组结构，可以通过数组下标找到第N个子元素，这些子元素都是DOM对象)；通过get方法获取到jQuery对象中的DOM对象转化成(jQuery对象转化成DOM对象二，get方法其实也是利用下标实现的) $()函数的参数如果是一个DOM对象，该方法就会把这个DOM对象给转换成一个新的jQuery对象

3 基本选择器

基本选择器包括：标签选择器、ID选择器、类选择器、通用选择器、群组选择器五类

类型 CSS JQuery 含义
标签选择器 div{} $(‘div’) 选择所有div元素
ID选择器 di{} $(‘#di’) 选择id=di的元素
类选择器 .di{} $(‘.di’) 选择所有class=di的元素
通用选择器 *{} $(‘*’) 选择所有元素
群组选择器 E,F{} $(‘E,F’) 选择所有E和F类型的元素

CSS代码示例请见：http://www.w3cplus.com/css3/basic-selectors

4 层级选择器

层级选择器用于处理节点与节点之间存在的父子、兄弟、祖孙关系

类型 CSS JQuery 含义
直接子元素选择器 parent>child $('parent>child') 选择parent元素下的第一级子元素child
后代元素选择器(空格) ancestor(空格)descendant $('ancestor descendant') 选择ancestor元素下的所有子孙元素descendant
直接相邻兄弟元素选择器 prev+next $('prev+next') 选择紧邻prev选择器之后的兄弟元素next
一般相邻元素选择器 prev~siblings $('prev~siblings') 选择prev选择器之后的所有兄弟元素
代码示例 .left > div{background-color: #ccc;} $('.left > div').css("backgroundColor", "#CCC"); 将.left 下的第一级子元素背景色设置为#CCC

示例代码如下：

 <style>.prev + div{background: #ccc;}</style><body><span class="prev">选择器span元素</span><div>prev后第一个兄弟节点div</div><script type="text/javascript">//一般相邻选择器,选取prev后面的所有的div兄弟节点$('.prev ~ div').css("border", "3px groove blue");</script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

5 属性选择器

用于根据属性筛选元素

类型 CSS JQuery 含义
E[att] E[att] $("E[att]") 选择E元素集合中 带有att属性的E元素
E[att=val] E[att=val] $("E[att=val]") 选择E元素集合中，属性att=val的E元素
E[att|=val] E[att|=val] $("E[att|=val]") 选择E元素集合中，属性att等于val或以val-为前缀的E元素
E[att~=val] E[att~=val] $("E[att~=val]") 选择E元素集合中，属性att等于val或以空格分隔的属性值中包含val的E元素
E[att^=val] E[att^=val] $('E[att^=val]') 选择E元素集合中，属性att的属性值是以val开头的E元素
E[att$=val] E[att$=val] $('E[att$=val]') 选择E元素集合中，属性att的属性值是以val结尾的E元素,注：这个比较区别大小写
E[att*=val] E[att*=val] $('E[att*=val]') 选择E元素集合中，属性att的属性值包含val字符串的E元素，如avalb即满足条件
E[att!=val] 无此用法 $("E[att!=val]") 选择E元素集合中，不存在属性att，或者属性att的属性值不等于val的E元素

CSS示例代码请见：http://www.w3cplus.com/css3/attribute-selectors

jQuery示例代码如下：

<body><a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a><script type="text/javascript">$(function(){$('a[class^=icon]').css("backgroundColor","green")})</script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

6 筛选选择器

伪类选择器/筛选选择器：选择html不存在的标签的选择器，或选择标签某种状态的选择器。均以冒号开头，冒号前须有具体元素(如没有元素则表示选择全部元素)。

筛选元素本身

第一组

类型 CSS JQuery 含义
:root :root{} $(“:root”) 选择所有元素的根元素，即<html>元素
:not E:not(p){} $(“E:not(p)”) 选择E元素(集合)中除了p之外的E元素
:first 无此用法 $(‘E:first’) 选择E元素(集合)中的第一个E元素
:last 无此用法 $(‘E:last’) 选择E元素(集合)中的最后一个E元素
:even 无此用法 $(‘E:even’) 选择E元素(集合)中的索引为偶数的E元素，n从0开始
:odd 无此用法 $(‘E:odd’) 选择E元素(集合)中的索引为奇数的E元素，n从0开始
:eq(n) 无此用法 $(‘E:eq(n)’) 选择E元素(集合)中的索引等于n的E元素,n从0开始
:lt(n) 无此用法 $(“E:lt(n)”) 选择E元素(集合)中索引小于n的E元素,n从0开始
:gt(n) 无此用法 $(“E:gt(n)”) 选择E元素(集合)中索引大于n的E元素,n从0开始
:header 无此用法 $(“:header”) 选择所有标题元素，像h1、h2、h3等
:animated 无此用法 $(“E:animated”) 选择E元素(集合)中,正在执行动画效果的E元素
:target E:target 无此用法 匹配页面的url的标志符(如href=#E)指定的id=E的元素

第二组

类型 CSS JQuery 含义
:first-child E:first-child $('E:first-child') 选择E元素集合中的那些E元素——当它们为其父元素中的第一个直接子元素
:last-child E:last-child $('E:last-child') 选择E元素集合中的那些E元素——当它们为其父元素中的最后一个直接子元素
:only-child E:only-child $('E:only-child') 选择E元素集合中的那些E元素——当它们为其父元素中的唯一一个直接子元素
:nth-child(n) E:nth-child(n) $('E:nth-child(n)') 选择E元素集合的那些E元素——当它们为其父级元素中的第n个直接子元素，n从1开始
:first-of-type E:first-of-type $('E:first-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的第一个该类型的元素
:last-of-type E:last-of-type $('E:last-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的最后一个该类型的元素
:only-of-type E:only-of-type $('E:only-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的唯一一个该类型的元素
:nth-of-type(n) E:nth-of-type(n) $('E:nth-of-type(n)') 选择E元素集合中那些E元素——当它们为其父元素中的第n个该类型的元素，n从1开始

注 :first只匹配一个单独的元素，但:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1);last同理。

其中，:not与:empty的示例代码如下：

<script type="text/javascript">
$(function(){                          $("div:not([class=demo])").css("backgroundColor","blue");$("div:empty").css("backgroundColor","blue");})
</script>
<div class="demo">这是一个div<!-- 空div --><div></div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

:target的示例代码如下：

<style>#brand:target p {background: orange;color: #fff;}
</style>
<div class="menuSection" id="brand"><h2><a href="#brand">Brand</a></h2><p>content for Brand</p>
</div>
<!--
1、触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码a元素中href="#brand"的#brand
2、:target就是用来匹配id=“brand”的元素,上面代码中是那个div元素。-->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

根据可见性筛选元素

类型 CSS JQuery 含义
:visible 无此用法 $(‘E:visible’) 选择E元素集合中，可见的E元素
:hidden 无此用法 $(‘E:hidden’) 选择E元素集合中，不可见的E元素

jquery认为不可见的元素包括：设置了 display:none; 与 元素的宽度和高度都显式设置为0 的元素;

虽然如下代码也可以隐藏元素，但jquery中认为其是可见的。这是因为jquery中有一原则:

如元素占据文档中一定的空间,则元素被认为是可见的。

所以元素的visibility: hidden 或 opacity: 0 被jquery认为是可见的，因为他们仍然占用空间布局。

 style="visibility:hidden;opacity:0";
  • 1
  • 1

根据内容筛选元素

类型 CSS JQuery 含义
:empty E:empty $(“E:empty”) 选择E元素集合中 没有任何文本内容和子元素的E元素,哪怕是一个空格也没有
:parent E:parent $(“E:parent) 选择E元素集合中 包含任何文本内容或子元素的E元素
:contains 无此用法 $(‘E:contains(text)’) 选择E元素集合中 文本内容包含参数”text”的E元素，如果包含的文本在E元素的子孙元素中，该E元素也会被选中
:has 无此用法 $(‘E:has(selector)’) 选择E元素集合中 包含”selector”子孙元素的E元素

注：:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

7 表单筛选选择器

筛选某类型的表单元素

类型 CSS JQuery 含义
:input 无此用法 $(':input') 选中所有 input, textarea, select 和 button 元素
:text 无此用法 $('E:text') 选择E元素集合中,其type属性等于text的E元素，等价于$('E[type=text]')
:password 无此用法 $('E:password') 选择E元素集合中,其type属性等于password的E元素，等价于$('E[type=password]')
:radio 无此用法 $('E:radio') 选择E元素集合中,其type属性等于radio(单选按钮)的E元素，等价于$('E[type=radio]')
:checkbox 无此用法 $('E:checkbox') 选择E元素集合中,其type属性等于checkbox(复选按钮)的E元素，等价于$('E[type=checkbox]')
:submit 无此用法 $('E:submit') 选择E元素集合中,其type属性等于submit(提交按钮)的E元素，等价于$('E[type=submit]')
:image 无此用法 $('E:image') 选择E元素集合中,其type属性等于image(图像按钮)的E元素，等价于$('E[type=image]')
:button 无此用法 $('E:button') 选择E元素集合中,其type属性等于button(按钮)的E元素，等价于$('E[type=button]')
:reset 无此用法 $('E:reset') 选择E元素集合中,其type属性等于reset(重置按钮)的E元素，等价于$('E[type=reset]')
:file 无此用法 $('E:file') 选择E元素集合中,其type属性等于file(文件按钮)的E元素，等价于$('E[type=file]')

注：除了input筛选选择器(即:input)，几乎每个表单筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

示例代码如下：

<script type="text/javascript">$('input:text').css("backgroundColor", "#A2CD5A");$(':submit').css("backgroundColor", "#A2CD5A");
</script>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

筛选某属性的表单元素

类型 CSS JQuery 含义
:enabled E:enabled $('E:enabled') 选择E元素集合中,被启用（即未被禁用）的E元素，等价于$('E[enabled=true]')
:disabled E:disabled $('E:disabled') 选择E元素集合中,被禁用的E元素，等价于$('E[disabled=disabled]')
:checked E:checked $('E:checked') 选择E元素集合中,被勾选中(单选框,复选框)的E元素，等价于$('E[checked]')
:selected 无此用法 $('option:selected') 选择option元素集合中,有selected属性被选中的option元素，等价于$('option[selected]')

示例代码如下：

<form><input type="text" value="设置disabled" disabled="disabled" /><select name="garden" multiple="multiple"><option>imooc</option><option selected="selected">慕课网</option><option>aaron</option><option selected="selected">博客园</option></select></form><script type="text/javascript">$('input:disabled').css("border", "2px groove blue");$('option:selected').css("border", "2px groove blue");</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

8 伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;在css3中对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。

两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。

到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而已。

上述引用自：http://www.w3cplus.com/css3/pseudo-class-selector 
关于伪元素的更多内容也请查看此博客

类型 CSS JQuery 含义
::selection E::selection 无此用法 修改E元素中当用鼠标选择文本时的文本的样式
::first-line E::first-line 无此用法 选择E元素中的第一行
::first-letter E::first-letter 无此用法 选择E元素中的第一个字母
::before E::before 无此用法 在E元素的前面插入内容,多用于清除浮动
::after E::after 无此用法 在E元素的后面插入内容,多用于清除浮动

总结

jQuery与CSS3的选择器选中的永远都是“紧挨冒号前的元素”，“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点；

1、读懂jQuery与CSS3的选择器的方法：

1、先找冒号
2、看紧挨冒号前的元素，空则表示所有元素
3、再看紧挨冒号后的伪选择器字面含义
4、其他选择器之间一般都是层级关系综合起来前3步就是该选择器的含义：
————选中的永远是“紧挨冒号前的元素”；
————“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点；如E:first的含义：        选中E元素(它是第一个E元素),只会选中一个E元素；
如E:first-child的含义:   选中E元素(它是[其父元素下的]第一个直接子元素) ，可能会选中多个E元素；
如E:nth-child(n)的含义： 选中E元素(它是[其父元素下的]第n个直接子元素)
如E:nth-of-type(n)的含义： 选中E元素(它是[其父元素下的]第n个同类型的直接子元素)

2、使用CSS隐藏一个元素的七种方法

    CSS display的值是none。type="hidden"的表单元素。宽度和高度都显式设置为0。一个祖先元素是隐藏的，该元素是不会在页面上显示CSS visibility的值是hiddenCSS opacity的指是0

3、两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。目前来说，这两种方式在伪元素上都是被接受的。

参考文档

http://www.imooc.com/learn/9 
http://www.imooc.com/learn/33 
http://www.imooc.com/learn/418 
http://www.w3school.com.cn/cssref/css_selectors.asp

转载于:https://my.oschina.net/u/2396236/blog/1498624

jQuery与CSS3的选择器相关推荐

  1. jQuery框架学习第二天：jQuery中万能的选择器

    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

  2. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  3. [乐意黎转载]从零开始学习jQuery (二) 万能的选择器

    一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程 ...

  4. jQuery之知识二-选择器

    jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery 选择器实现了 CS ...

  5. html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效

    这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...

  6. html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器

    一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...

  7. php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色

    nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...

  8. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. jquery和css3打造超梦幻的三维动画背景

    今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果.绿色的小原点由远到近,由近到远一种飞跃效果.效果非常好看,我们一起看下效果图: 在线预览   源码下载 我们一起看下实现的代码. ...

最新文章

  1. 程序员的朋友圈应该是这样的。。。
  2. 文字转语音引擎未就绪_5个文字转语音网站，其中最强堪比真人发音
  3. ubuntu系统声音_今日热闻 | 小米11有望首发骁龙875、折叠iPhone测试、新规禁止网购忽悠打折、印度真米粉、M1 Mac运行Ubuntu...
  4. 干货 ▏为什么你的产品或界面总被吐槽？
  5. 利用FRIDA攻击Android应用程序（二）
  6. Django从理论到实战(part36)--QuerySet转换SQL
  7. React with Webpack -1: 介绍Helloworld
  8. 9、C语言 —— 指针的用处
  9. php tls,使用TLS在PHP中建立连接
  10. 转载：vc6.0 打开文件的时候出现Microsoft Visual C++：MSDEV.EXE 应用程序错误
  11. 陕西省高等数学竞赛_陕西省高等数学竞赛试题答案
  12. 中国联通517活动-沃福卡-技术分解实现方案
  13. 机器学习基础概念（三）：归纳与演绎
  14. 抓取日志的小工具（命令）Adb logcat
  15. 利用Excel实现数据抽样
  16. 分辨率与观赏距离和屏幕尺寸的关系
  17. Python PyQt5
  18. mosquitto入门教程
  19. @Transactional注解什么情况会失效？
  20. pgadmin4|解决pgadmin4的sql备份文件路径无法创建的问题

热门文章

  1. linux x window system下载,linux的x window system
  2. 判断三角形java代码_打基础之LeetCode算法题第72篇：最大的三角形周长问题
  3. 如何查看 el-form-item 的prop属性_PHP 7.4中的类型属性（Typed Properties）
  4. 南昌职高计算机录取分数线,南昌运输职业技术学校2021年招生录取分数线
  5. Verilog设计实例（4）详解全类别加法器（一）
  6. HDLBits 系列（36）Arbitration circuit implemented by FSM
  7. FPGA开发之RAM IP的使用
  8. Qt的Android应用消除启动黑屏
  9. HTML5 canvas drawImage() 方法记录
  10. SSAS系列——【03】多维数据（多维数据集对象）