利用基本CSS选择器

功能强大，跨浏览器的元素选择方法，包括

1. 通过元素ID进行选择                            #specialID    //匹配id为specialID的元素
2. 通过CSS类名进行选择                        .specialClass          //匹配拥有CSS类specialClass的元素
3. 通过标签名称进行选择                        a                   //匹配所有链接（<a>）元素
4. 通过页面元素的DOM层次结构进行选择               p a.specialClass       //匹配拥有CSS类specialClass、在<p>元素内声明的链接元素

为了利用jQuery来选择元素，可将CSS选择器包含在$( ) 里，如   $(“p a.specialClass”)

利用子选择器、容器选择器和特性选择器

      1.子选择器

<ul class="myList"> 

 <li><a href="http://jquery.com">jQuery supports</a>   

 <ul>     

 <li><a href="css1">CSS1</a></li>      

<li><a href="css2">CSS2</a></li>      

<li><a href="css3">CSS3</a></li>     

 <li>Basic XPath</li>    

</ul>  

</li> 

 <li>jQuery also supports    

<ul>      <li>Custom selectors</li>      <li>Form selectors</li>    </ul>  

</li>

</ul>

$("ul.myList li a")会将上面代码中所有红色显示的元素都选择出来；

而$("ul.myList > li > a") 仅仅是选择直接的子节点，即只选择橙色背景的部分。

子选择器就是将父节点和直接子节点用 > 隔开，只匹配直接子节点的元素而不选择内部包含的更深层次的元素

2.特性选择器

