BlogJava-Tomorrow Belong To Nobody...-文章分类-JavaScripthttp://www.blogjava.net/leweslove/category/35736.html 永远也走不出这操蛋的围城...zh-cnMon, 03 Nov 2008 17:48:30 GMTMon, 03 Nov 2008 17:48:30 GMT60JQuery教程(二)---双色表格http://www.blogjava.net/leweslove/articles/238446.htmlleweslovelewesloveMon, 03 Nov 2008 14:38:00 GMThttp://www.blogjava.net/leweslove/articles/238446.htmlhttp://www.blogjava.net/leweslove/comments/238446.htmlhttp://www.blogjava.net/leweslove/articles/238446.html#Feedback0http://www.blogjava.net/leweslove/comments/commentRss/238446.htmlhttp://www.blogjava.net/leweslove/services/trackbacks/238446.html
<!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">
$(document).ready(function(){  //这个就是传说的ready
        $(".stripe tr").mouseover(function(){  
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $(this).addClass("over");}).mouseout(function(){ 
                                //给这行添加class值为over，并且当鼠标一出该行时执行函数
                $(this).removeClass("over");})  //移除该行的class
});
</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;  /*这个将是鼠标高亮行的背景色*/
}
 
</style>
</head>
 
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
<!--用class="stripe"来标识需要使用该效果的表格-->
<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>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>gl.deng@gmail.com</td>
  </tr>
</tbody>
</table>
</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中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作



leweslove 2008-11-03 22:38 发表评论
]]>JQuery教程(一)http://www.blogjava.net/leweslove/articles/238332.htmlleweslovelewesloveMon, 03 Nov 2008 06:19:00 GMThttp://www.blogjava.net/leweslove/articles/238332.htmlhttp://www.blogjava.net/leweslove/comments/238332.htmlhttp://www.blogjava.net/leweslove/articles/238332.html#Feedback0http://www.blogjava.net/leweslove/comments/commentRss/238332.htmlhttp://www.blogjava.net/leweslove/services/trackbacks/238332.htmljQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。

如果你这样想：“孩子，我需要另外一个javascript库，就好比我I need another hole in my head”那么加入这个俱乐部吧。这正是我第一次遇到的时候所想的。

我已经用过了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾参与了RICO, Yahoo YUI和其他一些库的开发。

没有了PHPjavascript和我一点也不亲近了。但是我还是尽全力保持头脑清醒，并尽量保持用AJAX去思考。

所以当我遇到jQuery的时候我想:“还需要另外一个javascript库吗?不了,谢谢…”

window.onload()是传统javascript里一个能吃苦耐劳的家伙。它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。

但有时候等待页面载入还是不够快。

只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使window.onload()载入的很慢。所以当我为最近的网络营销创建一个web应用程序的时候我不得希望更快一点。有一些围绕window.onload()的新研究(比如brother cake)的代码是一种快速的方式。如果你需要，可以试试。

但是如果你要做一些DOM(文档对象模型)javascript的编程，那么你为什么不试试jQuery，它就像你自己亲自制作一个蛋糕，并品尝它。（双关Brother Cake，俏皮话）。

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

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

你可以用他来载入任何你想要载入的javascript，并不一定要保留jQuery的编码风格。让jQuery同时去执行多个函数也是可以的。

你以前可能见过类似于init()之类的函数，你会发现jQuery会快很多。

在以后的教程里我们会一遍又一遍的用到这个函数。

OK你现在可以尝试一下代码

$(document).ready(function(){
alert("Congratluations!");
});
很Easy，不是吗？ 用几分钟时间做的双色表格。


                                                                                                                                                    
                                                                                                                                            转自Jquery中文社区

leweslove 2008-11-03 14:19 发表评论
]]>