是繼prototype之後又一個優秀的Javascript框架。對prototype我使用不多，簡單瞭解過。但使用上jquery之後，馬上被她的優雅吸引住了。有人使用這樣的一比喻來比較prototype和jquery：prototype就像Java，而jquery就像ruby.實際上我比較喜歡java（少接觸Ruby罷了）但是jquery的簡單的實用的確有相當大的吸引力啊！在專案裡我把jquery作為自已唯一的框架類包。使用其間也有一點點心得，其實這些心得，在jquery的文件上面也可能有講，不過還是記下來，以備忘罷。
一，找到你了！
還記得$()這個東西吧？prototype還是DWR都使用了這個函式代替document.getElementById()。沒錯，jquery也跟風了。為達到document.getElementById()的目的，jquery是這樣寫的：

程式碼

var someElement = $("#myId");

看起來比其他兩個框架的要多了一個#，好，看看下面的用法：

程式碼

$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

在prototype裡看過這樣的寫法嗎？第一行程式碼得到所有

標籤下的

元素。第二行程式碼得到class為container的

元素,第三行程式碼得到

標籤下面id為msg的元素。第四行程式碼得到context為上下文的table裡面所有的連線元素。
如果你熟悉CSS，Xpath，你會覺得這些寫法很眼熟！對了。正是。看出奧妙了吧。jquery就是透過這樣的方式來找到Dom物件裡面的元素。跟CSS的選擇器相類似。
二，Jquery物件？
jquery提供了很多便利的函式，如each(fn)，但是使用這些函式的前提是：你使用的物件是Jquer物件。使一個Dom物件成為一個Jquery物件很簡單，透過下面一些方式（只是一部分）：

程式碼

var a = $("#cid");(1)
var b = $("<p>hellop>");(2)
var c = document.createElement("table"); var tb = $(c);

三，代替body標籤的onload
這個慣例，也許是除了$()之外，用得最多的地方了。下面一段程式碼：

程式碼

$(document).ready(function(){
alert("hello");
});(1)
"alert('hello');">（2）

上面兩段程式碼是等價的。但程式碼1的好處是做到表現和邏輯分離。並且可以在不同的js檔案中做相同的操作，即$(document).ready(fn)可以在一個頁面中重複出現，而不會衝突。基本上Jqeury的很多plugin都是利用這個特性，正因為這個特性，多個plugin共同使用起來，在初始化時不會發生衝突。
不管怎麼說，這個慣例可以分離javascript與HTML。推薦使用。
四，事件機制
我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascript程式碼與html程式碼分離，保持HTML的清潔，還可以很輕鬆地繫結事件，甚至你可以不知道“事件”這個名詞。

程式碼

$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}

五，同一函式實現set&get

程式碼

$("#msg").html();
$("#msg").html("hello");

上面兩行程式碼，呼叫了同樣的函式。但結果卻差別很大。
第一行是返回指定元素的HTML值，第二行則是將hello這串字元設定到指定元素中。jquery的函式大部分有這樣的特性。
六，ajax
這是一個ajax橫行的時代。多少人，了不瞭解ajax的都跟著用上一把。呵。使用jquery實現ajax同樣簡單異常

程式碼

$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)
$("#msg").ajaxStart(function(){
this.html("正在載入。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("載入完成！");
});(4)

這些都是較常用的方法，get和post用法一樣。第一個引數是非同步請求的url，第二個為引數，第三個回撥方法。
3，4的方法會在指定的Dom物件上繫結響應ajax執行的事件。當然，jquery的AJAX相關的函式不僅是這些，有興趣可以去研究再多。
七，漸入淡出

程式碼

$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow");

沒錯，上面兩行程式碼已經分別實現了一個id為Msg的jquery物件的漸入和淡出。做一個像Gmail一樣的動態載入通知條，用jquery就那麼簡單。兩個函式接受的引數除了快慢等，還可以接收整型，作為漸入或淡出的完成時間，單位為MS。
八，plugin
這也是一個外掛的時代。
jquery外掛給我的感覺清一色的清潔，簡單。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,並引入jtip.js及其樣式即可以了。其他事情外掛全包。我喜歡jquery的一個重要原因是發現她已經有了很多很好，很精彩的外掛。

寫得很爛。可能大家看不出jquery的好處。嗯，光聽是沒用的，試用一下吧。你會發覺很有趣。
暫時告一段落吧。待有新的發現再來分享。

[@more@]

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/750220/viewspace-912465/，如需轉載，請註明出處，否則將追究法律責任。

上一篇： prototype.js函式介紹

下一篇： js cookie操作

請登入後發表評論登入

全部評論

jsquery簡單體驗

最新文章

相關文章