第3章高级查找

1. 选择器过滤器

前面两节详细讲解了基本选择器的使用方法以及它们之间的组合关系，通过选择器，可以从页面中获取所有满足Selector的元素。有时候，我们还需要在这些元素中进一步筛选（例如，在Web应用程序中，根据条件从数据库查询数据，如果数据量比较大，往往会使用分页，就相当于再次筛选）。JQuery框架中使用“选择器过滤器”对Selector返回的元素集合进行过滤。

“选择器过滤器”通常与Selector一起使用，构成一个新的Expression（表达式）。在这个表达式中，Selector的用法与前面介绍过的完全一致，过滤器可以直接附加在Selector之上。JQuery中基本的过滤器有10种，下面将分别详细介绍。

1) :first

匹配找到的第一个元素，使用语法：Selector:first，返回值为JQuery对象。在返回的JQuery对象中封装了Selector所查找到的第一个元素。有如下代码：

<ul>

<li>Silverlight</li>

</ul>

现要找出列表中的第一项<li>ASP.NET</li>，并将其字体颜色设置为红色。这里就可以使用标签选择器li获取页面中所有的li元素，同时使用:first过滤器获取第一个li元素，最后使用css函数为li设置前景色（color）样式，JQuery代码如下：

jQuery(function() {

$("li:first").css("color", "Red");

});

</script>

这里还是使用Chain（链）的编码风格，代码足够的简单，但功能足够的强大。在浏览器中的运行结果如下（图3-1）：

图3-1

2) :last

于:first相对应，:last用于匹配Selector返回的最后一个元素，使用语法：selector:last，返回值为JQuery对象。还是使用上面的HTML代码，要找出列表中的最后一项<li>ASP.NET MVC</li>，并设置前景色（color）为红色，JQuery代码如下：

jQuery(function() {

$("li:last").css("color", "Red");

});

</script>

于上面的JQuery代码及其相似，仅一处不同，在浏览器中运行的结果如下图3-2：

图3-2

将代码进一步扩展，页面中有两个列表，HTML代码如下：

<ul>

<li>Silverlight</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li>Struts</li>

</ul>

现在需要找出每一个列表的最后（或第一）个元素，并将前景色（color）设置为红色。可以得知，最终需要修改两个元素的样式<li>ASP.NET MVC</li>和<li>Struts</li>，不能简单的使用一次:last过滤（因为:last过滤只能返回一个元素）。所以需要找到每一个ul元素，并找出每一个ul元素的最后一项。JQuery代码如下：

jQuery(function() {

$("ul:first li:last").css("color", "red");

$("ul:last li:last").css("color", "red");

});

</script>

运行结果如下（图3-3）：

上述代码中一共查找了两次ul元素（分别第一个和最后一个），并找出每一个的ul的最后一项，设置前景色（color）为红色。当然在上述JQuery代码中有一些不合理之处（如果需要设置三个列表的最后一项该如何去做呢？），在后面章节中我们会有更好的做法。

3) :not(selector)

如果你能读懂SQL语句：SELECT Ele FROM HTML WHERE Ele NOT IN (SELECT Ele FROM ……)，你就已经理解:not(selector)过滤器了。

该过滤器用于除去给定selector所匹配的所有元素，语法如下：

jQuery(“selector:not(selector)”) 或 $(“selector:not(selector)”)

参数selector：要除去的元素的选择器

返回值：JQuery对象

有如下HTML代码：

<ul>

<li class="myStyle">Silverlight</li>

</ul>

现在需要找出所有不具有“myStyle”样式的列表项（li），并将内容前景色改为红色。我们首先找出要除去的列表项（即拥有“myStyle”样式的项），很简单，使用类选择器$(“.myStyle”)就可以了，将这个类选择器最为:not(selector)过滤器的参数。 JQuery代码如下：

jQuery(function() {

$("li:not(.myStyle)").css("color", "red");

});

</script>

运行结果如下图3-4：

图3-4

4) :even

匹配selector查询结果的所有偶数（0，2，4，…）项，同:odd过滤器（匹配selector查询结果的所有奇数项）相对应。这个两个过滤器在切换奇、偶行样式时比较有用，有如下HTML代码：

……

.data{

border:solid 1px blue;

width:600px;

}

.data th{

background-color:skyblue;

text-align:left;

border-bottom:solid 1px skyblue;

}

.data td{

border-bottom:solid 1px skyblue;

background-color:Silver;

}

</style>

……

<thead>

<tr>

<th>User Name</th><th>Email</th><th>MobilePhone</th>

