jQuery 选择器
jQuery 选择器介绍：
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:（元素选择器选取多个元素）
实例
用户点击按钮后，所有 <p> 元素都隐藏：
实例
$("button").click(function(){
$("p").hide();
});
});
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。id选择器选取唯一的元素，若有多个相同的id，只选取第一个。
通过 id 选取元素语法如下：
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
实例
$("button").click(function(){
$("#test").hide();
});
});
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
实例
用户点击按钮后所有带有 class="test" 属性的元素都隐藏： 类选择器选择多个
实例
$("button").click(function(){
$(".test").hide();
});
});
群组选择器
| 群组选择器 |
集合元素 |
$(“div,span,p.myclass”)选取所有<div>，<span>，和拥有class为myclass的<p>标签的一组元素。（多个元素、类等之间用逗号隔开） |
层次选择器：
适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相 邻元素和兄弟元素。
| 选择器 |
返回 |
示例 |
| 后代元素选择器 |
集合元素 |
$(“div span”)选取<div>里的所有的<span>元素。 |
| 子元素选择器 |
集合元素 |
$(“div>span”)选取<div>元素下元素名是<span>的子元素。（只包括子元素，孙元素就不算了） |
| 相邻元素选择器 |
集合元素 |
$(“.one+div”)选取class为one的下一个<div>兄弟元素。 |
| 兄弟元素选择器 |
集合元素 |
$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。 |
注意：$(“prev~siblings”)选择器与siblings()方法的区别。
$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关，只要是同辈节点就都能匹配。
属性过滤选择器：
超链接中用的比较多
$(
"div[id]"
) 选择所有含有id属性的div元素
$(
"input[name='newsletter']"
) 选择所有的name属性等于
'newsletter'
的input元素
$(
"input[name!='newsletter']"
) 选择所有的name属性不等于
'newsletter'
的input元素
$(
"input[name^='news']"
) 选择所有的name属性以
'news'
开头的input元素
$(
"input[name$='news']"
) 选择所有的name属性以
'news'
结尾的input元素
$(
"input[name*='man']"
) 选择所有的name属性包含
'news'
的input元素
$(
"input[id][name$='man']"
) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
基本过滤选择器：
$(
"tr:first"
) 选择所有tr元素的第一个
$(
"tr:last"
) 选择所有tr元素的最后一个
$(“input:not(.myClass)”) 选取class不是myClass的<input>元素。
$(
"tr:even"
) 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$(
"tr:odd"
) 选择所有的tr元素的第1，3，5... ...个元素
$(
"td:eq(2)"
) 选择所有的td元素中序号为2的那个td元素 ，从上往下是0,1,2，。。；从下往上是-1，-2，。。。
$(
"td:gt(4)"
) 选择td元素中序号大于4的所有td元素 ，若为负值，指从下面算起，如-3 则为最下面两个
$(
"td:ll(4)"
) 选择td元素中序号小于4的所有的td元素
$(
":header"
) 选取网页中所有的<h1>,<h2>,<h3>...
$(
"div:animated"
) 选取正在执行动画的<div>元素。
$(
"div:contains('John')"
) 选择所有div中含有John文本的元素
$(
"td:empty"
) 选择所有的为空（也不包括文本节点）的td元素的数组
$(
"div:has(p)"
) 选择所有子元素含有p标签的div元素
$(
"td:parent"
) 选择所有的以td为父节点的元素数组
$(
"div:hidden"
) 选择所有的被hidden的div元素
$(
"div:visible"
) 选择所有的可视化的div元素
子元素过滤选择器：
$(
"ul li:nth-child(2)"
) 表示第二个li ,$(
"ul li:nth-child(odd)"
),$(
"ul li:nth-child(3n + 1)"
) （获取每个自定义子元素的元素，索引值从1开始计算）
$(
"ul li:nth-child(odd)"
)表示所有的奇数li
$(
"div span:first-child"
) 返回所有的div元素的第一个子元素（获取每个父元素的第一个子元素）
$(
"div span:last-child"
) 返回所有的div元素的最后一个子元素（获取每个父元素的最后一个子元素）
$(
"div button:only-child"
) 返回所有的div中只有唯一一个子节点的所有子元素（获取只有一个子元素的元素）
更多实例
| 语法 | 描述 | |
|---|---|---|
| $("*") | 选取所有元素 通配符选择器：例：$("ul li *").css("color","red") | |
| $(this) | 选取当前 HTML 元素 | |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | |
| $("p:first") | 选取第一个 <p> 元素 | |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | |
| $("[href]") | 选取带有 href 属性的元素 | |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
独立文件中使用 jQuery 函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
实例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>