jquery选择器大全-基本选择器-层次选择器（后代选择器-子选）-过滤选择器（基本过滤选择器-内容过滤选择器-可见性过滤选择器-属性过滤选择器-子元素过滤选择器-表单对象属性过滤选择器）-表单选择器
选择器并没有一个固定的定义，在某种程度上说，jQuery的选择器和样式表中的选择器十分相似。
选择器具有如下特点：
1．简化代码的编写2．隐式迭代
3．无须判断对象是否存在
其中“$”是选择器不可缺少的部分，在jQuery库中，$就是jQuery的一个简写形式，比如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，可以把程序中的$符号都理解为jQuery的简写形式。
现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类，下面将不同类型的分类器进行分类，并且分别进行解释说明，使读者达到掌握程度。
一、基本选择器
基本选择器包括5种选择器：#id、element、.class、*和selectorl,selector2.selectorN，下面将配合实例分别介绍每种选择器的作用及使用方法。
1．#id选择器
#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符，可以用两个斜杠转义，其返回值为Array<Element>。
例子：
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）
<span style="font-size:18px;color:#6633ff;">$(document).ready(function () {
$('#one').css('background', '#000');
});</span>
<span style="font-size:18px;color:#6633ff;"> </span>
<span style="font-size:18px;"><span style="font-family: Simsun;">2．element选择器</span><br style="font-family: Simsun;" /><span style="font-family: Simsun;">element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。</span></span>
<span style="font-size:18px;color:#3366ff;">例子：</span>
<span style="font-size:18px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">将p元素的文字大小设置为12px</span></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
$('p').css('font-size', '12px');
});</span>
3．class选择器
.class选择器根据给定的类匹配元素，是一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到，其返回值为Array<Element(s)>。
<span style="font-size:18px;color:#3366ff;"><span style="font-family: Simsun;">例子：</span></span>
<span style="font-family: Simsun;"></span><p style="font-size:18px; font-family: Arial; line-height: 26px;"><span style="color:#3366ff;">将class="cube"的元素背景色设为黑色</span></p><pre class="code" name="code" style="font-size:18px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
$('.cube').css('background', '#000');
});</span>
<span style="color:#3366ff;"> </span>
<span style="font-family: Simsun;font-size:14px;">4．*选择器</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">*选择器多用于结合上下文来搜索，匹配所有元素的选择器。其返回值为Array<Element(s)>。</span>
<span style="color:#3366ff;">例子：</span>
<pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// 遍历form下的所有元素，将字体颜色设置为红色
$('form *').css('color', '#FF0000');
});</span>
<br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">5．selector1,selector2,selectorN选择器</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内，其返回值为：Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。</span><span style="color:#3366ff;"> </span>
<span style="color:#3333ff;font-size:18px;"><span style="font-family: Simsun;font-size:14px;">例子：</span><span style="font-family: Arial;font-size:14px; background-color: rgb(240, 240, 240);">并列选择器</span></span><span style="font-family: Simsun;"></span><pre class="code" name="code" style="font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p, div').css('margin', '0');
});</span>
<span style="color:#3333ff;"> </span>
<span style="color:#3333ff;"> </span>
<span style="font-family: Simsun;"><span style="font-size:24px;color:#ff0000;">二、层级选择器</span><span style="color:#3333ff;font-size:14px;"> </span></span><span style="font-size:14px; color: rgb(51, 51, 255); font-family: Simsun;">层</span><span style="font-size:14px; font-family: Simsun;">级选择器包括5种形式：ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合实例分别详细介绍每种选择器的作用及使用方法。</span><span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">1．ancestor descendant选择器</span><span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">其指在给定的祖先元素下匹配所有的后代元素，作为参数的ancestor代表任何有效的选择器，而descendant则用以匹配元素的选择器，并且它是第一个选择器的后代。其返回值为：Array<Element(s)>。</span>
<span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">2．parent>child选择器 </span><span style="font-size:14px; font-family: Simsun;">parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下：parent代表任何有效选择器；child用以匹配元素的选择器，并且它是第一个选择器的子元素。其返回值为Array<Element(s)>。</span>
<span style="font-size: 14px;"><span style="color:#3366ff;">例子：</span></span><h3 style="margin: 0px; padding: 0px; font-family: Arial; line-height: 26px;"><span style="color:#3366ff;">parent > child（直系子元素）</span></h3><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// 选取div下的第一代span元素，将字体颜色设为红色
$('div > span').css('color', '#FF0000');
});</span>
下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。
<span style="color:#3366ff;"><div>
<span>123</span>
<p>
<span>456</span>
</p>
</div></span>
<span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">3．prev+next选择器 </span><span style="font-size:14px; font-family: Simsun;">这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下：prev代表任何有效选择器；next代表一个有效选择器并且紧接着第一个选择器。其返回值为Array<Element(s)>。</span>
<span style="color:#3366ff;font-size: 14px;">例子：</span>
<span style="font-size: 14px;"></span><h3 style="margin: 0px; padding: 0px; font-family: Arial; line-height: 26px;"><span style="color:#3366ff;">prev + next（下一个兄弟元素，等同于next()方法）</span></h3><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// 选取class为item的下一个div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等价代码
//$('.item').next('div').css('color', '#FF0000');
});</span>
下面的代码，只有123和789会变色
<span style="color:#3366ff;"><p class="item"></p> <div>123</div> <div>456</div> <span class="item"></span> <div>789</div></span>
<span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">4．prev ~ siblings选择器</span><span style="font-size: 14px;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下：prev代表任何有效选择器；siblings代表一个选择器，并且它作为第一个选择器的同辈。其返回值为Array<Element(s)>。</span><span style="font-size: 14px;"> </span>例子：
<h3 style="font-family: Arial;font-size:18px; margin: 0px; padding: 0px; line-height: 26px;"><span style="color:#3366ff;">prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）</span></h3><pre class="code" name="code" style="font-family: Simsun; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// 选取class为inside之后的所有div兄弟元素
$('.inside ~ div').css('color', '#FF0000');
// 等价代码
//$('.inside').nextAll('div').css('color', '#FF0000');
});</span>
下面的代码，G2和G4会变色
<span style="color:#3366ff;"><div class="inside">G1</div> <div>G2</div> <span>G3</span> <div>G4</div></span>
<span style="color:#3366ff;"> </span>
<span style="color:#3366ff;"> </span>
<span style="font-family: Simsun;"><span style="font-size:24px;color:#ff0000;">三、过滤选择器</span></span><span style="color:#3366ff;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-size:14px; font-family: Simsun;">过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号开头。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-size:14px; font-family: Simsun;">过滤选择器涉及的内容较多，总共有6 种类型，但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-size:14px; font-family: Simsun;"><span style="color:#ff6666;">1．基本过滤选择器</span> </span><span style="font-size:14px; font-family: Simsun;">基本过滤选择器是过滤选择器中最常用的一种，其主要包括以下几种形式，在此做详细说明：</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-size:14px; font-family: Simsun;">（1）:first/:last选择器。</span>
<span style="color:#3333ff;">例子：</span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">1.1 :first和:last（取第一个元素或最后一个元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
$('span:first').css('color', '#FF0000');
$('span:last').css('color', '#FF0000');
});</span>
下面的代码，G1（first元素）和G3（last元素）会变色
<span style="color:#3333ff;"><span>G1</span> <span>G2</span> <span>G3</span></span>
<span style="font-family: Simsun;font-size:14px;">（2）:not选择器。</span>
<span style="color:#3333ff;">例子：</span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">1.2 :not（取非元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
$('div:not(.wrap)').css('color', '#FF0000');
});</span>
下面的代码，G1会变色
<span style="color:#3333ff;"><div>G1</div> <div class="wrap">G2</div> </span>
但是，请注意下面的代码：
<span style="color:#3333ff;"><div>
G1
<div class="wrap">G2</div>
</div>
</span>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。
<span style="font-family: Simsun;font-size:14px;">（3）:even和:odd选择器。</span>
<span style="font-family: Simsun;font-size:14px;">例子：</span>
<span style="font-family: Simsun;font-size:14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
$('tr:even').css('background', '#EEE'); // 偶数行颜色
$('tr:odd').css('background', '#DADADA'); // 奇数行颜色
});</span>
A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA
<span style="color:#3333ff;"><table width="200" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table></span>
<br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（4）:eq:gt、:lt、选择器。</span>
例子：
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">1.4 :eq(x) （取指定索引的元素）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030158348.png" style="text-decoration: none;"><span style="color:#3333ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030166854.png" width="291" height="100" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
$('tr:eq(2)').css('background', '#FF0000');
});</span>
更改第三行的背景色，在上面的代码中C的背景会变色。
gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
$(document).ready(function () {
$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');
});
L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
<ul>
<li>L1</li>
<li>L2</li>
<li>L3</li>
<li>L4</li>
<li>L5</li>
</ul>
<span style="font-family: Simsun;font-size:14px;">（5）:header选择器。</span>
<span style="color:#3333ff;">例子：</span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">1.5 :header（取H1~H6标题元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;">$(document).ready(function () {
$(':header').css('background', '#EFEFEF');
});</span>
下面的代码，H1~H6的背景色都会变
<span style="color:#3333ff;"><h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6></span>
（6）:animated选择器。
<span style="font-family: Simsun;font-size:14px;">匹配所有正在执行动画效果的元素</span>
<span style="font-family: Simsun;font-size:14px;"> </span>
<span style="font-family: Simsun;font-size:14px;"> </span>
<span style="font-family: Simsun;font-size:14px;"><span style="font-family: Simsun;font-size:14px;"><span style="color:#ff6666;">2.内容过滤选择器</span> </span><span style="font-family: Simsun;font-size:14px;">内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器，这部分过滤器是对上面介绍基本过滤选择器的一个补充，对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（1）:contains选择器。</span></span>
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span>
<span style="font-family: Simsun;font-size:14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">2.1 :contains(text)（取包含text文本的元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// dd元素中包含"jQuery"文本的会变色
$('dd:contains("jQuery")').css('color', '#FF0000');
});</span>
下面的代码，第一个dd会变色
<span style="color:#3366ff;"><dl>
<dt>技术</dt>
<dd>jQuery, .NET, CLR</dd>
<dt>SEO</dt>
<dd>关键字排名</dd>
<dt>其他</dt>
<dd></dd>
</dl></span>
<span style="font-family: Simsun;font-size:14px;"> </span>
（2）:empty选择器。
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span>
<span style="font-family: Simsun;font-size:14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">2.2 :empty（取不包含子元素或文本为空的元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
$('dd:empty').html('没有内容');
});</span>
上面第三个dd会显示"没有内容"文本
<span style="font-family: Simsun;font-size:14px;"> </span>
（3）:has选择器。
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span>
<span style="font-family: Simsun;font-size:14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">2.3 :has(selector)（取选择器匹配的元素）</span></strong></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
// 为包含span元素的div添加边框
$('div:has(span)').css('border', '1px solid #000');
});</span>
即使span不是div的直系子元素，也会生效
<span style="color:#3366ff;"><div>
<h2>
A
<span>B</span>
</h2>
</div></span>
（4）:parent选择器。
<span style="font-family: Simsun;font-size:14px;"><span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span></span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">2.4 :parent（取包含子元素或文本的元素）</span></strong></p><pre class="code" name="code" style="font-family: Simsun; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;">$(document).ready(function () {
$('ol li:parent').css('border', '1px solid #000');
});</span>
下面的代码，A和D所在的li会有边框
<span style="color:#3366ff;"><ol>
<li></li>
<li>A</li>
<li></li>
<li>D</li>
</ol></span>
<span style="color:#3366ff;"> </span>
<span style="color:#3366ff;"> </span>
<span style="color:#3366ff;"> </span>
<span style="font-family: Simsun;font-size:14px;"><span style="color:#ff6666;">3．可见性过滤选择器</span><span style="color:#3366ff;"> </span></span><span style="font-family: Simsun;font-size:14px;">可见性过滤选择器比较简单，其包含两种选择器，主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（1）:hidden选择器。</span>
<span style="color:#3366ff;">例子：</span>
<span style="font-size: 14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">3.1 :hidden（取不可见的元素）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">参照：<a target=_blank href="http://www.jquerysdk.com/api/hidden-selector" style="text-decoration: none;">http://www.jquerysdk.com/api/hidden-selector</a></span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/2012060220302892.png" style="text-decoration: none;"><span style="color:#3366ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030299088.png" width="376" height="389" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><html </span><pre class="code" name="code" style="background-color: rgb(255, 255, 255); line-height: 26px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px;"><span style="color:#3366ff;">xmlns="http://www.w3.org/1999/xhtml"</span>><head runat="server"> <title></title> <style type="text/css"> div { margin: 10px; width: 200px; height: 40px; border: 1px solid #FF0000; display:block; } .hid-1 { display: none; } .hid-2 { visibility: hidden; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div:hidden').show(500); alert($('input:hidden').val()); }); </script></head><body> <div class="hid-1">display: none</div> <div class="hid-2">visibility: hidden</div> <input type="hidden" value="hello"/></body></html>
（2）:visible选择器。
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">3.2 :visible（取可见的元素）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">下面的代码，最后一个div会有背景色</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030302369.png" style="text-decoration: none;"><span style="color:#3366ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030314463.png" width="335" height="255" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="font-family: Simsun; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$('div:visible').css('background', '#EEADBB');
});
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
jQuery选择器大全
</div></span>
<span style="color:#3366ff;"> </span>
<span style="color:#3366ff;"> </span>
<span style="font-family: Simsun;font-size:14px;"><span style="color:#ff6666;">4．属性过滤选择器</span></span><span style="color:#3366ff;"><br style="font-family: Simsun;font-size:14px;" /></span><span style="font-family: Simsun;font-size:14px;">属性过滤选择器是用于匹配包含给定属性的元素，当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（1） [attribute]选择器。</span>
匹配包含给定属性的元素！！
<span style="font-size: 14px;"><span style="color:#3366ff;">例子：</span></span>
<span style="font-size: 14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">4.1 [attribute]（取拥有attribute属性的元素）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030329347.png" style="text-decoration: none;"><span style="color:#3366ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/20120602203033643.png" width="277" height="204" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$('a[title]').css('text-decoration', 'none');
});
</script>
<ul>
<li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
<li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
<li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
<li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
<li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
<li><a href="#" class="item">其他</a></li>
</ul></span>
（2）[attribute=value]、[attribute!=value]选择器（此处包含两种）。
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3366ff;">例子：</span></span>
<span style="font-family: Simsun;font-size:14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">分别为class="item"和class!=item的a标签指定文字颜色</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030343576.png" style="text-decoration: none;"><span style="color:#3366ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030352921.png" width="313" height="206" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$('a[class=item]').css('color', '#FF99CC');
$('a[class!=item]').css('color', '#FF6600');
});
</script> </span>
<br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（3）[attribute^=value]、[attribute$=value]、[attribute*=value]选择器（此处包含三种）。</span>
<span style="color:#3366ff;">例子：</span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><a target=_blank href="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030364217.png" style="text-decoration: none;"><span style="color:#3366ff;"><img title="image" alt="image" src="http://images.cnblogs.com/cnblogs_com/keepfool/201206/201206022030377150.png" width="330" height="243" style="border: 0px none; max-width: 100%; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px;" /></span></a></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><script type="text/javascript">
// 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的
$('a[title^=jQuery]').css('font-weight', 'bold');
$('a[title$=jQuery]').css('font-size', '24px');
$('a[title*=jQuery]').css('text-decoration', 'line-through');
</script></span>
（4）[selector][selector2]选择器。
<span style="font-family: Simsun;font-size:14px;"><span style="color:#3333ff;">例子：</span></span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3333ff;">4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3333ff;">将title以"jQuery"开始，并且class="item"的a标签隐藏，那么<a href="#" title="jQuery事件大全"class="item">jQuery事件大全</a>会被隐藏</span></p><pre class="code" name="code" style="font-family: Simsun; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3333ff;"><script type="text/javascript">
$(document).ready(function() {
$('a[title^=jQuery][class=item]').hide();
});
</script> </span><span style="color: blue;"> </span>
<span style="color: blue;"> </span>
<span style="color: blue;"> </span>
<span style="font-family: Simsun;font-size:14px;"><span style="color:#ff6666;">5．子元素过滤选择器</span><span style="color:#0000ff;"> </span></span><span style="font-family: Simsun;font-size:14px;">html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。</span><br style="font-family: Simsun;font-size:14px;" /><span style="font-family: Simsun;font-size:14px;">（1）:nth-child选择器。</span>
<span style="color:#3366ff;">例子：</span>
<span style="font-size: 14px;"></span><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;"></span></strong><pre class="code" name="code" style="background-color: rgb(255, 255, 255); line-height: 26px; white-space: pre-wrap; word-wrap: break-word;"><span style="color:#3366ff;"><span style="font-family: Arial; font-size: 14px; "><strong>5.1 </strong></span></span><span style="font-family: Arial; background-color: rgb(240, 240, 240);">:nth-child有三种用法：</span>
1) :nth-child(x)，获取第x个子元素
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）
下面的两个例子是针对2)和3)的，1)的例子我就不列举了。
例2：
<span style="color:#3366ff;"><html </span><pre class="code" name="code" style="background-color: rgb(255, 255, 255); line-height: 26px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px;">xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> td { width: 200px; height: 32px; line-height: 32px; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 偶数行背景红色 $('tr:nth-child(even)').css('background', '#FF0000'); // 奇数行背景蓝色 $('tr:nth-child(odd)').css('background', '#0000FF'); }); </script></head><body> <table> <tr><td>1. NBA 2012季后赛</td></tr> <tr><td>2. NBA 2011季后赛</td></tr> <tr><td>3. NBA 2010季后赛</td></tr> <tr><td>4. NBA 2009季后赛</td></tr> <tr><td>5. NBA 2008季后赛</td></tr> <tr><td>6. NBA 2007季后赛</td></tr> </table></body></html>
例3（html代码和例2是一样的）：
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$('tr:nth-child(3n)').css('background', '#0000FF');
});
</script></span>
（2）:first-child、:last-child选择器（两种）。
<span style="color:#3366ff;">例子：<span style="font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap;"><strong>5.2 </strong></span><span style="font-family: Arial; font-size: 14px; line-height: 26px; white-space: pre-wrap;"><strong>:</strong></span></span><span style="font-family: Simsun;font-size:14px; background-color: rgb(240, 240, 240); font-weight: bold;"><span style="color:#3366ff;">first-child、:last-child</span></span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">first-child表示第一个子元素，:last-child表示最后一个子元素。</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。</span></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：</span></p><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
});
</script>
</head>
<body>
<div>
<div>
<div></div>
</div>
</div>
</body>
</html></span>
也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。 把上面的代码稍微修改一下：
<span style="color:#3366ff;"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var len1 = $('div:first-child').length;
var len2 = $('div:last-child').length;
$('div:first-child').each(function() {
alert($(this).html());
});
});
</script>
</head>
<body>
<div>123
<div>456
<div></div>
</div>
</div>
</body>
</html>
</span>
结果却是弹出三个alert，只不过最后一个alert里面是空白的。
（3）:only-child选择器。
<span style="font-family: Simsun;font-size:14px;">例子：</span>
<p style="font-family: Arial; font-size: 14px; line-height: 26px;"><strong><span style="color:#3366ff;">5.3 :only-child</span></strong></p><p style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="color:#3366ff;">当某个元素有且仅有一个子元素时，:only-child才会生效。</span></p><pre class="code" name="code" style="font-family: Simsun; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 26px; background-color: rgb(255, 255, 255);"><span style="color:#3366ff;"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:only-child').css('border', '1px solid #FF0000').css('width','200px');
});
</script>
</head>
<body>
<div>123
<div>456
<div></div>
</div>
</div>
</body>
</html></span>
这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。
6．表单对象属性过滤选择器
这部分内容相当简单，只包含四种类型的选择器，这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
（1）:enabled、:disabled选择器。
选取所有可用的表单对象！
例子：
6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范围包括input, select, textarea。
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$(':enabled').css('border', '1px solid #FF0000');
$(':disabled').css('border', '1px solid #0000FF');
});
</script>
<div>
<input type="text" value="可用的文本框" />
</div>
<div>
<input type="text" disabled="disabled" value="不可用的文本框" />
</div>
<div>
<textarea disabled="disabled">不可用的文本域</textarea>
</div>
<div>
<select disabled="disabled">
<option>English</option>
<option>简体中文</option>
</select>
</div></span>
（2）:checked选择器。
例子：
6.2 :checked（取选中的单选框或复选框元素）
下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来。
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$(':checked').css('background', '#FF0000').each(function() {
alert($(this).val());
});
});
</script>
<div>
<input type="checkbox" checked="checked" value="must"/>必须勾选
</div>
<div>
你现在工作的企业属于：
<input type="radio" name="radio" checked="checked" value="外企"/>外企
<input type="radio" name="radio" value="国企"/>国企
<input type="radio" name="radio" value="民企"/>民企
</div></span>
（3）:selected选择器。
例子：
6.3 :selected（取下拉列表被选中的元素）
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
alert($(':selected').val());
});
</script>
<select>
<option value="外企">外企</option>
<option value="国企">国企</option>
<option value="私企">私企</option>
</select></span>
表单过滤选择器是用于处理html中表单的选择器，其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等，还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
（1）:input选择器。
input（取input,textarea,select,button元素）
:input元素这里就不再多说了，前面的一些例子中也已经囊括了。
（2）:text、:password选择器。
例子：
text（取单行文本框元素）和:password（取密码框元素）
这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$(':text').css('border', '1px solid #FF0000');
$(':password').css('border', '1px solid #0000FF');
// 等效代码
//$('input[type=text]').css('border', '1px solid #FF0000');
//$('input[type=password]').css('border', '1px solid #0000FF');
});
</script>
<fieldset style="width: 300px;">
<legend>账户登录</legend>
<div>
<label>用户名：</label><input type="text"/>
</div>
<div>
<label>密 码：</label><input type="password"/>
</div>
</fieldset></span>
（3）:radio、:checkbox选择器。
例子：
radio（取单选框元素）
:radio选择器和属性选择器$('input[type=radio]')等同
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$(':radio').each(function() {
alert($(this).val());
});
// 等效代码
/*
$('input[type=radio]').each(function() {
alert($(this).val());
});
*/
});
</script>
你现在工作的企业属于：
<input type="radio" name="radio" checked="checked" value="外企"/>外企
<input type="radio" name="radio" value="国企"/>国企
<input type="radio" name="radio" value="民企"/>民企</span>
checkbox（取复选框元素）
:checkbox选择器和属性选择器$('input[type=checkbox]')等同
<span style="color:#3366ff;"><script type="text/javascript">
$(document).ready(function() {
$(':checkbox').each(function() {
alert($(this).val());
});
// 等效代码
/*
$('input[type=checkbox]').each(function() {
alert($(this).val());
});
*/
});
</script>
您的兴趣爱好：
<input type="checkbox" />游泳
<input type="checkbox" />看书
<input type="checkbox" checked="checked" value="打篮球"/>打篮球
<input type="checkbox" checked="checked" value="电脑游戏"/>电脑游戏</span>
上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法：
<span style="color:#3366ff;">$(':checkbox:checked').each(function() {
alert($(this).val());
});
$('input[type=checkbox][checked]').each(function() {
alert($(this).val());
});
$(':checked').each(function() {
alert($(this).val());
});</span>
（4）:submit、:image、:reset、:button、:file选择器。
submit（取提交按钮元素）
:submit选择器和属性选择器$('input[type=submit]')等同
reset（取重置按钮元素）
:reset选择器和属性选择器$('input[type=reset]')等同
button（取按钮元素）
:button选择器和属性选择器$('input[type=button]')等同
file（取上传域元素）
:file选择器和属性选择器$('input[type=file]')等同
（5）:hidden选择器。
hidden（取不可见元素）
<pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; background-color: rgb(255, 255, 255);"><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; background-color: rgb(255, 255, 255);"><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; background-color: rgb(255, 255, 255);"><pre class="code" name="code" style="white-space: pre-wrap; word-wrap: break-word; background-color: rgb(255, 255, 255);"><p style="font-family: Arial; font-size: 14px;">:hidden选择器和属性选择器<span style="font-size: 12px;">$('input[type=hidden]')</span>等同</p>
<span style="font-size:18px;"><span style="font-family: Simsun;"> </span></span>
<span style="font-size:18px;color:#6633ff;"> </span>
<span style="font-size:18px;color:#6633ff;"> </span>