</tr>

</thead>

<tbody>

<tr>

<td>Frank</td><td>eagle@126.com</td><td>13100006688</td>

</tr>

<tr>

</tr>

<tr>

<td>Hello</td><td>Hello@126.com</td><td>13888886688</td>

</tr>

<tr>

<td>World</td><td>World@126.com</td><td>13566668866</td>

</tr>

</tbody>

</table>

……

上面HTML代码定一个了一个表格数据，并定义了基本的样式，运行结果如下图3-5：

图3-5

现在需要使表格中所有的偶数行背景设置为白色，我们首先需要找到表格中所有的行，使用前面所讲的组合选择器$(“.data>tbody>tr”)就可以实现，要得到偶数行，之需要在选择器中使用:even过滤器即可，JQuery代码如下：

jQuery(function() {

$(".data>tbody>tr:even td").css("background-color", "White");

});

</script>

代码运行结果如下（图3-6）：

图3-6

改变奇数行样式的方法也是如此。

5) :odd

匹配selector查询结果的所有奇数（1，3，5，…）项，同:even过滤器（匹配selector查询结果的所有偶数项）相对应。

:odd过滤器的基本用法同上面的:even过滤器，在此不再介绍。

6) :eq(index)

前面小节中讲到的:first、:last分别匹配第一个和最后一个，:eq(index)则是匹配selector查询结果的任意一个，通过下标（从0开始）进行标记。语法如下：

jQuery(“selector:eq(index)”) 或 $(“selector:eq(index)”)

参数index：下标，从0开始，表示获取第index个元素。

返回值：JQuery对象。

有如下HTML代码，定义了一个无序列表：

<ul>

<li >Silverlight</li>

</ul>

现在需要找出列表中第2个元素（下标为1），并将字体该为粗体，JQuery代码如下：

jQuery(function() {

$("li:eq(1)").css("font-weight", "bold");

});

</script>

运行结果如下图所示（图3-7）：

图3-7

7) :gt(index)

匹配所有下标（从0开始）大于给定值的元素，于:lt（匹配所有下标小于给定值的元素）。使用语法：

jQuery(“selector:gt(index)”) 或 $(“selector:gt(index)”)

参数index：下标，从0开始。

返回值：JQuery对象。

有如下HTML代码，定义了一个无序列表：

<ul>

<li >Silverlight</li>

</ul>

现在需要找出列表中后2个元素（下标大于0），并将字体该为粗体，JQuery代码如下：

jQuery(function() {

$("li:gt(0)").css("font-weight", "bold");

});

</script>

运行结果如下图所示（图3-8）：

图3-8

8) :lt

匹配所有下标（从0开始）小于给定值的元素，于:gt（匹配所有下标大于给定值的元素）。

使用方法与:gt(index)一样，这里不再详细介绍。

9) :header

匹配页面中所有的标题（H1，H2，H3，…）元素，返回值为JQuery对象。该过滤器的使用方式比较简单，这里不再详细介绍。

10) :animated

匹配页面中所有正在执行动画的元素，返回值为JQuery对象。该过滤器的使用方式比较简单，这里不再详细介绍。

有关动画的更过内容，将在第8章详细讲解。

2. 内容选择器

如果你熟悉数据库的话，你应该知道，经常需要对数据库中的数据以多种方式进行查找，这里不妨写几个SQL语句，以便帮助大家理解JQuery：

SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery%’

SELECT * FROM UserInfo WHERE Email IS NULL

SELECT * FROM UserInfo WHERE Name IN (SELECT Name FROM AddressInfo)

SELECT * FROM UserInfo WHERE Email IS NOT NULL

除了对数据库有这样的查询，在面向对象编程中，对集合（ICollection）也经常如此；另外，在网页中，有时候也需要对网页的内容进行搜索。

只要你能理解以上四个SQL语句的作用，你会觉得本节所讲的四个JQuery过滤器很简单。

1) :contains(string)

首先，看第一个SQL语句：SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery%’，用来查找表UserInfo中Name包含JQuery字符串的所有记录。

JQuery框架的:contains(string)过滤器适用于查找当前JQuery对象（由过滤器前面的Selector匹配）中内容部分包含所指定字符串的所有HTML元素，并封装成JQuery对象后返回。使用语法：

jQuery(“selector:contains(string)”) 或 $(“selector:contains(string)”)

参数string：要搜索的字符串。

返回值：JQuery对象。

