jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之后执行。


$(document).ready(function(){
// Your code here

});
这里有一个jQuery的技巧不得不提一下:jQuery的链式操作,什么是链式操作呢? 我们来看看,本来应该写成这样子的:


$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作
告诉jQuery找到有class=“affLink”的链接


$('a.affLink')
用个小例子总结:


<html>
<head>
<script src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tablecss tr").mouseover(function(){
//如果鼠标移到class为tablecss的表格的tr上时,执行函数
$(this).addClass("corss");}).mouseout(function(){
$(this).removeClass("corss")
});
//给class为tablecss的表格的偶数行添加class值为alt
$(".tablecss tr:even").addClass("alet");
$("a.links").mouseover(function(){
window.status=this.title;
return true;
}).mouseout(function(){
window.status="Done";
return true;
});
});
</script>
<style type="text/css">
.tablecss th
{
background:#B5CBE6;
color:#003399;
line-height:20px;
height:30px;
}
.tablecss td
{
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
.tablecss tr.alet
{
background:#ecf6fc; /*这行将给所有偶数行加上背景色*/
}
.tablecss tr.corss
{
background:#FEF3D1; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<table border="0" class="tablecss" cellpadding="0" cellspacing="0" width="50%">
<thead><tr>
<th>姓名</th>
<th>年龄</th>
<th>MSN</th>
<th>Email</th>
</tr></thead>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn" class="links" title="www.google.com">Rlog</a></td>
</tr>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn">Rlog</a></td>
</tr>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn">Rlog</a></td>
</tr>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn">Rlog</a></td>
</tr>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn">Rlog</a></td>
</tr>
<tr>
<td>Robin</td>
<td>50</td>
<td>rlog@live.com</td>
<td><a href="http://rlog.cn">Rlog</a></td>
</tr>
</table>
</body>
</html>