jquery介紹

jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。

　　jQuery是繼prototype之後又一個優秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。

　　它是輕量級的js庫(壓縮後隻有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

　　jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。

　　jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

　　jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏麵插入一堆js來調用命令了，隻需定義id即可。

　　Jquery是繼prototype之後又一個優秀的Javascrīpt框架。對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裏看過這樣的寫法嗎？第一行代碼得到所有標簽下的P元素。第二行代碼得到class 為container的元素,第三行代碼得到標簽下麵id為msg的元素。第四行代碼得到context為上下文的table裏麵所有的連接元素。

　　如果你熟悉CSS，你會覺得這些寫法很眼熟！對了。正是。看出奧妙了吧。jquery就是通過這樣的方式來找到Dom對象裏麵的元素。跟CSS的選擇器相類似。

二，Jquery對象？

　　jquery提供了很多便利的函數，如each(fn)，但是使用這些函數的前提是：你使用的對象是Jquery對象。使一個Dom對象成為一個Jquery對象很簡單，通過下麵一些方式（隻是一部分）：

　　代碼

　　var a = $("#cid");

　　var b = $("hello");

　　var c = document.createElement("table");

　　var tb = $©;

三，代替body標簽的onload

　　這個慣例，也許是除了$()之外，用得最多的地方了。下麵一段代碼：

　　代碼

　　$(document).ready(function(){

　　alert("hello");

　　});(1)

　　（2）

　　上麵兩段代碼是等價的。但代碼1的好處是做到表現和邏輯分離。並且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一個頁麵中重複出現，而不會衝突。基本上Jqeury的很多plugin都是利用這個特性，正因為這個特性，多個plugin共同使用起來，在初始化時不會發生衝突。

　　不管怎麼說，這個慣例可以分離javascrīpt與HTML。推薦使用。

四，事件機製

　　我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascrīpt代碼與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

　　代碼

　　$("#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").show("fast");

　　$("#msg").hide("slow");

　　$("#msg").fadeIn();

　　$("#msg").fadeOut();

　　沒錯，上麵兩行代碼已經分別實現了一個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://jquery.org.cn/visual/cn/index.xml //不錯的JQUERY 中文學習推薦

　　jquery來源

　　jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入其team，包括來自德國的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。