都说：“要想拥有自己从未拥有过的东西，就必须去做自己从未做过的事。”
我想拥有，因此，我开始从事。
1/15 window.onload()
该方法被程序员作为尽快解决客户端载入问题的捷径。
但是有的时候等待页面载入还是不够快。只有少数的大图片文件能够被快速的载入，而大部分的大图片文件载入还是很慢。
有书籍上记载围绕window.load()的研究，比如brother cake。可是，我“冲浪”回来后，还是没有收获到brother cake的相关信息。
然而，jQuery 的相关信息却满载而归。
$(document).ready(function(){
// code here ...
})
页面加载完成之后执行的函数。
我们或许曾经使用过Init()函数，但是似乎还是没有jQuery快。
2/15 双色表格（在IE下浏览，火狐下由于配置问题可能无法正常显示）
代码如下：
<html>
<head>
<script src="jquery-1.6.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.alt td{
background:#dcf6fc;
}
tr.over td{
background:bcd4ec;
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>姓名<th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国亮</td>
<td>23</td>
<td>31540205</td>
<td>[email protected]</td>
</tr>
<tr>
<td>邓国亮</td>
<td>23</td>
<td>31540205</td>
<td>[email protected]</td>
</tr>
<tr>
<td>邓国亮</td>
<td>23</td>
<td>31540205</td>
<td>[email protected]</td>
</tr>
<tr>
<td>邓国亮</td>
<td>23</td>
<td>31540205</td>
<td>[email protected]</td>
</tr>
<tr>
<td>邓国亮</td>
<td>23</td>
<td>31540205</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<p>PS:飘飘说我的table没有<thead>,我知错了...</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------
thead：表头
tbody：表主体内容
tr:even：表示表格的偶数行
在上面的script内，给表格行动态添加了class类名，实现特殊的css效果。
-------------------------------------------------------------------------------------------------------
这里需要提到jQuery的链式操作：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");
})
也可以这样写：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over");})
因为在jQuery执行完mouseover或mouseout后，都会返回当前的对象，所以可以进行链式操作。
-----------------------------------------------------------------------------------------------------------
如上，代码浏览时，可以看到这样的效果：
表格表头为蓝色背景，表格内容行的背景为双色。当鼠标over时，当前行背景颜色改变。当鼠标out时，当前行背景还原。
而由于，样式是实现定好的，因此实现鼠标over以及out的样式，实际上是添加和移除类选择器的过程。
2011-7-4 15:12 jQuery 学习笔记 by ChormSen
最新评论