Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
当前位置: 网站首页 > 网站建设教程 >
十五天快速学会jQuery（第三天）
今天重点来看一个例子，我将代码帖出来然后对重点部分注释一下：我们先来看看Thewatchmakerproject传统的做法。再来看看jQuery是如何用5行代码来搞定的。
<!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=gb2312" />
<title>StripingTable</title>
<script src="jquery-latest.pack.js" type="text/javascript"></script><!--将jQuery引用进来-->
<script type="text/javascript">
//这个就是传说的ready
$(document).ready(function(){
//如果鼠标移到class为stripe的表格的tr上时,执行函数
$(".stripe tr").mouseover(function(){
//给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).addClass("over");}).mouseout(function(){
//移除该行的class
$(this).removeClass("over");})
//给class为stripe的表格的偶数行添加class值为alt });
$(".stripe tr:even").addClass("alt");
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/ }
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>名称</th>
<th>功能</th>
<th>服务</th>
<th>网址</th>
</tr>
</thead>
<tbody>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
<tr>
<td>昆明网站建设</td>
<td>云南网站优化seo</td>
<td>网站制作一条龙服务</td>
<td>web-phoenix.net</td>
</tr>
</tbody>
</table>
<p>网站sem<thead>竞价排名...</p>
</body>
</html>
这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？我们来看看，本来应该写成这样子的：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
重点：我们还可以写成如下代码：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样如果有很多对象并且在他们身上发生了很多动作，那么就会节省很多代码。
【十五天快速学会jQuery（第三天）热度：138】 【更多网站建设教程】