注意，该过滤器不是查找整个页面（就像上面的SQL语句不是查找整个数据库一样），而是查找过滤器前面的selector所返回的HTML元素集合。有如下HTML代码：

<ul>

<li >Silverlight</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li>Struts</li>

</ul>

找出包含字符串“P”的所有“Li”元素，并将内容设置为红色，JQuery代码如下：

jQuery(function() {

$("li:contains(P)").css("color", "red");

});

</script>

运行结果（图3-9）：

图3-9

2) :empty

我们再来看第二个SQL语句：SELECT * FROM UserInfo WHERE Email IS NULL，用来查找表UserInfo中所有Email为空的所有记录。

JQuery框架的:empty过滤器适用于查找当前JQuery对象（由过滤器前面的Selector匹配）中内容部分为空的所有HTML元素，并封装成JQuery对象后返回。使用语法：

jQuery(“selector:empty”) 或 $(“selector:empty”)

返回值：JQuery对象

它的查找范围与:contains(string)过滤器一样。有如下HTML代码：

<ul>

<li >Silverlight</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li>Struts</li>

</ul>

找出其中所有内容为空的“Li”元素，并将内容设置为“Empty”字符串，JQuery代码如下：

jQuery(function() {

$("li:empty").css("font-weight", "bold").text("Empty");

});

</script>

运行结果（图3-10）：

图3-10

3) :has(selector)

再来看第三个SQL语句：SELECT * FROM UserInfo WHERE Name IN (SELECT Name FROM AddressInfo)，用来查找表UserInfo中有地址（即在AddressInfo表中有相关记录）的所有记录。

JQuery 框架的:has(selector)过滤器适用于查找当前JQuery对象（由过滤器前面的Selector匹配）中包含指定元素（有selector参数确定）的所有HTML元素，并封装成JQuery对象后返回。使用语法：

jQuery(“selector:has(selector)”) 或 $(“selector:has(selector)”)

参数selector：JQuery选择器。

返回值：JQuery对象。

它的查找范围与:contains(string)过滤器一样。有如下HTML代码：

<ul>

<li >Silverlight</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li>Struts</li>

</ul>

找出包含<span>子元素的所有“Li”元素，并将内容字体设置为红色，JQuery代码如下：

jQuery(function() {

$("li:has(span)").css("color", "red");

});

</script>

运行结果（图3-11）：

图3-11

4) :parent

最后看第四个SQL语句：SELECT * FROM UserInfo WHERE Email IS NOT NULL，用来查找表UserInfo中列Email不为空的所有记录。

JQuery框架的:parent过滤器适用于查找当前JQuery对象（由过滤器前面的Selector匹配）中存在子元素或内容的所有HTML元素，并封装成JQuery对象后返回。使用语法：

jQuery(“selector:parent”) 或 $(“selector:parent”)

返回值：JQuery对象。

它的查找范围与:contains(string)过滤器一样。有如下HTML代码：

<ul>

<li >Silverlight</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li>Struts</li>

</ul>

找出所有内容不为空（包含子元素或文本）的“Li”元素，并将字体设置为粗体，JQuery代码如下：

jQuery(function() {

$("li:parent").css("font-weight", "bold");

});

</script>

运行结果（图3-12）：

图3-12

3. 可见性选择器

通过元素的可见性进行搜索。在网页中，可以通过两种方式定义元素的可见性：

1. 设置元素的样式：display:none

2. 表单中的隐藏域

1) :hidden

匹配当前selector中所有隐藏的HTML元素，并封装成JQuery对象返回，使用语法：

jQuery(“selector:hidden”) 或 $(“selector:hidden”)

返回值：JQuery对象。

注意，该过滤器不是查找整个页面，而是查找过滤器前面的selector所返回的HTML元素集合。有如下HTML代码：

<table>

<tr style="display:none"><td>Value 1</td></tr>

<tr><td>Value 2</td></tr>

</table>

要找出不可见的“Tr”元素，JQuery代码如下：

jQuery(function() {

$("tr:hidden");

});

</script>

查找结果：

<tr style="display:none"><td>Value 1</td></tr>

也可以用来查找表单的隐藏域，有如下HTML代码：

<form>

</form>

要找出隐藏域，JQuery代码如下：

jQuery(function() {

$("input:hidden");

});

</script>

查找结果：

2) :visible

匹配当前selector中所有隐藏的HTML元素，并封装成JQuery对象返回，使用方法同:hidden过滤器，这里不在介绍。

4. 属性选择器

