介紹一個javascript庫--jquery
8月26日,jquery發布了1.0版。
jquery是一個輕便的,精簡的javascript庫,可以通過非常方便的代碼實現強大的功能。
jquery支持各種瀏覽器:Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+.
jquery的官方主站:
jquery的文檔資料:
jquery的下載地址:在官方主站首頁就可以下載到,壓縮后的大小為17.1k,確實小巧。
下面是一些相當jquery的使用說明和功能介紹:
如果你現在還沒有建立起來一個基本的測試頁面,那我建議你建立一個新的HTML頁面,并加入下面的代碼來作為練習的開始:
jQuery
domcument準備完成時加載代碼
很多javascript的開發人員習慣性的把類似下面的代碼作為他們程序代碼的開始:
window.onload = function(){ ... }
在頁面加載的時候立即運行{}中的代碼。問題是:在頁面中的所有的圖片還沒有下載完成的時候這些代碼是不會運行的。而當你想讓你代碼第一時間運行的時候,選用window.onload的理由得歸咎于html document還沒有下載完成這個事實。為了巧妙的饒開上面的兩個問題,你可以使用jQuery提供的一個很簡單的語句:
$(document).ready(function(){
// Your code here
});
上面的代碼將檢查document并且一直等到domcument對象可以被操縱—這也正是我們所期望的!將上面代碼復制到你html頁面的js區域,寫一些代碼測試一下喔 ^_^
讓一些事情發生在鼠標點擊時
首先,我們看看在點擊一個超鏈節發生了什么。添加下面的代碼:
$("a").click(function(){
alert("Thanks for visiting!");
});
保存并重新加載你的html頁面,點擊頁面上的超鏈節。在你離開本頁面準備轉到jQuery.org之前會彈出一個對話框。
添加一個Class
另外一個基本的任務就是為一個元素添加/移除一個Class。 請看下面的例子:
$("a").addClass("test");
或者
$("a").removeClass("test");
特效
在Basic Effects 部分,提供了幾個經常使用的特殊效果,讓你的網站更有吸引人魅力。我們來做一個小小的測試,修改之前添加的那個超鏈接的click方法:
$("a").click(function(){
$(this).hide("slow");
return false;
});
現在你點擊這個超鏈接,你將會發現這個它會慢慢的消失在你的視線中。可以在Feed Pile.com找到更多的特效。
另:還有一個15天學習jquery的教程(英文)
用戶登錄
還沒有賬號?
立即注冊