天天看點

jQuery,我很看好你哦

想當年,Ajax席卷Web開發界的時候,Javascript技術就再一次被聚焦,上一次聚焦恐怕要追溯到它出生那一天了。沒有JavaScript經驗的年輕人或者初學者,多數被這門輕量級語言搞暈。現在jQuery出現了,第一次聽說它是從一個年輕人朋友那裡得知的。據說在JavaScript基礎上再上一層樓,不僅功能強大了,也降低了學習的門檻,讓我聯想到從彙編語言到C的跨越。據說微軟已經決定将其加到Visual Studio中了,jQuery團隊獎金肯定會很豐厚。看看人家官網上是怎麼說的: 

jQuery is designed to change the way that you write JavaScript.

受不了誘惑,于是不顧年邁,依然開始小試了一下jQuery。

jQuery官網[url]http://jquery.com/[/url],目前最新版本1.2.6,還在高頻度的更新中。

下面是一段摘自社群一位網友的示例,作為我的第一個jQuery例子:

<!-- 

        Document     : 雙色表格

        Created on : 2008-10-28, 19:23:56

        Author         : Administrator

-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                <title>JSP Page</title>

                <script src="js/jquery.js" type="text/javascript"></script>

<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

                $(".stripe tr:even").addClass("alt");

                                //給class為stripe的表格的偶數行添加class值為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 * {

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"> 

<!color="#008000">--用class="stripe"來辨別需要使用該效果的表格-->

<thead>

    <tr>

        <th>姓名</th>

        <th>年齡</th>

        <th>QQ</th>

        <th>Email</th>

    </tr>

</thead>

<tbody>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>[email][email protected][/email]</td>

</tbody>

</table>

</body>

</html>

運作結果就是個隔行變色的表格,并且響應mouseover和mouseout事件。

另外,jQuery還有配套的plugin庫和ui庫,使原本複雜的JavaScript應用變得簡單強大起來。

很好,很強大。jQuery,我很看好你哦。

本文轉自 王傑瑞 51CTO部落格,原文連結:http://blog.51cto.com/wangjierui/108857,如需轉載請自行聯系原作者

繼續閱讀