jQuery基礎(chǔ)

2010.03.12

jQuery:庫類型說明

在Download jQuery區(qū)域，一共有三種類型的jQuery:庫，分別是jQuery 1.2.6 (16kb, Minified and Gzipped)、jQuery 1.2.6(97kb, Uncompressed)和jQuery 1.2.6 (30kb, Packed)，區(qū)別如表1-1所示：

表1-1 jQuery庫類型對(duì)比表

名稱	大小	說明
jQuery 1.2.6 (16kb, Minified and Gzipped)	16kb	經(jīng)過gzip壓縮，體積最小，為應(yīng)用在產(chǎn)品、項(xiàng)目而準(zhǔn)備的版本
jQuery 1.2.6 (97kb, Uncompressed)	97kb	完整無壓縮版本，為測(cè)試，學(xué)習(xí)和開發(fā)而準(zhǔn)備的版本
jQuery 1.2.6 (30kb, Packed)	30kb	經(jīng)過Packer壓縮，為不支持gzip的服務(wù)器而準(zhǔn)備的版本

編寫簡(jiǎn)單的jQuery代碼

環(huán)境配置好后，你也許迫不及待的想試用一下jQuery。在我們開始編寫第一個(gè)jQuery程序之前，先明確一點(diǎn)：在jQuery庫中，$就是jQuery的一個(gè)簡(jiǎn)寫形式，比如$("#foo")和jQuery("#foo")是等價(jià)的，$.ajax和jQuery.ajax是等價(jià)的。如果沒有特別說明，程序中的$符號(hào)都是jQuery的一個(gè)簡(jiǎn)寫形式。

下面我們開始編寫我們第一個(gè)jQuery程序：

<html>

<head>

$(document).ready(function(){ //等待dom元素加載完畢.

alert("Hello World!"); //彈出一個(gè)框。

});

</script>

</head>

<body>

</body>

</html>

運(yùn)行后，測(cè)試結(jié)果如圖1-8所示：

jQuery對(duì)象和DOM對(duì)象

1.4.1 簡(jiǎn)介DOM對(duì)象和jQuery對(duì)象

第一次學(xué)習(xí)jQuery，經(jīng)常會(huì)搞不清楚哪些是jQuery對(duì)象、哪些是DOM對(duì)象，所以我們?cè)谶@里重點(diǎn)講一下。

1 . DOM對(duì)象

文檔對(duì)象模型(DOM，Document Object Model)。

每一份DOM都可以表示一棵樹。下面我們構(gòu)建一個(gè)非?；镜木W(wǎng)頁：

圖1-14 一個(gè)非?；镜木W(wǎng)頁

對(duì)應(yīng)網(wǎng)頁代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>

<ul>

</ul>

</body>

</html>

我們可以構(gòu)建上面網(wǎng)頁結(jié)構(gòu)的DOM樹。如圖1-15所示：

圖1-15 把網(wǎng)頁元素表示為文檔樹

在這棵DOM樹中，<h3> 、<p>、<ul> 以及<ul>的3個(gè)<li>子節(jié)點(diǎn)都是DOM元素節(jié)點(diǎn)。我們可以通過JavaScript中的getElementsByTagName來獲取它們。像這樣通過getElementById或者getElementsByTagName得到的DOM元素就是DOM對(duì)象。DOM對(duì)象可以使用JavaScript中的方法，比如：

var domObj = document.getElementById("id"); // 獲得DOM對(duì)象

var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法 innerHTML

2 . jQuery對(duì)象

那什么是jQuery對(duì)象呢？

jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。

jQuery對(duì)象是jQuery獨(dú)有的。如果一個(gè)對(duì)象是jQuery對(duì)象，那么它就可以使用jQuery里的方法。

比如：

$("#foo").html(); // 獲取id為foo的元素內(nèi)的html代碼。.html() 是jQuery里的方法。

這段代碼等同于：

document.getElementById("id").innerHTML;

注意：jQuery對(duì)象將無法使用DOM對(duì)象的任何方法。比如$("#id").innerHTML、$("#id").checked之類的寫法都是錯(cuò)誤的。同樣，DOM對(duì)象也不能使用jQuery的里方法，

比如document.getElementById("id").html()也會(huì)報(bào)錯(cuò)，

只能用document.getElementById("id").innerHTML;

特別要注意，用#id作為選擇符取得的是jQuery對(duì)象而并非document.getElementById("id")所得到的DOM對(duì)象，兩者并不等價(jià)。關(guān)于“#”選擇符的運(yùn)用，可以參考下一章。

從學(xué)習(xí)jQuery一開始就應(yīng)當(dāng)樹立正確的觀念，認(rèn)識(shí)jQuery對(duì)象和DOM對(duì)象之間的區(qū)別，一旦能夠跨越這道坎，之后學(xué)習(xí)jQuery之路就輕松多了。

1.4.2 jQurey對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換

在討論jQurey對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換之前，我們先約定定義變量的風(fēng)格。

