本文通过一个具体的示例展示了如何使用jQuery操作DOM元素，包括为表格中的不同部分添加样式，实现特定文本的高亮显示，以及对外部链接进行过滤和标记。此示例涉及了jQuery的选择器、类操作、过滤方法等关键特性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.even{
background-color:#ccc;
}
.odd{
background-color:#fff;
}
.head{
background-color:#0cc;
}
.foot{
background-color:#9C9;
}
.highr{
color:#F00;
font-weight:bold;
}
.highb{
color:#00F;
font-weight:bold;
}
.highy{
color:#FF0;
font-weight:bold;
}
.afilter{
color:#F00;
}
.all{color:#093;}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
//alert($("tr").get(2).tagName);
$('tr:odd').addClass('odd');//奇数
$('tr:even').addClass('even');//偶数
$("tr:first").addClass('head');//头
$("tr:last").addClass('foot');//尾
//next 后 prev 前 prevAll
$("td:contains(zuo)").addClass("highr").next().addClass("highb").next().addClass('highy');
$('a').filter(function(){//过滤
return this.hostname != location.hostname;
}).addClass("afilter");
//后边所有
$("td:contains(xiao)").nextAll().andSelf().addClass("all");
//父级 遍历
$("td:contains(Z)").parent().children().addClass("all");
})
</script>
</head>
<body>
<table width="505" border="1">
<tr>
<td colspan="3">头</td>
</tr>
<tr>
<td>zuo</td>
<td>shi</td>
<td>chao</td>
</tr>
<tr>
<td><a href="http://www.baidu.com">Zuoshichao</a></td>
<td><a href="http://127.0.0.1">shi</a></td>
<td><a href="http://127.0.0.1/i.php">chao</a></td>
</tr>
<tr>
<td>Z</td>
<td>s</td>
<td>c</td>
</tr>
<tr>
<td>shi</td>
<td>hai</td>
<td>xiao</td>
</tr>
<tr>
<td>chao</td>
<td>hai</td>
<td>xiao</td>
</tr>
<tr>
<td>xiao</td>
<td>xiao</td>
<td>hai</td>
</tr>
<tr>
<td>chao</td>
<td>xiao</td>
<td>hai</td>
</tr>
<tr id="xhj">
<td>x</td>
<td>h</td>
<td>j</td>
</tr>
<tr>
<td colspan="3">尾</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
