一，找到你了！
還記得$()這個東西吧？prototype還是DWR都使用了這個函數代替document.getElementById()。沒錯，jquery也跟風了。爲達到document.getElementById()的目的，jquery是這樣寫的：
Java代碼 ![收藏代碼]()
- var someElement = $("#myId");
看起來比其他兩個框架的要多了一個#，好，看看下面的用法：
Java代碼 ![收藏代碼]()
- $("div p");(1)
- $("div.container")(2)
- $("div #msg");(3)
- $("table a",context);(4)
在prototype裏看過這樣的寫法嗎？第一行代碼得到所有<div>標籤下的<p>元素。第二行代碼得到class爲container的<div>元素,第三行代碼得到<div>標籤下面id爲msg的元素。第四行代碼得到context爲上下文的table裏面所有的連接元素。
如果你熟悉CSS，Xpath，你會覺得這些寫法很眼熟！對了。正是。看出奧妙了吧。jquery就是通過這樣的方式來找到Dom對象裏面的元素。跟CSS的選擇器相類似。
二，Jquery對象？
jquery提供了很多便利的函數，如each(fn)，但是使用這些函數的前提是：你使用的對象是Jquer對象。使一個Dom對象成爲一個Jquery對象很簡單，通過下面一些方式（只是一部分）：
Java代碼 ![收藏代碼]()
- var a = $("#cid");(1)
- var b = $("<p>hello</p>");(2)
- var c = document.createElement("table"); var tb = $(c);
三，代替body標籤的onload
這個慣例，也許是除了$()之外，用得最多的地方了。下面一段代碼：
Java代碼 ![收藏代碼]()
- $(document).ready(function(){
- alert("hello");
- });(1)
- <body οnlοad="alert('hello');">（2）
上面兩段代碼是等價的。但代碼1的好處是做到表現和邏輯分離。並且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一個頁面中重複出現，而不會衝突。基本上Jqeury的很多plugin都是利用這個特性，正因爲這個特性，多個plugin共同使用起來，在初始化時不會發生衝突。
不管怎麼說，這個慣例可以分離javascript與HTML。推薦使用。
四，事件機制
我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascript代碼與html代碼分離，保持HTML的清潔，還可以很輕鬆地綁定事件，甚至你可以不知道“事件”這個名詞。
Java代碼 ![收藏代碼]()
- $(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
Java代碼 ![收藏代碼]()
- $("#msg").html();
- $("#msg").html("hello");
上面兩行代碼，調用了同樣的函數。但結果卻差別很大。
第一行是返回指定元素的HTML值，第二行則是將hello這串字符設置到指定元素中。jquery的函數大部分有這樣的特性。
六，ajax
這是一個ajax橫行的時代。多少人，了不瞭解ajax的都跟着用上一把。呵。使用jquery實現ajax同樣簡單異常
Java代碼 ![收藏代碼]()
- $.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相關的函數不僅是這些，有興趣可以去研究再多。
七，漸入淡出
Java代碼 ![收藏代碼]()
- $("#msg").fadeIn("fast");
- $("#msg").fadeOut("slow");
沒錯，上面兩行代碼已經分別實現了一個id爲Msg的jquery對象的漸入和淡出。做一個像Gmail一樣的動態加載通知條，用jquery就那麼簡單。兩個函數接受的參數除了快慢等，還可以接收整型，作爲漸入或淡出的完成時間，單位爲MS。
八，plugin
這也是一個插件的時代。
jquery插件給我的感覺清一色的清潔，簡單。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,並引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個重要原因是發現她已經有了很多很好，很精彩的插件。
寫得很爛。可能大家看不出jquery的好處。嗯，光聽是沒用的，試用一下吧。你會發覺很有趣。
暫時告一段落吧。待有新的發現再來分享。
加一些Jquery的資源：
http://www.visualjquery.com/index.xml 很好的API查詢站點
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎樣實現相同的東西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，實用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/ jquery 的15天教程