前端学习JQuery篇01——基本语法（选择器）
基本选择器
#id
.class
element
*
selector1,selector2,selectorN
层级
| selector1 selector2 | 选择selector1的后代元素中的selector2 | $("div #d1") | 选择div元素的后代元素中所有id为d1的元素 |
| selector1>selector2 | 选择selector1的子元素中的selector2 | $("div .divC") | 选择div元素的子元素中所有class为divC的元素 |
| selector1+selector2 | 匹配所有紧接在 prev 元素后的 next 元素(PS:必须是紧接在后的同辈元素) | ||
| selector1~selector2 | 匹配 prev 元素之后的所有 siblings 元素(PS:必须为同辈元素) |
基本筛选器
| :first | 获取匹配的第一个元素 | ||
| :not(selector) | 去除所有与selector匹配的元素在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)） | $("div:not(#div1,#div4)") | 选择所有的div元素除了id为div1和div4的 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数，查找表格的1、3、5...行（即索引值0、2、4...） | ||
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数，查找表格的2、4、6行（即索引值1、3、5...） | ||
| :eq(index) | 匹配一个给定索引值的元素，从 0 开始计数 | $(".divC:eq(0)") | 选择class为divC的第一个元素 |
| :gt(index) | 匹配所有大于给定索引值的元素，从 0 开始计数 | ||
| :lang 1.9+ | :lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。 | $("div:lang(en)") | 匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr"> |
| :last | 获取最后个元素 | ||
| :lt(index） | 匹配所有小于给定索引值的元素，从 0 开始计数 | ||
| :header | 匹配如 h1, h2, h3之类的标题元素（ps：无法在header前面加选择器如div：header） | ||
| :animated | 匹配所有正在执行动画效果的元素 | ||
| :focus | 匹配当前获取焦点的元素。如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择; | 换句话说，$(':focus')等同为$('*:focus') | |
| :root 1.9+ | 选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。 | ||
| :target 1.9+ | 选择由文档URI的格式化识别码表示的目标元素。（PS：这个不寻常的用法，可进一步讨论中找到 W3C CSS specification） |
内容
| :contains(text) | 匹配包含给定文本的元素 | $("p:contains('John')") | 查找所有包含 "John" 的 p 元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | ||
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | ||
| :parent | 匹配含有子元素或者文本的元素 |
可见性
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 | ||
| :visible | 匹配所有的可见元素 |
属性
| [attribute] | 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。 | $("div[id]") | 查找所有含有 id 属性的 div 元素 |
| [attribute=value] | 匹配给定的属性是某个特定值的元素 | $("input[name='newsletter']") | 查找所有 name 属性是 newsletter 的 input 元素 |
| [attribute!=value] | 匹配所有不含有指定的属性，或者属性不等于特定值的元素。（ps：注意！和=不要留空格，会报错） | 此选择器等价于 :not([attr=value]) | |
| [attribute^=value] | 匹配给定的属性是以某些值开始的元素 | ||
| [attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | ||
| [attribute*=value] | 匹配给定的属性是以包含某些值的元素 | ||
| [attrSel1][attrSel2][attrSelN] | 复合属性选择器，需要同时满足多个条件时使用。 | $("input[id][name$='man']") | 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 |
子元素
| selector:first-child | 匹配selector所选元素中在其父元素里的第一个子元素。（若所选元素不是第一个子元素则不选择） |
||
| :first-of-type 1.9+ | 结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。 | $("span:first-of-type"); | 查找span元素的父元素的子元素的第一个span元素 |
| :last-child | 匹配selector所选元素中在其父元素里的最后一个子元素 | $("ul li:last-child") | 在每个 ul 中查找最后一个 li |
| :last-of-type 1.9+ | 结构化伪类，匹配E的父元素的最后一个E类型的孩子 | ||
| :nth-child() | 匹配其父元素下的第N个子或奇偶元素，要匹配元素的序号，从1开始(参考first-child，示例在此表格之后) | ||
| :nth-last-child() 1.9+ | 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。（与:nth-child()x相似，从后开始计数） | ||
| :nth-last-of-type() 1.9+ | 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。 | ||
| :nth-of-type(n|even|odd|formula)1.9+ | 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。odd奇数，even偶数 | ||
| :only-child | 如果某个元素是父元素中唯一的子元素，那将会被匹配 | ||
| :only-of-type 1.9+ | 选择所有没有兄弟元素，且具有相同的元素名称的元素 |
:first-child ,:last-child ,:first-of-type, :last-of-type的区别
<div >
<span>1</span>
<p>2</p>
<p>3</p>
</div>
<div >
<p>4</p>
<p>5</p>
</div>
示例
$("p:first-child").css("color","red");
结果：只有4变红
$("p:first-of-type").css("color","red");
结果：2和4变红
$("p:nth-child(2)").css("color","red");
结果：2和5变红
按上例通俗的说：有of的不会在意span的存在，没of的会在span的存在
表单
| :input | 匹配所有 input, textarea, select 和 button 元素 | ||
| :text | 匹配所有的单行文本框 | ||
| :password | 匹配所有密码框 | ||
| :radio | 匹配所有单选按钮 | ||
| :checkbox | 匹配所有复选框 | ||
| :submit |
匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit， 所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。 |
||
| :image | 匹配所有图像域 | ||
| :reset | 匹配所有重置按钮 | ||
| :button | 匹配所有按钮 | ||
| :file | 匹配所有文件域 |
表单对象属性
| :enabled | 匹配所有可用元素 ，没被禁用的（PS：disabled="disabled"禁用按钮） | ||
| :disabled | 匹配所有不可用元素 | ||
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 selected |
||
| :selected | 匹配所有选中的option元素 |
混淆选择器
$.escapeSelector(selector) 3.0+
这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。
$( "div" ).find( "." + $.escapeSelector( ".box" ) );
选择出类中包含.box的div
