jQuery与CSS3的选择器
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.4
2.x的最新版本是2.2.4
1.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后第一个兄弟节点divdiv>
<script type="text/javascript">
//一般相邻选择器,选取prev后面的所有的div兄弟节点
$('.prev ~ div').css("border", "3px groove blue");
script>
body>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">我类名是icona>
<a href="#" title="我的title是more">我的title是morea>
<script type="text/javascript">
$(function(){
$('a[class^=icon]').css("backgroundColor","green")
})
script>
body>6 筛选选择器
伪类选择器/筛选选择器：选择html不存在的标签的选择器，或选择标签某种状态的选择器。均以冒号开头，冒号前须有具体元素(如没有元素则表示选择全部元素)。
筛选元素本身
第一组
| 类型 | CSS | JQuery | 含义 |
|---|---|---|---|
| :root | :root{} | $(“:root”) | 选择所有元素的根元素，即 |
| :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>:target的示例代码如下：
<style>
#brand:target p {
background: orange;
color: #fff;
}
style>
<div class="menuSection" id="brand">
<h2><a href="#brand">Branda>h2>
<p>content for Brandp>
div>
根据可见性筛选元素
| 类型 | 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"; 根据内容筛选元素
| 类型 | 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>筛选某属性的表单元素
| 类型 | 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>imoocoption>
<option selected="selected">慕课网option>
<option>aaronoption>
<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>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的值是hidden
CSS 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