JQuery 遍历 DOM
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>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="slice.css" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="slice.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div id="title">Selected Shakespeare Palys</div>
<ul id="selected-plays">
<li>Comedies
<ul>
<li><a href="www.mysite.com/syoulikeit">As you like it</a></li>
<li>All's Well That Ends Well</li>
<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:[email protected]">Email</a>)</li>
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
<li><a href="http://www.shakespaer.co.uk/henryv.htm">Henry V</a></li>
</ul>
</li>
</ul>
</BODY>
</HTML>
显示如下图：
添加一个slice.css 样式文件，输入如下内容：
a{
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>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="slice.css" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="slice.js" type="text/javascript"></script>
</HEAD>
<BODY>
<table>
<tr>
<th>Title</th>
<th>Category</th>
<th>Year Published</th>
</tr>
<tr>
<td>As You It</td>
<td>Comedy</td>
<td> </td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>2300</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1300</td>
</tr>
<tr>
<td>Remeo and Juliet</td>
<td>Tragedy</td>
<td>1400</td>
</tr>
<tr>
<td>Henry IV,Part I</td>
<td>Henry</td>
<td>1600</td>
</tr>
<tr>
<td>Henry V</td>
<td>Henry</td>
<td>1600</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可以查找到某个单元格元素,为其添加样式。