約定：如果一個(gè)獲取的是jQuery對(duì)象，那么我們?cè)谧兞壳懊婕由?/span>$，如：

var $variable = jQuery 對(duì)象 ;

如果獲取的是DOM對(duì)象，則這么定義：

var variable = DOM對(duì)象;

本書中的例子均會(huì)以這種方式呈現(xiàn)，以方便讀者閱讀。

l jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象

前面說了，jQuery對(duì)象不能使用DOM中的方法，但如果你對(duì)jQuery對(duì)象所提供的方法不熟悉，或者jQuery沒有封裝你想要的方法，這時(shí)你不得不用一下DOM對(duì)象的時(shí)候，你該怎么辦呢？

在這里提供兩種方式來將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：

[ index ] 和 .get( index ) ；

（1）jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過 [index] 的方式，來得到相應(yīng)的 DOM 對(duì)象。

比如：

var $cr = $("#cr"); // jQuery對(duì)象

var cr = $cr[0]; // DOM對(duì)象

alert(cr.checked) //檢測(cè)這個(gè)checkbox是否被選中了

（2）另一種方式是jQuery本身提供的，通過.get(index) 方式，來得到相應(yīng)的 DOM 對(duì)象。

比如：

var $cr = $("#cr"); // jQuery對(duì)象

var cr = $cr.get(0); // DOM對(duì)象

alert(cr.checked) //檢測(cè)這個(gè)checkbox是否被選中了

l DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象

對(duì)于已經(jīng)是一個(gè)DOM對(duì)象的，我們只需要用$( ) 把 DOM對(duì)象包裝起來，就可以獲得一個(gè)如假包換的jQuery對(duì)象了。比如：$( DOM對(duì)象) ;

var cr = document.getElementById("cr"); //DOM對(duì)象

var $cr = $(cr); // jQuery 對(duì)象

轉(zhuǎn)換后，就可以任意使用jQuery中的方法了。

通過以上提供的方法，我們可以任意的相互轉(zhuǎn)換 jQuery對(duì)象和DOM對(duì)象。最后再次強(qiáng)調(diào)下，DOM對(duì)象才能使用DOM中的方法，jQuery對(duì)象是不可以用DOM中的方法的，但jQuery對(duì)象提供了一套更加完善的工具用于操作DOM，可以參考第三章。

解決jQuery和其它庫的沖突

如果你的項(xiàng)目中有多種JavaScript庫，比如同時(shí)存在prototype.js和jquery.js。為了避免$對(duì)象的沖突，我們可以使用jQuery中的.noConflict()來解決沖突，需要注意引入JavaScript庫的順序。

寫法1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js

jQuery(function(){ //使用jQuery

jQuery("p").css("color","red"); //使用jQuery

$("pp").style.display = "none"; //這里的$符號(hào)是Prototype的方法

});

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

寫法2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js

jQuery(function(){ //使用jQuery

jQuery("p").css("color","red"); //使用jQuery

$("pp").style.display = "none"; //這里的$符號(hào)是Prototype的方法。

});

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

切記不要把順序弄錯(cuò)！

還有兩種不使用.noConflict()來避免沖突常見方式。

一種是如果你的jQuery(function(){…})內(nèi)部不使用其它庫的代碼，通過如下形式構(gòu)建代碼，先引入jQuery，再引入其它庫，之后，繼續(xù)使用$作為jQuery的簡(jiǎn)寫形式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

jQuery(function($){

$("p").css("color","red"); //函數(shù)內(nèi)部的$還是jQuery的$。

});

$("pp").style.display = "none"; //函數(shù)外部的$是Prototype的$。

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

另一種是利用閉包的特性，你在任意地方建立一個(gè)閉包，在其內(nèi)部，可以既使用$作為jQuery的縮寫，又不用擔(dān)心沖突，通常jQuery的插件都是采用這種形式來寫的。當(dāng)然也是先引入jQuery，再引入其它庫：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

(function($){

$("p").css("color","red"); //函數(shù)內(nèi)部的$還是jQuery的$。

})(jQuery);

$("pp").style.display = "none"; //函數(shù)外部的$是Prototype的$。

</script>

</head>

<body>

<p id="pp">testpp<p>

</body>

</html>

這是最簡(jiǎn)單的解決沖突的方法，當(dāng)然還有其它方式，但換湯不換藥。

jQuery 1.4 發(fā)布：15個(gè)新特性實(shí)例精講

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

學(xué)習(xí)JQuery （一）

jQuery選擇器及jquery案例詳解(必看)

前端|JavaScript庫

JQuery 學(xué)習(xí)總結(jié)及實(shí)例

jQuery 原理的模擬代碼 -5 Ajax

7個(gè)常見Javascript框架介紹

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

jQuery 1.4 發(fā)布：15個(gè)新特性實(shí)例精講

jQuery 1.4 發(fā)布：15個(gè)新特性實(shí)例精講