jQuery（八）选择器与选择方法
九、jQuery selector and selection method
本节深入学习jQuery的选择器语法，以及用来改善和增加选择元素的多个方法。
1、jQuery选择器
选择器语法有三层。第一层是简单的选择器，如"#test"，"div"， "div.note"；第二层是用连接符连起来的简单选取器，如："div.noet>p"；第三层是由多个第一层或者第二层选择器用逗号分隔的列表，形成一个选择器组。最通常的用法是把选择器组传递到$选择函数中。
(1) 简单选择器
一个简单选择器是以一个tag类型开始的（显式或者隐式）。比如只关心<p>元素，就使用"p"，如果对元素类型不关心，就使用"*"。如果一个简单选择器开头不是一个tag名，那么默认的是使用“*”。
tag类型表示文档中待选元素的初始集合，后面跟零个或者多个过滤器，过滤器按从左到右出现的应用的，每一个过滤器缩小了待选元素集合的范围。jQuery支持的过滤器有：
#id，.class，[attr]，[attr=val]，[attr!=val]，[attr^=val]，[attr*=val]，[attr~=val]，[attr|=val]，:animated，:button，:checkbox，:checked，:contains(text)，:disabled，:empty，:enabled，:eq(n)，:even，:file，:first，:first-child，:gt(n)，:has(sel)，:header，:hidden，:image，:input，:last，:last-child，:lt(n)，:not(sel)，:nth(n)，:nth-child(n)，:odd，:only-child，:parent，:password，:radio，:reset，:select，:submit，:text，:visible
例子：p:nth-child(3n+1):text(JavaScript):not(:has(a))
#id前面不带tag类型，效率更高。其他的能够带上tag类型的最好都加上，比如：input:radio比:radio效果更高，虽然他们的结果一样。
(2) 连接符
简单选择器可以通过连接符连起来，代表文档树中元素之前的关系。jQuery选择器支持的连接符如下，这些和CSS选择器连接符是一样的：
A B //空格连接，表示匹配B的元素，B的父亲节点要匹配A（不需要是直接父亲节点）。
A>B //匹配B，B的直接父亲节点匹配A
A+B //匹配B，B的上一个兄弟节点匹配A，A和B必须挨着。
A~B //匹配B，B前面有有一个兄弟节点匹配A，A和B可能不是挨着的。
例子：（连接符可以连接多个简单的选择器，按从左到右的顺序。
"blockquote i"，"ol>li"，"#output+*"，"div.note>h1+p"
(3) 选择器组
选择器组，是我们传递到函数$()中的选择器，它仅仅是由逗号分隔的多个简单选择器和选择器连接。如：
"h1,h2,h3" //匹配<h1>,<h2><h3>
"div.note,p.note" //匹配具有属性class="note"的<div> , <p>
"body>p,div.note>p" //匹配<body>,<div class="note">中的<p>子节点
2、选择方法
除了$()函数支持的选择器语法玩，jQuery还提供了一些选择方法。这些方法在选择元素的基础上进行进一步的选择。
以下方法是对已有的选择集的集合操作，新的选择集是原来选择集的子集（add除外）
（1）first(),last(),eq()：这些方法很多提供的是和语法一样的功能
var paras=$("p");paras.first();paras.last();paras.eq(1);paras.eq(-2);paras[1]
（2）slice(): 功能和Array.slice()的一样。
paras.slice(2,5); paras.slice(-3);
（3）filter()：通用的过滤方法，3中调用方式：
传入一个选择器，表示在选择集的基础上进一步选择符号选择器的元素，如：$("div").filter(".note") 等价于：$("div.note")
传入一个jQuery对象，把两个对象的交集作为一个新的jQuery对象返回，如：$("div").filter($(".note")) 等价于：$("div.note")
传递一个谓词函数，返回选择集中符合谓词函数的元素，如：$("div").filter(function(idx){return idx%2==0}) 等价于 $("div:even");
（4）not()：用法和filter一样，只是逻辑是相反的。
（5）has()：子元素满足参数
传入一个选择器，表示在jQuery对象的元素中选择存在子元素匹配传入的选择器的元素，传入一个文档元素，表示在jQuery对象的元素中选择存在子元素等于传入的元素的元素。如：
$("p").has("a[href]"); //paragraphs that incude links
（6）add(): 两个选择集相加，去掉重复的。除了函数以外的任何可以传递给$()的参数都可以传递给add()。如：选择所要的<div>和<p>元素的几种方法：
$("div,p"); $("div").add("p"); $("div").add($("p")); $("div").add(document.getElementsByTagName("p"));
以下的方法是以选择集作为上下文，可以选择在选择集中不存在的元素，新的集合与原来的集合没有包含关系。
（7）find(): 在选择集的基础上进一步查找，而非过滤。查找可能找出新的元素，过滤是在已有的元素中进行过滤。如：$("div").find("p") 等同于： $("div p");
（8）children(): 在选择集中查找元素的直接子元素，可用selector过滤，如：$("#header,#footer").children("span") 等同于：$("#header>span,#footer>span");
（9）contents(): 和children类似，不过返回的是所有的子节点，包括文本节点。不能传递一个selector参数。
（10）next(), prev()：选择后一个或者前一个兄弟节点（如果存在的话），可用selector过滤。如：$("h1").next("p") ，等同于$("h1+p");
（11）nextAll(), prevAll(), siblings(): 选择后面或者前面或者所有的兄弟节点（如果存在的话），节点不认为是它本身的兄弟节点。可用selector过滤。
（12）nextUtil(), prevUtil(): 1.4及以后的jQuery版本，表示后面或者前面直到匹配selector为止的兄弟节点，没有selector的话，等价于nextAll和prevAll
（13）parent(), parents(), parentsUtil(), closest(): 查找一个父节点，所有父节点，直到满足selector的所有父节点，最近的父节点。
下面的方法是回到上一次的选择集，为了便于方法的链式调用，大部分的jQuery对象的方法都返回jQuery对象本身，但是本节中的方法，返回的都是一个新的jQuery对象。虽然还是可以链式地调用方法，不过要记住的是，后面的方法和前面的方法的调用对象是不同的。其实本节中的方法返回的新的jQuery对象中保存了旧的jQuery对象的引用，这样其实形成了一个jQuery对象链表或者栈。
（14）end(): 这个方法是在jQuery对象栈上执行出栈操作，返回jQuery对象上保存的旧的jQuery对象。如：
var divs=$("div"); var paras=div.find("p"); paras.addClass("highlight");div.css("border","solid black 1px");使用方法链可以写成：
$("div").find("p").addClass("highlight").end().css("border","solid black 1px");
（15）pushStack(): 你也可以手动把一个元素集作为数组或者一个类数组对象压到jQuery对象栈中，压入的对象变成当前的jQuery对象，使用end()可以回到原来的对象。如：
var sel=$("div"); sel.pushStack(document.getElementByTagName("p")); sel.end();
（16）andSelf(): 返回一个新的jQuery对象，对象包含当前jQuery对象的选择集和栈中前一个jQuery对象选择集，去掉重复元素。当然这个方法可能起名为andPrev更好，不过事实就是当前和前一个的合集。
如：$("div").find("p").andSelf(). //找到所有的div以及div中的p，然后合并
addClass("highlight"). //所有元素都highlight
end().end(). //出栈2次回到div选择集
css("border","solid black 1px"); //给div一个边框
