第2章元素查找方法

在处理页面元素之前，首先要做的事情就是找到被处理的元素。在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部分在以下小将节直接引用，不再提示）：

<head>

<title>JQuery</title>

jQuery(function() {

var count = $("#container").find("*").size();

alert(count);

});

</script>

</head>

<body>

<ul>

<li>C# Programming Language</li>

<li>JSP Web Application</li>

</ul>

<ul>

<li>JSP Servlet</li>

<li class=”myStyle”>Struts Spring Hibernate</li>

<li>JQuery</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>Newsletter:</label>

</fieldset>

</form>

现有JQuery代码如下：

$("form input")

那么该JQuery代码返回的JQuery对象为：

[ <input name="name" />, <input name="newsletter" /> ]

3) parent > child

父子（父元素、子元素）组合与普通组合十分相似，所不同的是他们查找的层次不一样。普通组合会在在子元素的树内查找，而父子组合仅仅查找子元素这一级。有如下HTML代码：

<form>

<label>Newsletter:</label>

</fieldset>

</form>

JQuery代码如下：

$(“form > input”)

上面代码所返回的JQuery对象为：

[ <input name="name" /> ]

而<input name="newsletter" />并没有被返回。显而易见，父子组合仅仅在子元素这一层进行搜索，并不会搜索子元素的子元素（即：子元素树），于普通组合器的区别也就在这里。

<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>

</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");

完整的代码如下：

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：

<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>

<label>Newsletter:</label>

</fieldset>

</form>

JQuery代码如下：

$("label + input")

代码执行结果的JQuery对象：

[ <input name="name" />, <input name="newsletter" /> ]

而不包含HTML元素<input name="prev" />。

5) prev ~ siblings

在“prev”后搜索“siblings”元素，但只局限在与“prev”同一级进行搜索。我们还是使用上面的HTML代码：

<form>

<label>Newsletter:</label>

</fieldset>

</form>

JQuery代码如下：

$("label ~ input")

代码执行结果的JQuery对象：

[ <input name="name" />

而不包含HTML元素<input name="newsletter" />。

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

第2章 元素查找方法

1. 基本选择器

1) ID 选择器

1) 标签选择器

2) 类选择器

1. Path（组合）选择器

1) 普通组合

3) parent > child

4) prev + next

5) prev ~ siblings

第2章元素查找方法