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

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

2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

3. 如果子元素只有一个的话，:first-child与:last-child是同一个

4.  :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

jQuery选择器之表单元素选择器

//查找所有div中，属性name=p1的div元素

         $("div[name=p1]").css("border", "3px groove red"); 

 //查找所有div中，有属性p2的div元素

        $("div[p2]").css("border", "3px groove blue"); 

//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

        $('div[name|="-"]').css("border", "3px groove #00FF00"); 

//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

        $('div[name~="a"]').css("border", "3px groove #668B8B"); 

 //查找所有div中，属性name的值是用imooc开头的

         $("div[name^=imooc]").css("border", "3px groove red"); 

//查找所有div中，属性name的值是用imooc结尾的

         $("div[name$=imooc]").css("border", "3px groove blue"); 

//查找所有div中，有属性testattr中的值没有包含"true"的div

        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

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

2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

 仔细观察层级选择器之间还是有很多相似与不同点

1. 层级选择器都有一个参考节点

2. 后代选择器包含子选择器的选择的内容

3. 一般兄弟选择器包含相邻兄弟选择的内容

4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

描述：

$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到

元素选择器：根据给定（html）标记名称选择所有的元素

描述：

$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

右边编辑器代码所示：

第一组：通过getElementsByTagName方法得到页面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的border样式

第二组：同样的效果，$("p")选取所有的<p>元素，通过css方法直接赋予样式

类选择器，顾名思义，通过class样式类名来获取节点

描述：

$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

右边实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较

id选择器：一个用来查找的ID，即元素的id属性

$( "#id" )

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

jQuery的处理：

var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。