JQuery 遍历 DOM

来源：互联网发布：中国电信4g网络类型编辑：程序博客网时间：2024/06/06 09:07

JQuery DOM遍历

JQuery遍历DOM的三种方式：

n CSS选择符

n XPath 属性选择符

n 自定义选择符

CSS选择符

JQuery 支持CSS规范3中的大多数选择符。这种对CSS选择符的支持使得开发者地增加网站时，不必考虑不同浏览器之间的CSS差别，只要浏览器启用了javascript 就可以。

$(‘#selecte-id’) 可以查找文档中ID为”selected-id” 的元素

> 元素组合符号

$(‘#selected-id > childE-name’); 可以查找ID为selected-id 元素的子元素中所有 childE-name 元素;

下面以一个例子说明如何使用CSS选择符

一个HTML文档如下：是一个无序列表嵌套的例子

JQuery 的使用：将顶级列表横向排放

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<div id="title">Selected Shakespeare Palys</div>

<li>Comedies

<ul>

<li>A Midsummer Night't Dream</li>

<li>Twelfth Night</li>

</ul>

</li>

<li>Tragediea

<ul>

<li><a href="hamlet.pdf">Hamlet</a></li>

<li>Macbeth</li>

<li>Remeo and Juliet</li>

</ul>

</li>

<li>Histories

<ul>

<li>Henry IV(<a href="mailto:henryiv@king.co.uk">Email</a>)</li>

<ul>

</ul>

<li><a href="http://www.shakespaer.co.uk/henryv.htm">Henry V</a></li>

</ul>

</li>

</ul>

</BODY>

</HTML>

显示如下图：

添加一个slice.css 样式文件，输入如下内容：

color:#00f; /*普通连接显示蓝色*/

}

a.mailto{ /*邮件连接显示红色*/

color:#f00;

}

a.pdflink{ /*PDF文件连接显绿色*/

color:#090;

}

a.mysite{

text-decoration:none;

border-bottom:1px dotted #00f;

}

.horizontal{

float:left; /*将元素浮动到后面元素的左边*/

list-style:none; /*移除项目符号*/

margin:10px; /*为该元素的每个边添加10象素的边距*/

}

body{ /*全局字体*/

font-size:12px;

}

增加一个slice.js 文件,添加入下内容：

$(document).ready(function(){

$('#selected-plays > li').addClass('horizontal');

$('#selected-plays li:not(.horizontal)').addClass('sub-level');

$('a[href^="mailto:"]').addClass('mailto'); /*href属性以.mailto 头的链接元素 */

$('a[href$=".pdf"]').addClass('pdflink'); /*href属性以.pdf结尾的链接元素 */

$('a[href*="mysite.com"]').addClass('mysite'); /*网站任意位置出现href属性为mysite.com的链接元素*/

});

代码注解：

先看方法体前两行：

$('#selected-plays > li').addClass('horizontal');

查找ID为selected-plays 元素中所有<li>子元素，为其添加样式

$('#selected-plays li:not(.horizontal)').addClass('sub-level');

查找ID为selected-plays 元素中所有<li>子元素中没有使用horizontal样式的元素，为其添加 sub-level样式，采用的是否定式伪类选择符。

XPath 属性选择符 [涉及到属性选择符采用XPath 中方式来标识属性]

如：

$(‘a[@title]’) 查找带title 属性的连接元素。

XPath另外的一种用途，不加@符号时，表示包含另一种元素中的元素。

$(‘div[ol]’) 查找包含ol元素的DIV 元素

属性选择符允许使用正则表达式的方式来标识属性

^ 标识字符串开始

$ 标识字符串结尾

* 表示字符串任意位置

看上面slice.js 函数体中后三行代码：

$('a[href^="mailto:"]').addClass('mailto'); /*href属性以.mailto 头的链接元素 */

$('a[href$=".pdf"]').addClass('pdflink'); /*href属性以.pdf结尾的链接元素 */

$('a[href*="mysite.com"]').addClass('mysite'); /*网站任意位置出现href属性为mysite.com的链接元素

演示了上面三种符号的用途。

修改过后的显示如下：

自定义选择符

JQuery 自定义选择符与CSS伪类选择符的语法相同,即选择以一个:号开始

如果要在使用horizontal 类的DIV集合中选择每2项,我们可以如下这样写:

$(‘div.honrizaontal:eq(1)’)

CSS选择符 $(div.nth-child(1)) 取的是作为其父元素每一个子元素的所有DIV

JQuery 中常用的两具自定义选择符:odd :even 设置表格奇偶行样式

下面是示例: chaper01.html 是一个表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<table>

<tr>

<th>Title</th>

<th>Category</th>

<th>Year Published</th>

</tr>

<tr>

<td>Comedy</td>

</tr>

<tr>

<td>Comedy</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Remeo and Juliet</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Henry IV,Part I</td>

<td>Henry</td>

</tr>

<tr>

<td>Henry V</td>

<td>Henry</td>

</tr>

</table>

</BODY>

</HTML>

在JS文件slice.js中添加入下代码:

$(document).ready(function(){

/*$('tr:odd').addClass('odd'); */ /*查找所有表格奇数行*/

/*$('tr:even').addClass('even');*/ /*查找所有表格偶数行*/

/*$('td:contains("Henry")').addClass('highlight'); /*查找包涵"Henry"的TD元素*/

$('tr').filter(':odd').addClass('odd');

$('th').parent().addClass('table-heading'); /* 获其父类元素后,添加表头样式 */

$('tr:not([th]):even').addClass('even'); /*添加奇数行样式*/

$('tr:not([th]):odd').addClass('odd'); /*添加偶数行样式*/

/*$('td:contains("Henry")').next().addClass('highlight'); */

/*siblings() 取得该元素所有同辈元素 */

/*$('td:contains(Henry)').siblings().addClass('highlight'); */

/*$('td:contains("Henry")').parent().find('td:gt(0)').addClass('highlight');*/

/*$('td:contains("Henry")').parent().find('td').not(':contains("Henry")').addClass('highlight');*/

$('td:contains("Henry")').parent().find('td:eq(1)').addClass('highlight').end().find('td:eq(2)').addClass('highlight');

});

修改后的样式显示如下:

JQuery可以查找到某个单元格元素,为其添加样式。