<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$("document").ready
(
function()
{
$("a").click(function(){
$('#ui1>li').addClass('uiCss');
$('tr:odd').addClass('odd');
//$('tr:even').addClass('even');
$('tr').filter(':even').addClass('even');
$('th').parent().addClass('table-heading');
$('td:contains("789")').siblings().addClass('highlight');
});
}
);
</script>
<style type="text/css">
.uiCss
{
float:left;
list-style:none;
margin:10px;
}
.odd
{
background-color:#ffc;
}
.even
{
background-color:#cef;
}
.table-heading {
background-color: #ff0;
}
.highlight {
color: #f00;
font-weight: bold;
} </style>
</head>
<body>
<a id="getajax" href="#" class="hello" >单击改变列表样式</a>
<ul id="ui1">
<li>广州
<ul>
<li>销售</li><li>技术</li><li>财务</li>
</ul>
</li>
<li>北京
<ul>
<li>销售</li><li>技术</li><li>财务</li>
</ul>
</li>
<li>上海
<ul>
<li>销售</li><li>技术</li><li>财务</li>
</ul>
</li>
</ul>
<table>
<tr>
<th>t
</th>
<th>h
</th>
</tr>
<tr>
<td>123</td><td>456</td>
</tr>
<tr>
<td>123</td><td>456</td>
</tr>
<tr>
<td>123</td><td>456</td>
</tr>
<tr>
<td>789</td><td>789</td>
</tr>
</table>
</body>
</html>