用于根据元素的属性值进行搜索，如<input type=”text” value=””/>元素，就可以根据其type属性搜索。搜索的基本种类有6种，另外，还可以将属性过滤器进行任意的组合。

还是先写几个SQL语句共大家分析一下，理解了这些SQL语句，本节各过滤器就十分的简单：

SELECT * FROM UserInfo WHERE Name IS NOT NULL

SELECT * FROM UserInfo WHERE Name = ‘JQuery’

SELECT * FROM UserInfo WHERE Name != ‘JQuery’

SELECT * FROM UserInfo WHERE Name LIKE ‘JQuery%’

SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery’

SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery%’

1) [attribute]

看第一个SQL语句：SELECT * FROM UserInfo WHERE Name IS NOT NULL，找出表UserInfo中Name不为空的所有记录。

JQuery框架的[attribute]过滤器用来查找当前selector中所有具有指定属性的HTML元素，并封装成JQuery对象返回，使用语法：

jQuery(“selector[attribute]”) 或 $(“selector[attribute]”)

参数attribute：属性名。

返回值：JQuery对象。

注意，该过滤器不是查找整个页面，而是查找过滤器前面的selector所返回的HTML元素集合。有如下HTML代码。

<div id="myId">Has A ID Attribute.</div>

要找出所有带ID属性的“Div”元素，JQuery代码如下：

jQuery(function() {

$("div[id]");

});

</script>

查找结果：

<div id="myId">Has A ID Attribute.</div>

2) [attribute=value]

看第二个SQL语句：SELECT * FROM UserInfo WHERE Name = ‘JQuery’，用来查找表中所有Name为JQuery的所有记录。

JQuery框架的[attribute=value]过滤器用来查找当前selector中属性值等于指定value的HTML元素，并封装成JQuery对象返回，使用语法：

jQuery(“selector[attribute=value]”) 或 $(“selector[attribute=value]”)

参数attribute：属性名。

参数 = ：等于（完全匹配）。

参数value：指定的属性值。

返回值：JQuery对象

查找范围于[attribute]完全相同，有如下HTML代码：

<div id="myId">Has A ID Attribute.</div>

要找出ID为“theId”的“Div”元素，JQuery代码如下：

jQuery(function() {

$("div[id=theId]");

});

</script>

查找结果：

3) [attribute!=value]

类似与第三个SQL语句：SELECT * FROM UserInfo WHERE Name != ‘JQuery，[attribute!=value]用于查找当前selector中属性值不等于value的所有HTML元素。

使用方法通上，这里不再介绍。

4) [attribute^=value]

类似与第四个SQL语句：SELECT * FROM UserInfo WHERE Name LIKE ‘JQuery%’，[attribute^=value]用于查找当前selector中属性值以value 开始的所有HTML元素。

语法同上，有如下HTML代码：

<div id="myId">Has A ID Attribute.</div>

要找出ID以“the”开始的“Div”元素，JQuery代码如下：

jQuery(function() {

$("div[id^=theId]");

});

</script>

查找结果：

5) [attribute$=value]

类似与第五个SQL语句：SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery’，[attribute$=value]用于查找当前selector中属性值以value 结束的所有HTML元素。

使用方法同上，这里不再介绍。

6) [attribute*=value]

类似与第六个SQL语句：SELECT * FROM UserInfo WHERE Name LIKE ‘%JQuery%’，[attribute*=value]用于查找当前selector中属性值包含 value的所有HTML元素。

使用方法同上，这里不再介绍。

7) 属性选择器组合

除了使用基本的六中属性过滤器外，JQuery还允许将任意的属性过滤器进行组合，就类似于SQL语句中使用AND链接的组合条件。有如下HTML代码：

现有JQuery代码：

jQuery(function() {

$("input[id][name$='man']");

});

</script>

搜索结果：

5. 子元素选择器

在查找页面元素通常有两种方式：

1. 通过元素的特征（selector）在页面全文搜索

2. 通过元素的父子关系在DOM树中进行遍历

两种思路都可以很好的工作，一般也可以相互替换，只是使用时哪种更方便而已！

在开发程序时，唯一确定的是程序的最终功能（即：业务逻辑），至于程序的代码如何编写（有多个文件、多少个类、多少个方法、以及它们的命名等）都是不确定的。不同的人进行开发，可能得到完全不同的代码结果，但无论谁进行编写，最后的功能都应该一样！

JQuery框架中，每一个功能都有多种不同的实现方式，本节所讲的子元素过滤，使用前面章节所讲的技术也可以实现，只是代码的简易不同。

1) :nth-child(index)

