2017年2月14日
jQuery无疑是前端最重要的开源项目，全世界有70%左右的网站都在使用它。它会前端开发者封装了很多原生dom操作方法以及ajax。学好jQuery是成为优秀前端工程师必备技能。今天来了解一下jQuery选择器的概念。
Dom对象与jQuery对象
在实际编码过程中，我们常常会对Dom对象和jquery对象感到困惑，常常会遇到XXX.YYY() is not a function的报错，主要原因就是Dom对象去访问jquery中的方法导致的，因此有必要先对这两个对象做一个区分
1.Dom对象
DOM（Document Object Model）文档对象模型，是可以访问当前文档的API合集，利用它可以访问到文档中的node和element。那么document.getElementById()一定不会陌生吧， 传统我们选取一个元素通常这样做：
var divDom = document.getElementById('testDiv');
var pDoms = document.getElementByTagName('p');
我们经常使用 document.getElementById 方法根据id获取单个Dom对象, 或者使用document.getElementsByTagName 方法根据HTML标签名称获取Dom对象集合.
Dom对象封装很多可用的方法，具体方法可点击查看更多
2.jQuery对象
jquery对象是对Dom对象的一种扩充。在jQuery中，所有对象，无论是一个还是多个，都会被包装成一个jQuery包装集（它是一个数组）。比如，jquery获取仅有一个元素的包装集：
var $dom = $('#mydiv')
jquery包装集都是作为一个对象来调用，jquery封装了很多特有的API，可供开发者使用
3.Dom对象和jQuery对象的转换
（1）Dom对象转jQuery对象
使用jquery的选择器带入jquery构造函数可以很方便的直接获得jquery对象，如获取页面上某个id的p：
var $p = $('#article_title')
以上代码$p就是包含一个元素的jquery包装集
习惯上，我们使用
$符打头的变量来表示jquery包装集
如果我们已经有了一个Dom对象，如：
var divDom = document.getElementById('testDiv');
那么我们可以直接将dom对象传入到jquery构造函数中就可以了：
var $div = $(divDom)
（2）jquery包装集转换为dom对象
首先，我们必须明确jQuery包装集是一个集合，不管它包含了多少个元素，因此我们可以通过索引器来访问其中的元素：
var pDom = $('.title')[0]
注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象!
jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,比如:
$("#testDiv").each(function() { alert(this) })
如果我们需要在循环体中继续使用jquery对象怎么办？那么就需要继续传到jquery构造函数中了：
$("#testDiv").each(function() { $(this).html("blablabla") })
我们在编码过程中，常常会因为dom对象与jquery对象的转换导致一些问题，理清它们之间的区别有助于我们更快更好的编码
jQuery构造函数
jQuery构造函数以四种方式存在
（1）jQuery([selector[, context]])
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。（jquery包装集）
默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。
jQuery()返回一个空的jquery对象
这是jQuery中最重要的函数，几乎所有的操作都是依赖这个构造函数进行的。
（2）jQuery(elements)
将一个或多个Dom对象封装jQuery函数功能(即封装为jQuery包装集)
（3）jQuery(html,[ownerDocument])
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。
（4）jQuery(callback)
$(document).ready()的简写。
选择器
jquery主要有四类的选择器：基本选择器、层叠选择器、过滤选择器以及表单选择器
jquery选择器返回都是jquery对象数据集
可以访问jquery文档查看详情
1.基本选择器
通过标签的id、class、name等基本属性完成标签选择
$('#id')
$('.className')
$('div')
$('selector1,selector2...')
2.层叠选择器
通过dom的层级关系完成选择
$('parent > child') // 选择所有指定“parent”元素中指定的"child"的**直接**子元素。
$('ancestor descendant') // 选择给定的祖先元素的所有后代元素。
$('prev + next') // 选择所有**紧接**在 “prev” 元素后的 “next” 元素
$('prev ~ siblings') // 匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
3.过滤选择器
可以配合使用 .filter(selector) 提高性能
// 基本筛选
:animated // 所有正在执行动画的元素
:eq(index) // 在匹配的集合中选择索引值为index的元素。
:gt(index) // 选择匹配集合中所有大于给定index（索引值）的元素。
:lt(index) // 选择匹配集合中所有索引值小于给定index参数的元素。
:even // 选择索引值为偶数的元素，从 0 开始计数。
:odd // 选择索引值为奇数元素，从 0 开始计数。
:first // 选择第一个匹配的DOM元素。
:header // 选择所有标题元素，像h1, h2, h3 等.
:lang() // 选择指定语言的所有元素。
:last // 选择最后一个匹配的元素。
:not(selector) // 选择所有元素去除不匹配给定的选择器的元素。
:root // 选择该文档的根元素。=> <html>
:target // 选择由文档URI的格式化识别码表示的目标元素。
:hidden // 选择所有隐藏的元素。
:visible // 选择所有可见的元素。
// 内容筛选
:contains(text) // 选择所有包含指定文本的元素。
:empy // 选择所有没有子元素的元素（包括文本节点）。
:has(selector) // 选择元素其中至少包含指定选择器匹配的一个种元素。
:parent // 选择所有含有子元素或者文本的父级元素。
// 属性筛选
[name|="value"] // 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
[name*="value"] // 选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
[name~="value"] // 选择指定属性用空格分隔的值中包含一个给定值的元素。
[name$="value"] // 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
[name="value"] // 选择指定属性是给定值的元素。
[name!="value"] // 选择不存在指定属性，或者指定的属性值不等于给定值的元素。
[name^="value"] // 选择指定属性是以给定字符串开始的元素
[name] // 选择所有具有指定属性的元素，该属性可以是任何值。
[name="value"][name="value2"] // 选择匹配所有指定的属性筛选器的元素
// 子元素筛选
:first-child // 选择所有父级元素下的第一个子元素。 => :nth-child(1)
:first-of-type // 选择所有相同的元素名称的第一个兄弟元素。
:last-child // 选择所有父级元素下的最后一个子元素。
:last-of-type // 选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
:nth-child(n) // 选择的他们所有父元素的第n个子元素。 n从1开始
:nth-last-child(n) // 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-of-type(n) // 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
:nth-last-of-type(n) // 选择所有他们父级兄弟元素下具有相同的元素名的倒数第n个子元素，计数从最后一个元素开始到第一个。
:only-child // 如果某个元素是其父元素的唯一子元素，那么它就会被选中。
:only-of-type // 选择所有没有兄弟元素，且具有相同的元素名称的元素。
4.表单选择器
:button // 选择所有按钮元素和类型为按钮的元素。
:checkbox // 选择所有类型为复选框的元素。
:checked // 匹配所有勾选的元素。
:disabled // 选择所有被禁用的元素。
:enabled // 选择所有可用的（未被禁用的元素）元素。
:focus // 选择当前获取焦点的元素。
:file // 选择所有类型为文件（file）的元素。
:image // 选择所有图像类型的元素。
:input // 选择所有 input, textarea, select 和 button 元素.
:password // 选择所有类型为密码的元素。
:radio // 选择所有类型为单选框的元素。
:reset // 选择所有类型为重置的元素。
:selected // 获取 select 元素中所有被选中的元素。
:submit // 选择所有类型为提交的元素。
:text // 选择所有类型为text的input元素。
