在处理页面元素之前,首先要做的事情就是找到被处理的元素。在DOM模型中,比较常用的是文档对象(document)的getElementBy<Selector>(…)方法:
document.getElementById(elementId),根据元素的ID属性查找。
document.getElementsByName(elementName),根据元素的Name属性查找。
document.getElementsByTagName(tagName),根据元素的标签名查找。
使用这三种查找方式,可以满足大部分要求。除此之外,还可以使用元素间的“父子”关系在DOM树形结构中进行查找所需要的元素。
JQuery框架中提供了更加强大的功能进行元素的搜索,我们可以使用各种选择器十分方便的找出页面中任何满足条件(由Selector指定)的元素。本章中,主要讲解JQuery框架中Selector(选择器)的基本用法。
1. 基本选择器
图2-1
在样式表中,也有选择器,共有三种基本选择器:ID选择器、标签选择器、类选择器,以及这三种基本选择器的组合选择。样式表中选择器的用法这里不做过多的介绍。
幸运的是,JQuery延续了CSS选择器的的语法。JQuery定义了四种基本的选择器,前三种与CSS选择器一样,最后一种为“*”,表示选择页面(或元素)中所有的HTML元素,该选择器不常用,本节不做介绍。
1) ID 选择器
样式表中,我们使用“#”作为ID选择器的前缀,后跟HTML元素的ID名称,如“#container”表示页面中ID为“container”的元素。JQuery中可以直接使用ID选择器选中页面中唯一的一个HTML元素,语法如下:
jQuery(“#elementId”) 或 $(“#elementId”)
参数#elementId:要选择元素的ID
返回值:JQuery对象
值得注意的是,ID选择器的返回值为JQuery对象,并非HTML元素,所以可以使用JQuery框架提供的所有功能作用于HTML元素。
阅读下面HTML代码(图2-2),我们希望统计ID为container的DIV中元素的个数,使用ID选择器,和*选择器,以及上一章中学习过的“JQuery 元素访问”函数,我们可以轻松解决。
图2-2
首先使用JQuery获取DIV:
var ele = jQuery(“#container”);
变量ele则表示封装了DIV的JQuery对象,使用该JQuery对象找出所有的子元素:
var children = ele.find(“*”);
find函数在后面章节介绍,find函数的参数部分,我们提供了一个“*”选择器,表示获取ele中的所有子元素,返回值也是JQuery对象,接着使用上一章学习的JQuery对象的size()函数统计元素总数。
var count = children.size();
到这里,就得到了元素总数count。
JQuery也允许以Chain(链)的方式编写代码,以上三上代码可以简写为:
var count = $("#container").find("*").size();
alert(“Total Elements Count: “ + count);
运行代码,我们将得到一个消息框,显示“Total Elements Count: 9”,一共9个元素。完整的代码如下(其中body部分在以下小将节直接引用,不再提示):
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
jQuery(function() {
var count = $("#container").find("*").size();
alert(count);
});
</script>
</head>
<body>
<div id="container">
<ul>
<li>C# Programming Language</li>
<li class=”myStyle”>ADO.NET</li>
<li>JSP Web Application</li>
</ul>
<ul>
<li>JSP Servlet</li>
<li class=”myStyle”>Struts Spring Hibernate</li>
<li>JQuery</li>
<li>ASP.NET</li>
</ul>
</div>
</body>
</html>
1) 标签选择器
前面ID选择器可以精确的定位到页面中的特定元素,标签选择器和类选择器则用于获取一个满足条件的元素集合。在CSS中,标签选择器将将样式使用在所有的指定标签上,JQuery中的标签选择器则是获取所有指定标签的元素,并作为一个JQuery对象返回。语法如下:
jQuery(“tag-name”) 或 $(“tag-name”)
参数tag-name:元素标签名
返回值:JQuery对象
值得注意的是,标签选择器的返回值为JQuery对象,并非HTML元素,所以可以使用JQuery框架提供的所有功能作用于HTML元素。
现在要获取页面所有UL元素,让他们水平排列。在编写JQuery代码前,页面中有两个UL元素,位于ID为container的DIV标签中,显示效果如下图2-3:
图2-3
在JQuery的Load事件中添加如下代码,修改UL的样式(其中样式操作函数css在后面章节将详细讲解):
jQuery("ul").css("float", "left");
代码执行后,运行效果如下图2-4:
图2-4
我们也可以轻松找到页面中所有的LI元素,将其样式设置为none或设置为图片……。
jQuery("ul").css("float", "left");
jQuery("li").css("list-style", "none");
图2-5
2) 类选择器
经过前两个选择器的学习,相信熟悉CSS的朋友现在已经猜到类选择器的用法了,还是与CSS的类选择器一样。不错,JQuery不会让你失望,类选择器的使用方法还是十分简单:
jQuery(“.className”) 或 $(“.className”)
参数.className:样式的类名称。
返回值:JQuery对象
注意,在className前面还有一个”.”,一定不要忘记!另外,类选择器的返回值为JQuery对象,并非HTML元素,所以可以使用JQuery框架提供的所有功能作用于HTML元素。
要找出页面中带有样式“myStyle”的元素,并将元素的字体颜色设置为红色,在JQuery的Load事件中编写如下代码:
jQuery(".myStyle").css("color", "Red");
运行结果如下图2-6:
图2-6
总之,JQuery的三种基本选择器使用十分简洁,同时不失强大的功能;另外,这三种基本选择器还可以随意的进行组合使用,甚至可以添加特殊的过滤条件。JQuery处处都会给你带来惊喜。
1. Path(组合)选择器
顾名思义,组合选择器就是将多个Selector(选择器)以合理的规则组合在一起,构成一个复杂的选择器,语法如下:
[Selector1] 组合 [Selector2] 组合 … 组合 [SelectorN]
其中,Selector可以为任意的基本选择器,各选择器间构成了一种层次关系。
注意:各选择器间使用合法的“选择器链接符号(规则)”,针对不同的规则,JQuery的查找方式不同。JQuery框架中支持四种链接符号:
空格:普通组合。
大于号(>):父子(父元素、子元素)组合。
加号(+):前后组合。
波浪号(~):前后(同一级元素)组合。
下面各节将详细介绍。
1) 普通组合
图2-7
在上面的样式表中,定义了三个样式,一个ID选择器,一个标签(li)选择器,一个组合选择器(li .myStyle)。这个组合选择器用于定义所有li标签的子元素中,拥有myStyle样式类的元素,设置其字体为红颜色。对于组合选择器,你也可以理解成:
SELECT Tag FROM Li WHERE Tag HAS ‘myStyle’
这个组合,其实就是相当于再加上一个Where(条件),所以不难理解组合选择器的作用。
JQuery中的组合选择器也是如此,如果要找出页面中所有带“myStyle”样式的LI标签的子元素,使用JQuery就可以简单的写成:
jQuery(“li .myStyle”)
返回值为JQuery对象,封装的是LI标签的子元素,而不是LI标签本身。另外,组合选择器中的每一个Selector(选择器)间使用空格分开。有如下HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
现有JQuery代码如下:
$("form input")
那么该JQuery代码返回的JQuery对象为:
[ <input name="name" />, <input name="newsletter" /> ]
3) parent > child
父子(父元素、子元素)组合与普通组合十分相似,所不同的是他们查找的层次不一样。普通组合会在在子元素的树内查找,而父子组合仅仅查找子元素这一级。有如下HTML代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
JQuery代码如下:
$(“form > input”)
上面代码所返回的JQuery对象为:
[ <input name="name" /> ]
而<input name="newsletter" />并没有被返回。显而易见,父子组合仅仅在子元素这一层进行搜索,并不会搜索子元素的子元素(即:子元素树),于普通组合器的区别也就在这里。
<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>
</tbody>
</table>
上面HTML代码定义了一个Table,现在希望通过JQuery修改Table为如下效果(图2-8):
图2-8
修改表格的边框颜色为蓝色,并调整表格的宽度为600像素,可以使用类选择器获取表格元素,并使用css函数设置样式:
$(".data").css("border", "solid 1px blue").css(“width”,”600px”);
修改标题行的背景颜色为“SkyBlue”,使用父子组合找到“thead”标签,再使用普通组合找到“th”标签,并使用css函数设置样式:
$(".data>thead th").css("background-color", "SkyBlue");
修改每一数据行下边框的样式,方法同上:
$(".data>tbody td").css("border-bottom", "solid 1px SkyBlue");
完整的代码如下:
<script type="text/javascript">
jQuery(function() {
$(".data").css("border", "solid 1px blue").css("width","600px");
$(".data>thead th").css("background-color", "SkyBlue");
$(".data>tbody td").css("border-bottom", "solid 1px SkyBlue");
});
</script>
使用JQuery设置页面样式的优点在于,可以是HTML元素于CSS彻底的分离。在编写HTML(或服务器端的控件、标签)的时候,完全不需要考虑样式该如何进行设置,等得到HTML页面之后,再统一的使用JQuery进行动态调整,进而使代码有更好的扩展性。
现在再修改前面HTML代码,再添加一个格式完全一样的Table:
<table class="data" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>User Name</th><th>Email</th><th>MobilePhone</th>
</tr>
</thead>
<tbody>
<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>
运行结果如下(图2-9):
图2-9
使用起来非常轻松。
4) prev + next
前两个组合是搜索子元素,而“prev+next”则是搜索“prev”后面的“next”元素,是前后关系。prev和next都是合法的Selector(选择器)。通过如下例子,大家可以很容易理解:
<form>
<input name="prev" />
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
JQuery代码如下:
$("label + input")
代码执行结果的JQuery对象:
[ <input name="name" />, <input name="newsletter" /> ]
而不包含HTML元素<input name="prev" />。
5) prev ~ siblings
在“prev”后搜索“siblings”元素,但只局限在与“prev”同一级进行搜索。我们还是使用上面的HTML代码:
<form>
<input name="prev" />
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
JQuery代码如下:
$("label ~ input")
代码执行结果的JQuery对象:
[ <input name="name" />
而不包含HTML元素<input name="newsletter" />。