$(a[href^http://]) 匹配以http://开头的链接，这种事指向外部网站的链接。 （^）用于匹配出现在某个值的开头

要想匹配特定的元素而不管特性值是什么，可用form[method],这个匹配拥有现行method特性的任何<form>元素

eg input[type=text] 匹配type特性值为text的所有<input>元素特性值以……结尾的选择器

a[href$=.pdf] 找到所有引用PDF文件的链接特性值的任何部位包含某个字符串的元素

a[href=*jquery.com] 引用jQuery网站的所有<a>元素

div[title^=my] title特性值以my开头的所有<div>元素

   3.容器选择器 

 li:has(a) 当<li>中含有链接的时候才被选择。注意这与li a 是不同的，后者是匹配<li>元素中所有的<a>元素

jQuery支持的基本CSS选择器

注意，jQuery只支持一层嵌套，比如foo:not(bar:has(baz))可以，但是foo:not(bar:has(baz:eq(2)))就不行了

• *                匹配任何元素
• E               匹配标签为E的所有元素
• E  F           匹配标签名称为F，作为E的后代节点的所有元素
• E>F           标签名称为F、作为E的直接子节点的所有元素
• E+F           前面是临近兄弟节点E的所有元素F（E和F紧挨着）
• E~F           前面是任何兄弟节点E的所有元素    （E和F可以不紧挨着）
• E:has(F)    匹配标签名称为E、至少有一个标签名称为F的后代节点的所有元素
• E.C            类名C的所有元素E。  .C等效于*.C
• E#I             匹配id特性值为I的元素E
• E[A]           带有特性A的所有元素E，不管特性A的值是什么
• E[A=V]       所有特性A的值为V的所有元素E
• E[A^=V]      特性A的值以V开头的元素E
• E[A$=V]      特新A的值以V结尾的元素E
• E[A*V]         特新A的值包含V的元素E

通过位置选择

• :first                                页面的最先匹配
• :last                                页面的最后匹配
• :first-child                       最先的子元素
• :last-child                       最后的子元素
• :only-child                      返回没有兄弟节点的所有元素
• :nth-child(n)                   第n个子节点
• :nth-child(even|odd)      偶数或奇数的子节点
• :nth-child(Xn+Y)            根据传入公式计算的第n个子节点
• :even 或  :odd               页面范围内偶数或奇数的匹配元素
• :eq(n)                           第n个匹配元素（n从0开始）
• :gt(n)                            第n个匹配元素（不包括）之后的元素 ，n从0开始
• :lt(n)                             第n个匹配元素（不包括）之前的元素 ，n从0开始

PS：除了:nth-child从1开始记数外，其他的都遵循从0开始记数的原则

利用自定义jQuery选择器

某些情况下要根据CSS规则没有预料到的特征去选择元素，此时可利用jQuery自定义的筛选选择器。

• :animated     选择当前处于动态控制下的元素
• :button     匹配所有button标签，包括html5的button 标签和 <input type="button" vaule="ss"/>
• :checkbox     只选择复选框元素（input[type=checkbox]）　
• :checked     只选择已选择的复选框
• :contains(text) 包含文本的元素，*一直匹配到他的所有祖先元素，包括html. Div:contains(text)一直匹配的div，
• :disabled      只选择在页面上已经禁用的表单元素
• :enabled     只选择在页面上已经启用的表单元素　
• :file         匹配所有的文件元素（input[type=file]）
• :header     选择标题  从<h1>到<h6>
• :hidden     匹配隐藏
• :image         匹配图片元素
• :input     　    匹配表单元素（<input>< select><textarea><button>）
• :not(filter)     对指定的选择器进行反向筛选
• :parent     匹配有子元素的元素，排除空元素
• :password     匹配口令元素（input[type=password]）
• :radio     　    只选择单选按钮元素
• :reset     　    只选择复位按钮元素（input[type=reset]或button(type=reset)）
• :selected     选择已选中的选项元素
• :submit     选择提交按钮元素
• :text         选择文本字段元素
• :visible     选择可见元素

eg input:not(:checkbox)

注意筛选选择器和查找选择器之间的区别。前者是缩小正在匹配的元素集合，后者是查找与已选择的元素有某种关系的其他元素，比如后代选择器（空格）、子选择器（>）。

:not可应用到筛选选择器而不能应用到查找选择器中。所以div p:not(:hidden)是正确的 但是div :not(p:hidden)则是不对的

$函数能生成HTML。

$（“<div class='foo'>I have foo!</div><div>I don't </div>”）                       //新建两个Div，一个有foo类，一个没有

.filter(".foo").click(function(){                                            //选择有foo类的div,添加一个方法

alert(“I'm foll!”);

}).end().appendTo("#someParentDiv")";                           //end()还原到包含两个div元素的完整集合；后者添加到一个父div上

确定包装集大小size()            

 eg $('a').size 返回页面中一共有多少个链接元素

从包装集中获取元素 get(index) 和  index(element)

get(index)        获取包装集中一个或所有的匹配元素    $('img[alt]').get(0)=$('img[alt]')[0]  

index(element)      在包装集中查找传入的元素，返回下标，如果没有找到的话返回-1    var n=$('img').index('img#findme')[0]

筛选元素包装集

添加更多元素到包装集    add(expression)允许把多个选择器连接在一起形成“或的关系”    eg $('img[alt]').add('img[title]')=$('img[alt],img[title]')            CSS的逗号运算符不能实现把操作应用到包装集然后添加更多元素到包装集

         add()方法不仅允许把现有元素添加到包装集，还允许接收传入的HTML标记的字符串添加新的元素   eg $('p').add('<div>Hi there!</div>').但要注意这只是添加到包装集而没有添加到DOM中。那个是append()要实现的。

整理包装集的内容       not(expression) 从包装集中删除元素 。 注意此方法使用的选择器仅限于删除任何元素引用的筛选表达式（比如[title*=puppy]），而不能使用元素选择器( 比如，img[title*=puppy] 的img就是要选择特定的元素)

filter(expression)方法利用传入的选择器表达式或筛选函数从包装集中筛选元素。如果传入的是函数，则不满足该函数的元素被删除；如传入的是选择器表达式，不满足该表达式的元素被删除。    eg  $('td').filter(function(){ return this.innerHTML.match(/^\d+$/) })    或者   $('img').addClass('seeThrough').filter('[title*=dog]')

获取包装集的子集          slice(begin,end) 其中，begin下标从0开始，是（begin,end] 的关系，  $('*').slice(2,3)是获取第3个元素的包装集，这与$('*').get(2)不同，后者是获取第三个元素，而不是包装集。   另外，$('*').slice(4)返回的是除前4个元素以外的所有元素的新包装集

利用关系获取包装集

children()    原始包装集的唯一子元素的包装集

contents()   原始包装集的内容的包装集

next()          唯一的下一个兄弟节点的包装集

nextAll()      所有后续兄弟节点的包装集

parent()      直接的父节点的包装集

parents()    一直往上追溯的父节点的包装集

prev()         唯一的上一个兄弟节点的包装集

prevAll()     所有的前序兄弟节点的包装集

siblings()    所有的唯一兄弟元素组成的包装集

其他使用包装集的途径

find(selector)    获取符合表达式的所有元素的新包装集               X.find('p cite') //获取段落内所有引文（<cite>元素）的包装集

contains(text)   获取包含text参数传入的文本字符串的元素组成的新包装集      eg  $('p').contains('Lorem ipsum')

is(selector)       确定包装集是否含有满足表达式的元素   eg var hasImage=$('*').is('img');

管理jQuery链

jQuery命令链具有强大的功能，但是一旦生成新的包装集就无法使用原始包装集，因此提供了end()方法

end()  返回到前一个包装集。jQuery命令链在执行期间将包装集存储在栈内，当使用end命令后，最后一个包装集出栈，让出前一个包装集

andSelf()   合并命令链内最近产生的两个包装集

clone()     得到包装集的副本，这样在副本上进行操作将不会影响到原来的包装集，可以再使用end方法对原包装集进行操作   eg   $('img').clone().appendTo('#someWhere').end().addClass('someClass')