jQuery基础：选择元素
jQuery利用了CSS选择符的能力，我们能够在DOM中轻松地获取元素或元素集合。
一、理解 DOM(Document Object Model ，文档对象模型)
HTML DOM 定义了访问和操作 HTML 文档的标准。
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
以上面的 HTML 文档为例：
祖先元素:<html>是其他所有元素的祖先元素，其他所有元素都是<html>的后代元素。
子元素:<head>和<body>元素是<html>的子元素（但并不是它唯一的子元素）。
父元素:因此除了作为<head>和<body>的祖先元素之外， <html>也是它们的父元素。 而<p>元素则是<div>的子元素（也是后代元素），是<body>和<html>的后代元素。
同辈元素:<p>元素是其他<p>元素的同辈元素。
二、使用$()函数
为了创建jQuery对象，就要使用$()函数。这个函数接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数，随后我们就可以对匹配的元素集合应用jQuery方法。
有3种基本的选择符： 标签名、 ID和类。这些选择符可以单独使用，也可以与其他选择符组合使用。
如下表：
标签名 P {} $('p') 取得文档中所有的段落
ID #some-id {} $('#some-id') 取得文档中ID为some-id的一个元素
类 .some-class {} $('.some-class') 取得文档中类为some-class的所有元素
用上面的例子，稍加修改，来看看$()的使用方法
例子中 $('#container > p').addClass('font') 中使用了子元素组合符（>），以便将 font 类<p>元素中去。
<!DOCTYPE html>
<html>
<head>
<title>the title</title>
<style>
.font {
font-weight: bold;
color: red;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$('#container > p').addClass('font');
});
</script>
</head>
<body>
<div id="container">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
注意：
在jQuery中，美元符号$只不过标识符jQuery的“别名”。由于$()在JavaScript库中很常见，所以，如果在一个页面中使用了几个这样的库，那么就会导致冲突。在这种情况下，可以在我们自定义的jQuery代码中，通过将每个$的实例替换成jQuery来避免这种冲突。
三、属性选择符
使用属性选择符可以方便的修改元素的属性。
如下：
$('img[alt]')
属性选择符使用一种从正则表达式中借鉴来的通配符语法：
以^表示值在字符串的开始，以$表示值在字符串的结尾。而且，也是用星号*表示要匹配的值可以出现在字符串中的任意位置，用叹号!表示对值取反。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>the title</title>
<style>
a {
color: #000;
}
a.http {
color:red;
padding-right: 18px;
}
a.https {
color: green;
padding-right: 18px;
}
a.img {
color: blue;
padding-right: 18px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$('a[href^="http:"]').addClass('http');
$('a[href^="https:"]').addClass('https');
$('a[href$=".jpg"]').addClass('img');
});
</script>
</head>
<body>
<div id="container">
<p><a href="#">This is a anchor link.</a></p>
<p><a href="http://localhost/1.html">This is a common link.</a></p>
<p><a href="https://localhost/1.html">This is a security link.</a></p>
<p><a href="1.jpg">This is a link to 1.jpg.</a></p>
</div>
</body>
</html>
四、自定义选择符
jQuery中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。
自定义选择符通常跟在一个CSS选择符后面，基于已经选择的元素集的位置来查找元素。
自定义选择符的语法与CSS中的伪类选择符语法相同，即选择符以冒号（:）开头。
例如，
我们想要从几个带有font类的段落(<p>)中选择第2个段落(<p>)，那么应该使用下面的代码：
$('p.font:eq(1)')
注意，因为JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是集合中的第2个元素。
而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div元素。
:odd 、:even和 :nth-child()自定义选择符，
:odd 选择符选取每个带有奇数 index 值的元素（比如 1、3、5）。
:even 选择符选取每个带有偶数 index 值的元素（比如 2、4、6）和 0 (javascript中index值从 0 开始)。
:nth-child(n|even|odd|formula) 是jQuery中唯一从1开始计数的选择符。选取属于其父元素的第n个子元素。(n:从1开始的数字，匹配元素的所引。even：选取每个偶数子元素。odd:选取每个奇数子元素。formula:规定哪个子元素需通过公式 (an + b) 来选取,如：p:nth-child(3n+2) 选取每个第三段，从第二个子元素开始。。 )
例如页面上存在两个表格，如果要实现相同的交替效果，并且确保同一文档中的多个表格的效果一致，就需要使用:nth-child(n)，参数n可以使用odd而不是even，这样两个表格的交替效果就是一致的了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>:odd and :even</title>
<style>
tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
//$('tr:even').addClass('alt');
$('tr:nth-child(odd)').addClass('alt');
});
</script>
</head>
<body>
<div id="container">
<h2>Personal Infomation 1</h2>
<table>
<tr>
<td>James</td>
<td>20</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>18</td>
<td>USA</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
<td>UK</td>
</tr>
<tr>
<td>Black</td>
<td>19</td>
<td>AU</td>
</tr>
<tr>
<td>Bruce</td>
<td>19</td>
<td>AU</td>
</tr>
</table>
<h2>Personal Infomation 2</h2>
<table>
<tr>
<td>James</td>
<td>20</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>18</td>
<td>USA</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
<td>UK</td>
</tr>
<tr>
<td>Black</td>
<td>19</td>
<td>AU</td>
</tr>
<tr>
<td>Bruce</td>
<td>19</td>
<td>AU</td>
</tr>
</table>
</div>
</body>
</html>
五、其他选择符
选择符 实例
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") class="intro" 的所有元素
.class,.class $(".intro,.demo") class 为 "intro" 或 "demo" 的所有元素
element $("p") 所有 <p> 元素
el1,el2,el3 $("h1,div,p") 所有 <h1>、<div> 和 <p> 元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd $("tr:odd") 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child $("p:first-child") 属于其父元素的第一个子元素的所有 <p> 元素
:first-of-type $("p:first-of-type") 属于其父元素的第一个 <p> 元素的所有 <p> 元素
:last-child $("p:last-child") 属于其父元素的最后一个子元素的所有 <p> 元素
:last-of-type $("p:last-of-type") 属于其父元素的最后一个 <p> 元素的所有 <p> 元素
:nth-child(n) $("p:nth-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素
:nth-last-child(n) $("p:nth-last-child(2)") 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数
:nth-of-type(n) $("p:nth-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素
:nth-last-of-type(n) $("p:nth-last-of-type(2)") 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数
:only-child $("p:only-child") 属于其父元素的唯一子元素的所有 <p> 元素
:only-of-type $("p:only-of-type") 属于其父元素的特定类型的唯一子元素的所有 <p> 元素
parent > child $("div > p") <div> 元素的直接子元素的所有 <p> 元素
parent descendant $("div p") <div> 元素的后代的所有 <p> 元素
element + next $("div + p") 每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings $("div ~ p") <div> 元素同级的所有 <p> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）
:gt(no) $("ul li:gt(3)") 列举 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列举 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的输入元素
:header $(":header") 所有标题元素 <h1>, <h2> ...
:animated $(":animated") 所有动画元素
:focus $(":focus") 当前具有焦点的元素
:contains(text) $(":contains('Hello')") 所有包含文本 "Hello" 的元素
:has(selector) $("div:has(p)") 所有包含有 <p> 元素在其内的 <div> 元素
:empty $(":empty") 所有空元素
:parent $(":parent") 匹配所有含有子元素或者文本的父元素。
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
:root $(":root") 文档的根元素
:lang(language) $("p:lang(de)") 所有 lang 属性值为 "de" 的 <p> 元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='default.htm']") 所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value] $("[href!='default.htm']") 所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value] $("[href$='.jpg']") 所有带有 href 属性且值以 ".jpg" 结尾的元素
[attribute|=value] $("[title|='Tomorrow']") 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
[attribute^=value] $("[title^='Tom']") 所有带有 title 属性且值以 "Tom" 开头的元素
[attribute~=value] $("[title~='hello']") 所有带有 title 属性且值包含单词 "hello" 的元素
[attribute*=value] $("[title*='hello']") 所有带有 title 属性且值包含字符串 "hello" 的元素
[name=value][name2=value2] $( "input[id][name$='man']" ) 带有 id 属性，并且 name 属性以 man 结尾的输入框
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type="text" 的 input 元素
:password $(":password") 所有带有 type="password" 的 input 元素
:radio $(":radio") 所有带有 type="radio" 的 input 元素
:checkbox $(":checkbox") 所有带有 type="checkbox" 的 input 元素
:submit $(":submit") 所有带有 type="submit" 的 input 元素
:reset $(":reset") 所有带有 type="reset" 的 input 元素
:button $(":button") 所有带有 type="button" 的 input 元素
:image $(":image") 所有带有 type="image" 的 input 元素
:file $(":file") 所有带有 type="file" 的 input 元素
:enabled $(":enabled") 所有启用的元素
:disabled $(":disabled") 所有禁用的元素
:selected $(":selected") 所有选定的下拉列表元素
:checked $(":checked") 所有选中的复选框选项
.selector $(selector).selector 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target $( "p:target" ) 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素