因為項目需要,同時也因為興趣,在近一段時間研究和使用了jQuery,它真的是太強大了,代碼非常的優雅和簡潔,好后悔現在才開始了解它,雖然目前網絡上關于jQuery的資料、學習心得,教程多得你看不完,但我還是想把自己的一點學習經驗寫下來,不管是提供給那些想學習jQuery的人,還是保留一份學習筆記,我覺得這都是很有必要的。
在說jQuery之前,不得不提下現在也非常流行的mootools框架。在網上,很多人把mootools比作java,把jquery比作perl。我沒研究過mootools,也不發表意見,這完全沒有意義。只要本身不存在重大缺陷就可以了。用好了都強大。好比Java和.NET爭論了這么多年,一樣的道理。
jQuery,顧名思義,也就是JavaScript和查詢(Query),即是輔助開發的庫。是繼prototype之后又一個優秀的JavaScript框架。它如暴風雪般席卷WEB前端開發,jQuery已確定成為ASP.NET MVC和Visual Studio 2008版本中的正式組成部分,諾基亞手機平臺Web Run-Time也將納入jQuery。所以,請相信,選擇jQuery是不會錯的。如果你看到這里還有猶豫,那么我再說個理由,應該能打消你的最后疑慮了。2009年12月份Tiobe編程語言排行榜JavaScript升到第8名,并且在上升勢頭最強勁的語言中排名第3位。我在這里不是想說排行榜的話題,因為那又會引發一場說不完的爭論。我的意思是,排行榜不能說明一切問題,但至少能夠說明,現在用哪種語言的人多,人多則說明有活力,相應的其它各種資源也會較豐富。JavaScript腳本已經深入WEB應用之中。而作為優秀的JavaScript框架,它的前景不用懷疑。除非出現一個比jQuery更牛B,更優秀的東東。
我不打算像寫教程那樣,把jQuery的基礎用法都羅列出來,那會很無趣,也沒意義。網上這方面的知識隨便搜一下就一大堆。我準備從項目的角度出發,寫出自己的感受。當然,一份API幫助文檔是必不可少的,在最末尾提供了jQuery-1.2.6.chm下載,需者自取。
首先我們要知道,JavaScript開發基本可以分為以下四個部分:
1、查找DOM元素進行取值和賦值的操作、在特定節點位置進行內容的取值和賦值操作(innerHTML)。
2、針對元素進行事件監聽。
3、通過操作DOM節點結合改變元素的CSS樣式,達到絢麗的動畫效果。
4、對DOM元素進行Ajax操作。
對于jQuery來說,可以對這四部分提供完美的實現:
a、jQuery擁有強大的選擇器,可以查找任意的DOM元素。同時jQuery對象實現鏈式語法,能夠很方便簡潔的寫出強大的操作。比如操作屬性:$("#chkbox").attr("checked","checked").attr("disabled","disabled")。可以這樣繼續鏈下去,包括增加事件、樣式等等操作。
b、在頁面加載時給DOM綁定事件。$("#chkbox").click(function(){ alert("hello jquery!"); });
c、show()和hide()是jQuery中最基本的動畫。對元素顯示和隱藏,當然,我們還可以實現其它的更復雜的動畫。
d、$.ajax(options)是jQuery中最底層的Ajax實現。除此之外,還可以使用$.get()或$.post()實現Ajax請求。
了解了以上內容后,jQuery帶給我們的另一個驚喜,在于它的API支持當前多種主流瀏覽器,使得你不用再為了IE、FireFox等兼容問題而抓頭發傷腦筋。在以前做項目的時候,我總是喜歡將行為或樣式屬性寫在DOM中。這是極其不好也極其不規范的一種做法。如今采用jQuery后,我將所有的行為全部從DOM中抽取了出來,放到jQuery初始化函數中進行綁定。而且jQuery的初始化函數比window.onload的加載速度更快。
$(function(){
$("#chkbox").click(
function(){
alert("hello jQuery!");
}
);
});
<input type="checkbox" id="chkbox"/>
上面是一種簡寫方法,不管是初始化函數還是綁定事件。推薦采用這種寫法。
※下面這種寫法是不可取的,行為一定要和DOM分離:
function chkClick(){
alert("hello jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>
※不要再把樣式寫到DOM里面,這是很難維護的一件事情:
<span style="font-size:15pt;color:red">hello jQuery</span>
應該統一采用CSS文件定義或是定義class類,或是對ID進行定義:
.spanClass{
font-size:15pt;
color:red;
}
<span class="spanClass">hello jQuery</span>
#hello_span{
font-size:15pt;
color:red;
}
<span id="hello_span">hello jQuery</span>
是否對jQuery有了一些認識呢?下次我們繼續討論。 點擊下載: jQuery-1.2.6.chm
本文為菠蘿大象原創,如要轉載請注明出處。
posted on 2010-02-13 00:45
菠蘿大象 閱讀(3881)
評論(3) 編輯 收藏 所屬分類:
jQuery