$(documetn).ready(function(){
alert("config!");
})//該函數(shù)在頁面加載完成后執(zhí)行
一個簡單的雙色表格的例子
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="JqueryDemos.aspx.cs" Inherits="JqueryDemos._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<script src="jquery-1.4.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stripe tr").mouseover(function (){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
$(".stripe tr:even").addClass("alt");
});
</script>
<style type="text/css">
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.over td
{
background: #bcd4ec;
}
tr.alt td
{
background: #ecf6fc;
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0"
cellpadding="0">
<!--用class="stripe"來標(biāo)識需要使用該效果的表格-->
<thead>
<tr>
<th>
姓名
</th>
<th>
年齡
</th>
<th>
QQ
</th>
<th>
Email
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
</tr>
<tr>
<td>
xx
</td>
<td>
23
</td>
<td>
xx
</td>
<td>
xx
</td>
</tr>
<tr>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
</tr>
<tr>
<td>
xx
</td>
<td>
xx
</td>
<td>
31540205
</td>
<td>
xx
</td>
</tr>
<tr>
<td>
xx
</td>
<td>
xx
</td>
<td>
31540205
</td>
<td>
xx
</td>
</tr>
<tr>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
<td>
xx
</td>
</tr>
</tbody>
</table>
<p>
效果出來了哦！</p>
</body>
</html>
這里有一個jQuery的技巧不得不提一下：jQuery的鏈式操作，什么是鏈式操作呢？ 我們來看看，本來應(yīng)該寫
成這樣子的：
$(".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中，執(zhí)行完mouseover或者mouseout等方法之后，都會返回當(dāng)前的對象，所以可以進行鏈式操作
