第3章 高级查找
1. 选择器过滤器
前面两节详细讲解了基本选择器的使用方法以及它们之间的组合关 系,通过选择器,可以从页面中获取所有满足Selector的元素。有时候,我们还需要在这些元素中进一步筛选(例如,在Web应用程序中,根据条件从数 据库查询数据,如果数据量比较大,往往会使用分页,就相当于再次筛选)。JQuery框架中使用“选择器过滤 器”对Selector返回的元素集合进行过滤。
“选择器过 滤器”通常与Selector一起使用,构成一个新的Expression(表达式)。在这个表达式中,Selector的用法与前 面介绍过的完全一致,过滤器可以直接附加在Selector之上。JQuery中基本的过滤器有10种,下面将分别详细介绍。
1) :first
匹配找到的第一个元素,使用语法:Selector:first,返回值为JQuery对象。在返回的JQuery对象中封装了Selector所查找到的第一个元素。有如下代码:
<ul>
<li>ASP.NET</li>
<li>Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
现要找出列表中的第一项<li>ASP.NET</li>,并将其字体颜色设置为红色。这里就 可以使用标签选择器li获取页面中所有的li元素,同时使用:first过滤器获取第一个li元素,最后使用css函数为li设置前景色(color)样 式,JQuery代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
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代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("li:last").css("color", "Red");
});
</script>
于上面的JQuery代码及其相似,仅一处不同,在浏览器中运行的结果如下图3-2:
图3-2
将代码进一步扩展,页面中有两个列表,HTML代码如下:
<ul>
<li>ASP.NET</li>
<li>Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
<ul>
<li>JSP Servlet</li>
<li>Flex</li>
<li>Struts</li>
</ul>
现在需要找出每一个列表的最后(或第一)个元素,并将前景色(color)设置为红色。可以得知,最终需要修改两个元素的样 式<li>ASP.NET MVC</li>和<li>Struts</li>,不能简单的 使用一次:last过滤(因为:last过滤只能返回一个元素)。所以需要找到每一个ul元素,并找出每一个ul元素的最后一项。JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li class="myStyle">Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
现在需要找出所有不具有“myStyle”样式的列表项(li),并将内容前景色改为红色。我们首先找出要除去 的列表项(即拥有“myStyle”样式的项),很简单,使用类选择 器$(“.myStyle”)就可以了,将这个类选择器最为:not(selector)过滤器的参数。 JQuery代码如下:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
$("li:not(.myStyle)").css("color", "red");
});
</script>
运行结果如下图3-4:
图3-4
4) :even
匹配selector查询结果的所有偶数(0,2,4,…)项,同:odd过滤器(匹配selector查询结果的所有奇数项)相对应。这个两个过滤器在切换奇、偶行样式时比较有用,有如下HTML代码:
……
<style type="text/css">
.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>
……
<table class="data" cellpadding="2" cellspacing="0">
<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>
<td>Jack</td><td>jack@126.com</td><td>13544446688</td>
</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代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
现在需要找出列表中第2个元素(下标为1),并将字体该为粗体,JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
现在需要找出列表中后2个元素(下标大于0),并将字体该为粗体,JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li>ASP.NET MVC</li>
</ul>
<ul>
<li>JSP Servlet</li>
<li>Flex</li>
<li>Struts</li>
</ul>
找出包含字符串“P”的所有“Li”元素,并将内容设置为红色,JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li></li>
</ul>
<ul>
<li>JSP Servlet</li>
<li></li>
<li>Struts</li>
</ul>
找出其中所有内容为空的“Li”元素,并将内容设置为“Empty”字符串,JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li><span>It's here.</span></li>
</ul>
<ul>
<li>JSP Servlet</li>
<li></li>
<li>Struts</li>
</ul>
找出包含<span>子元素的所有“Li”元素,并将内容字体设置为红色,JQuery代码如下:
<script type="text/javascript">
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>ASP.NET</li>
<li >Silverlight</li>
<li></li>
</ul>
<ul>
<li>JSP Servlet</li>
<li></li>
<li>Struts</li>
</ul>
找出所有内容不为空(包含子元素或文本)的“Li”元素,并将字体设置为粗体,JQuery代码如下:
<script type="text/javascript">
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代码如下:
<script type="text/javascript">
jQuery(function() {
$("tr:hidden");
});
</script>
查找结果:
<tr style="display:none"><td>Value 1</td></tr>
也可以用来查找表单的隐藏域,有如下HTML代码:
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
要找出隐藏域,JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("input:hidden");
});
</script>
查找结果:
<input type="hidden" name="id" />
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>No ID.</div>
<div id="myId">Has A ID Attribute.</div>
<div id="">This ONE?</div>
要找出所有带ID属性的“Div”元素,JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("div[id]");
});
</script>
查找结果:
<div id="myId">Has A ID Attribute.</div>
<div id="">This ONE?</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>No ID.</div>
<div id="myId">Has A ID Attribute.</div>
<div id="theId">This ONE?</div>
要找出ID为“theId”的“Div”元素,JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("div[id=theId]");
});
</script>
查找结果:
<div id="theId">This ONE?</div>
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>No ID.</div>
<div id="myId">Has A ID Attribute.</div>
<div id="theId">This ONE?</div>
要找出ID以“the”开始的“Div”元素,JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("div[id^=theId]");
});
</script>
查找结果:
<div id="theId">This ONE?</div>
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代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
现有JQuery代码:
<script type="text/javascript">
jQuery(function() {
$("input[id][name$='man']");
});
</script>
搜索结果:
<input id="letterman" name="new-letterman" />
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代码。
<style type="text/css">
.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>
……
<table class="data" cellpadding="2" cellspacing="0">
<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>
<td>Jack</td><td>jack@126.com</td><td>13544446688</td>
</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>
<td>Jack</td><td>jack@126.com</td><td>13544446688</td>
</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>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
要找出每一个“Ul”的第一个“Li”元素(一共2个),JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("ul li:first-child").css("color", "red");
});
</script>
运行结果为(图3-15):
图3-15
如果使用:first过滤器,语法虽然与上面相似,但只会得到第一个UL的LI元素,JQuery代码如下:
<script type="text/javascript">
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>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
要找出只包含一个“Li”元素的“Ul”元素,JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
$("ul li:only-child");
});
</script>
查找结果如下:
<li>Glen</li>
6. 表单选择器
该类选择器用于查找网页中指定的表单,使用方法与前面章节所讲十分相似,本节不做详细的讲述。
1) :input
匹配所有的表单项。
注意:该选择器不仅仅返回<input />标签,还会返回<select/>、<textarea />、<button/>等。总之,:input匹配所有的表单项。有如下HTML代码:
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
要找出所有的表单项(统计个数),JQuery代码如下:
<script type="text/javascript">
jQuery(function() {
var count = $("form :input").size();
});
</script>
运行后,count的值为12,共12个表单项。
2) :text
匹配所有的文本框,等价于:input[type=text],是:input的子集,同样使用上面的HTML代码,有如下JQuery代码:
<script type="text/javascript">
jQuery(function() {
$("form :text").size();
});
</script>
查找结果为:
<input type="text" />
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>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
执行如下的JQuery代码:
<script type="text/javascript">
jQuery(function() {
$("input:enabled");
});
</script>
查找结果为:
<input name=”id”/>
2) :disabled
匹配表单项中所有不允许操作的元素,于:enabled相反,同样使用上面HTML代码执行如下的JQuery代码:
<script type="text/javascript">
jQuery(function() {
$("input:disabled");
});
</script>
查找结果为:
<input name=”email” disabled=”disabled” />
3) :checked
匹配所有表单项中被选中的元素(复选框、单选框),不包含select中的option。有如下HTML代码:
<form id="mainForm">
<ul>
<li><input type="checkbox" value="ASP.NET" />ASP.NET</li>
<li><input type="checkbox" value="JavaScript" />JavaScript</li>
<li><input type="checkbox" value="Silverlight" />Silverlight</li>
</ul>
<button onclick="showResult();">统计</button>
<div id="checkResult"></div>
</form>
当点击“统计”按钮时,找出所有被选中的复选框,并将其值显示在ID为“checkResult”的DIV中,编写如下JQuery代码:
<script type="text/javascript">
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代码:
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
执行如下JQuery代码:
<script type="text/javascript">
jquery(function(){
$("select option:selected");
});
</script>
查找结果如下:
<option value="2" selected="selected">Gardens</option>