想當年,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,如需轉載請自行聯系原作者