匹配当前selector所返回的JQuery对象中的第index个元素，该过滤器使用非常灵活，允许我们使用多种规则进行查找，index的取值有：

1. 1、2、3、……（下标从1开始），根据下标匹配某一个元素。

2. even，匹配下标为偶数的所有子元素。

3. odd，匹配下标为奇数的所有子元素。

4. 3n，匹配下标为3的倍数的所有子元素。

5. 3n+1，匹配下标为3的倍数加1的所有子元素。

6. 3n+2，匹配下标为3的倍数加2的所有子元素。

……

JQuery允许index的范围理论上时无限的，上面列出的六种我们常用的格式，语法如下：

jQuery(“selector:nth-child(index)”) 或 $(“selector:nth-child(index)”)

参数index：如上。

返回值：JQuery对象。

注意，该过滤器不是查找整个页面，而是查找过滤器前面的selector所返回的HTML元素集合。有如下HTML代码。

.data{

border:solid 1px blue;

width:600px;

}

.data th{

background-color:skyblue;

text-align:left;

border-bottom:solid 1px skyblue;

}

.data td{

border-bottom:solid 1px skyblue;

}

</style>

……

<thead>

<tr>

<th>User Name</th><th>Email</th><th>MobilePhone</th>

</tr>

</thead>

<tbody>

<tr>

<td>Frank</td><td>eagle@126.com</td><td>13100006688</td>

</tr>

<tr>

</tr>

<tr>

<td>Hello</td><td>Hello@126.com</td><td>13888886688</td>

</tr>

<tr>

<td>World</td><td>World@126.com</td><td>13566668866</td>

</tr>

<tr>

</tr>

<tr>

<td>Hello</td><td>Hello@126.com</td><td>13888886688</td>

</tr>

</tbody>

</table>

以上HTML代码的显示效果如下图3-13：

图3-12

现在要是Table的数据行，隔行现实不同的色，我们可以通过使用:nth-child(even)过滤器进行实现：

jQuery(function() {

$(".data>tbody>tr:nth-child(even)").css("background-color", "#C1D2EE");

});

在上面代码中，首先通过“类选择器”和“父子选择器”查找表格的数据行，在通过:nth-child(even)过滤器找出所有的偶数行（下标从1开始），通过css函数为HTML元素添加样式，运行结果如下（图 3-14）：

图3-14

同样是上面的HTML代码，如果我们希望使用3种颜色来显示每一行该如何做呢？其实也很简单，:nth-child(index)的参数允许取值3n,3n+1,3n+2就可以了，JQuery代码如下：

jQuery(function() {

$(".data>tbody>tr:nth-child(3n+1)").css("background-color", "RED");

$(".data>tbody>tr:nth-child(3n+2)").css("background-color", "BLUE");

});

这里不再显示运行结果。

2) :first-child

匹配当前selector所返回的JQuery对象中的第一个子元素，等价于:nth-child(1)。于:frist基本过滤器不同之处在于，:first只返回selector中的第一个，而:first-child为每一个父元素返回第一个子元素，有如下HTML代码：

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

要找出每一个“Ul”的第一个“Li”元素（一共2个），JQuery代码如下：

jQuery(function() {

$("ul li:first-child").css("color", "red");

});

</script>

运行结果为（图3-15）：

图3-15

如果使用:first过滤器，语法虽然与上面相似，但只会得到第一个UL的LI元素，JQuery代码如下：

jQuery(function() {

$("ul li:first ").css("color", "red");

});

</script>

3) :last-child

匹配当前selector所返回的JQuery对象中的最后一个子元素。于:last基本过滤器不同之处在于，:last只返回selector中的最后一个元素，而:last-child为每一个父元素返回最后一个子元素。

使用语法与:first-child一样，这里不再详述。

4) :only-child

匹配是父元素中唯一一个子元素的元素，有如下HTML代码：

<ul>

<li>Brandon</li>

</ul>

<ul>

</ul>

要找出只包含一个“Li”元素的“Ul”元素，JQuery代码如下：

jQuery(function() {

$("ul li:only-child");

});

</script>

查找结果如下：

6. 表单选择器

该类选择器用于查找网页中指定的表单，使用方法与前面章节所讲十分相似，本节不做详细的讲述。

1) :input

匹配所有的表单项。

注意：该选择器不仅仅返回<input />标签，还会返回<select/>、<textarea />、<button/>等。总之，:input匹配所有的表单项。有如下HTML代码：

<form>

</form>

要找出所有的表单项（统计个数），JQuery代码如下：

