|
|
jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是――WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，這是其它的js庫(kù)所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫(kù)，使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。對(duì)prototype我使用不多，簡(jiǎn)單了解過。但使用上jquery之后，馬上被她的優(yōu)雅吸引住了。有人使用這樣的一比喻來比較prototype和jquery：prototype就像Java，而jquery就像ruby.實(shí)際上我比較喜歡Java（少接觸Ruby 罷了）但是jquery的簡(jiǎn)單的實(shí)用的確有相當(dāng)大的吸引力??！在項(xiàng)目里我把jquery作為自己唯一的框架類包。使用其間也有一點(diǎn)點(diǎn)心得，其實(shí)這些心得，在jquery的文檔上面也可能有講，不過還是記下來，以備忘罷。
一，找到你了！
還記得$()這個(gè)東西吧？prototype還是DWR都使用了這個(gè)函數(shù)代替document.getElementById()。沒錯(cuò)，jquery也跟風(fēng)了。為達(dá)到document.getElementById()的目的，jquery是這樣寫的：
代碼
復(fù)制代碼 代碼如下:
var someElement = $("#myId");
看起來比其他兩個(gè)框架的要多了一個(gè)#，好，看看下面的用法：
代碼
復(fù)制代碼 代碼如下:
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
在prototype里看過這樣的寫法嗎？第一行代碼得到所有標(biāo)簽下的P元素。第二行代碼得到class 為container的元素,第三行代碼得到標(biāo)簽下面id為msg的元素。第四行代碼得到context為上下文的table里面所有的連接元素。
如果你熟悉CSS，你會(huì)覺得這些寫法很眼熟！對(duì)了。正是?？闯鰥W妙了吧。jquery就是通過這樣的方式來找到Dom對(duì)象里面的元素。跟CSS的選擇器相類似。
二，Jquery對(duì)象？
jquery提供了很多便利的函數(shù)，如each(fn)，但是使用這些函數(shù)的前提是：你使用的對(duì)象是Jquery對(duì)象。使一個(gè)Dom對(duì)象成為一個(gè)Jquery對(duì)象很簡(jiǎn)單，通過下面一些方式（只是一部分）：
代碼
復(fù)制代碼 代碼如下:
var a = $("#cid");
var b = $("hello");
var c = document.createElement("table");
var tb = $©;
三，代替body標(biāo)簽的onload
這個(gè)慣例，也許是除了$()之外，用得最多的地方了。下面一段代碼：
代碼
復(fù)制代碼 代碼如下:
$(document).ready(function(){
alert("hello");
});(1)
<body onload="alert('hello');">（2）
上面兩段代碼是等價(jià)的。但代碼1的好處是做到表現(xiàn)和邏輯分離。并且可以在不同的js文件中做相同的操作，即$(document).ready (fn)可以在一個(gè)頁(yè)面中重復(fù)出現(xiàn)，而不會(huì)沖突?；旧螶qeury的很多plugin都是利用這個(gè)特性，正因?yàn)檫@個(gè)特性，多個(gè)plugin共同使用起 來，在初始化時(shí)不會(huì)發(fā)生沖突。
不管怎么說，這個(gè)慣例可以分離Javascrīpt與HTML。推薦使用。
四，事件機(jī)制
我大量使用的事件可能就是button的onclick了。以前習(xí)慣在input 元素上寫onclick = "fn()",使用jquery可以使Javascrīpt代碼與html代碼分離，保持HTML的清潔，還可以很輕松地綁定事件，甚至你可以不知道“事件”這個(gè)名詞。
代碼
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}
五，同一函數(shù)實(shí)現(xiàn)set
代碼
復(fù)制代碼 代碼如下:
$("#msg").html();
$("#msg").html("hello");
上面兩行代碼，調(diào)用了同樣的函數(shù)。但結(jié)果卻差別很大。
第一行是返回指定元素的HTML值，第二行則是將hello這串字符設(shè)置到指定元素中。jquery的函數(shù)大部分有這樣的特性。
六，ajax
這是一個(gè)ajax橫行的時(shí)代。多少人，了不了解ajax的都跟著用上一把。呵。使用jquery實(shí)現(xiàn)ajax同樣簡(jiǎn)單異常
代碼
復(fù)制代碼 代碼如下:
$.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用法一樣。第一個(gè)參數(shù)是異步請(qǐng)求的url，第二個(gè)為參數(shù)，第三個(gè)回調(diào)方法。
3，4的方法會(huì)在指定的Dom對(duì)象上綁定響應(yīng)ajax執(zhí)行的事件。當(dāng)然，jquery的AJAX相關(guān)的函數(shù)不僅是這些，有興趣可以去研究再多。
七，漸入淡出
代碼
復(fù)制代碼 代碼如下:
$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow");
沒錯(cuò)，上面兩行代碼已經(jīng)分別實(shí)現(xiàn)了一個(gè)id為Msg的jquery對(duì)象的漸入和淡出。做一個(gè)像Gmail一樣的動(dòng)態(tài)加載通知條，用jquery就那么簡(jiǎn)單。兩個(gè)函數(shù)接受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為MS。
八，plugin
這也是一個(gè)插件的時(shí)代。
jquery插件給我的感覺清一色的清潔，簡(jiǎn)單。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個(gè)重要原因是發(fā)現(xiàn)她已經(jīng)有了很多很好，很精彩的插件。
寫得很爛?？赡艽蠹铱床怀鰆query的好處。嗯，光聽是沒用的，試用一下吧。你會(huì)發(fā)覺很有趣。
暫時(shí)告一段落吧。待有新的發(fā)現(xiàn)再來分享。
加一些Jquery的資源：
http://www.visualjquery.com/index.xml 很好的API查詢站點(diǎn)
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎樣實(shí)現(xiàn)相同的東西
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/jquery 的15天教程
http://jquery.org.cn/visual/cn/index.xml //不錯(cuò)的JQUERY 中文學(xué)習(xí) 推薦
jquery來源
jQuery由美國(guó)人John Resig創(chuàng)建，至今已吸引了來自世界各地的眾多Javascript高手加入其team，包括來自德國(guó)的Jörn Zaefferer，羅馬尼亞的Stefan Petre等等。
jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是――WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級(jí)的js庫(kù)(壓縮后只有21k) ，這是其它的js庫(kù)所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫(kù)，使用戶能更方便地處理HTML documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。
jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁(yè)保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需定義id即可。
jQuery的最新release版本是1.3.2。
官方下載地址為：http://code.google.com/p/jqueryjs/downloads/list
微軟的visual studio 2008 sp1支持對(duì)jquery的動(dòng)態(tài)提示，只要在代碼頁(yè)導(dǎo)入對(duì)應(yīng)的vsdoc腳本就可以
JavaScript技術(shù)：jquery 常用操作整理 基礎(chǔ)入門篇，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