jQuery(function() {

var count = $("form :input").size();

});

</script>

运行后，count的值为12，共12个表单项。

2) :text

匹配所有的文本框，等价于:input[type=text]，是:input的子集，同样使用上面的HTML代码，有如下JQuery代码：

jQuery(function() {

$("form :text").size();

});

</script>

查找结果为：

3) :password

匹配所有的密码框，等价于:input[type=password]，是:input的子集，使用方法同上。

4) :radio

匹配所有的单选框，等价于:input[type=radio]，是:input的子集，使用方法同上。

5) :checkbox

匹配所有的复选框，等价于:input[type=checkbox]，是:input的子集，使用方法同上。

6) :submit

匹配所有的提交按钮，等价于:input[type=submit]，是:input的子集，使用方法同上。

7) :image

匹配所有的图片域，等价于:input[type=image]，是:input的子集，使用方法同上。

注意，该过滤器不同于$(“img”)。

8) :reset

匹配所有的重设按钮，等价于:input[type=reset]，是:input的子集，使用方法同上。

9) :button

匹配所有的普通按钮，等价于:input[type=button] 和button标签选择器，是:input的子集，使用方法同上。

10) :file

匹配所有的文件上传域，等价于:input[type=file]，是:input的子集，使用方法同上。

11) :hidden

匹配所有的隐藏域，等价于:input[type=hidden]，是:input的子集，使用方法同上。

根据上面的表单过滤器，可以非常方便的多页面表单元素进行设置。在126邮箱的登录页面，登录表单有各种效果，如果使用JQuery实现，那是非常简单的，简短的几行代码就可以实现！大家不妨试着进行实现，本课程在事件处理这一章将会给大家一个完美的实现。

7. 表单属性选择器

表单属性选择器是作为表单选择器的一个补充，使用表单选择器的同时，还允许根据表单元素常用的一些属性（如：disable、chedked、selected等）进行更精确的过滤。

1) :enabled

匹配表单项中所有允许操作的元素，有HTML代码如下：

<form>

</form>

执行如下的JQuery代码：

jQuery(function() {

$("input:enabled");

});

</script>

查找结果为：

2) :disabled

匹配表单项中所有不允许操作的元素，于:enabled相反，同样使用上面HTML代码执行如下的JQuery代码：

jQuery(function() {

$("input:disabled");

});

</script>

查找结果为：

3) :checked

匹配所有表单项中被选中的元素（复选框、单选框），不包含select中的option。有如下HTML代码：

<ul>

<li><input type="checkbox" value="JavaScript" />JavaScript</li>

<li><input type="checkbox" value="Silverlight" />Silverlight</li>

</ul>

</form>

当点击“统计”按钮时，找出所有被选中的复选框，并将其值显示在ID为“checkResult”的DIV中，编写如下JQuery代码：

function showResult() {

var result = "";

$("input:checked").each(function(index) {

if (index != 0)

result = result + ",";

result = result + this.value;

});

$("#checkResult").text(result);

}

</script>

执行结果如下（图3-16）：

图3-16

4) :selected

匹配所有表单项中被选中的option元素，有如下HTML代码：

<option value="1">Flowers</option>

<option value="2" selected="selected">Gardens</option>

<option value="3">Trees</option>

</select>

执行如下JQuery代码：

jquery(function(){

$("select option:selected");

});

</script>

查找结果如下：

<option value="2" selected="selected">Gardens</option>

posted on 2009-06-12 19:49 netEagle 阅读(714) 评论(0) 收藏举报

第3章 高级查找

1. 选择器过滤器

1) :first

2) :last

3) :not(selector)

4) :even

5) :odd

6) :eq(index)

7) :gt(index)

8) :lt

9) :header

10) :animated

2. 内容选择器

1) :contains(string)

2) :empty

3) :has(selector)

4) :parent

3. 可见性选择器

1) :hidden

2) :visible

4. 属性选择器

1) [attribute]

2) [attribute=value]

3) [attribute!=value]

4) [attribute^=value]

5) [attribute$=value]

6) [attribute*=value]

7) 属性选择器组合

5. 子元素选择器

1) :nth-child(index)

2) :first-child

3) :last-child

4) :only-child

6. 表单选择器

1) :input

2) :text

3) :password

4) :radio

5) :checkbox

6) :submit

7) :image

8) :reset

9) :button

10) :file

11) :hidden

7. 表单属性选择器

1) :enabled

2) :disabled

3) :checked

4) :selected

第3章高级查找