王玄玄

淺談JQuery如何控制頁面

王玄玄

隨著Web 2.0和Ajax成為主流，Javascript越來越受到人們的關(guān)注，各種Javascript的框架也層出不窮，JQuery作為Javascript框架的優(yōu)秀代表，掀起了互聯(lián)網(wǎng)技術(shù)的新一輪革命。本文介紹了JQuery的特性及功能，給出了JQuery在HTML中的嵌入方法，介紹JQuery如何操作頁面，包括獲取/設(shè)置元素的屬性、添加/刪除CSS樣式、通過DOM模型添加或刪除節(jié)點(diǎn)、修改表單元素的值和事件處理等，為用戶提供非常友好的界面。

JQuery介紹

簡(jiǎn)介

JQuery是由美國(guó)人John Resig于2006年初創(chuàng)建的，是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫，屬于輕量級(jí)的、最靈活的js庫，兼容CSS3和各種瀏覽器。JQuery使用戶能方便操作HTML元素、處理事件、實(shí)現(xiàn)各種動(dòng)畫特效，并且提供AJAX交互，使得用戶無需刷新頁面即可從服務(wù)器獲取信息。JQuery在設(shè)計(jì)上使用了方法鏈，這不僅可以縮短代碼的長(zhǎng)度，還可實(shí)現(xiàn)一些特殊的效果，在JQuery鏈中，后面的操作都是以前面操作結(jié)果為對(duì)象的。由于JQuery庫具有很好的封裝性，使得它的命名空間與其他庫一起使用時(shí)不會(huì)產(chǎn)生沖突。JQuery的宗旨就是讓使用者少寫代碼多做事（Write less，do more）。

JQuery提供的功能

（1）獲取頁面中的元素。jQuery簡(jiǎn)化了獲取頁面中某個(gè)節(jié)點(diǎn)的操作步驟。

（2）修改頁面的樣式。JQuery能便捷地操作CSS文件，并解決了瀏覽器對(duì)頁面文件的兼容性，使得各種瀏覽器都能很好地使用CSS3標(biāo)準(zhǔn)。

（3）修改頁面的內(nèi)容。通過使用API，JQuery可方便地添加、刪除節(jié)點(diǎn)使得頁面內(nèi)容發(fā)生改變。

（4）響應(yīng)事件。jQuery可輕松地處理頁面事件（比如滑動(dòng)鼠標(biāo)改變顯示的圖片），也解決了瀏覽器兼容性問題。

（5）為頁面添加動(dòng)畫效果。jQuery庫提供了大量的可自定義參數(shù)的動(dòng)畫效果。如顯示和隱藏元素、元素顯隱的漸入漸出效果等。

（6）無需刷新頁面即可從服務(wù)器獲取信息。

JQuery的引用

在使用JQuery時(shí)，首先要在它的官方網(wǎng)站下載需要的js文件（比如：jquery.min.js），然后在html文件中用〈script〉標(biāo)簽將下載的js文件導(dǎo)入便可以了，具體如下：

〈script type=”text/javascript” src=”jquery. min.js”〉〈/script〉

用JQuery控制頁面

在JQuery中，我們最常用的一個(gè)符號(hào)是美元符號(hào)$，它是JQuery中的選擇器，提供了豐富的功能，比如選擇頁面中的一個(gè)或一類元素，作為函數(shù)的前綴、創(chuàng)建DOM節(jié)點(diǎn)等。其語法如下：

$（selector）或者jQuery（selector）。

其中selector符合CSS3標(biāo)準(zhǔn)，可以是ID選擇器、類別選擇器、屬性選擇器、子選擇器、標(biāo)記選擇器等。

控制頁面元素的屬性

網(wǎng)頁的頁面是由一系列的html標(biāo)記組成的，每個(gè)標(biāo)記都有自己的屬性，表示此標(biāo)記在頁面中呈現(xiàn)的一種狀態(tài)。我們可用JQuery中的attr（）方法來獲取和設(shè)置元素的屬性值，用removeAttr（name）方法刪除某元素的屬性值。語法如下：

attr（name）：獲取元素集中第一項(xiàng)的屬性值；

attr（name，value）：設(shè)置元素集中所有項(xiàng)的屬性name的值為value；

removeAttr（name）：刪除某個(gè)元素的屬性值。

用法舉例：

〈p color=”red”〉獻(xiàn)給母校的一首〈em title=”song”〉歌〈/em〉…〈/p〉

獲取〈em〉的title屬性值：$（“em”）.attr（“title”）；

設(shè)置〈p〉的title值為“段落”：$（“p”）.attr（“title”，”段落”）；

刪除〈p〉的colors屬性：$（“p”）.removeAttr（“color”）。

設(shè)置CSS樣式

CSS是頁面不可分割的一部分，主要用來控制網(wǎng)頁樣式并允許將樣式與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。我們可用JQuery中的addClass（）、removeClass（）方法來添加、刪除CSS類別。語法如下：

addClass（names）：添加CSS類別，若要同時(shí)添加多個(gè)，類別之間用空格分離；

removeClass（names）：刪除CSS類別，若要同時(shí)刪除多個(gè)，類別之間用空格分離。

用法舉例：

$（“d i v”）.a d d C l a s s（“m y C l a s s 1 myClass2”）；表示為〈div〉同時(shí)添加myClass1和myClass2兩個(gè)類別。

處理DOM模型

DOM定義了用戶操作文檔對(duì)象的接口。JQuery提供了一整套方法來處理頁面中的元素，包括元素的內(nèi)容、復(fù)制、移動(dòng)和替換等。我們可用html（）和text（）方法來獲取和編輯頁面內(nèi)容；用append（）方法為某個(gè)元素添加新的子元素；用remove（）方法刪除某元素；用clone（）方法來克隆元素。

用法舉例：

該例子表示先用text（）方法獲取第一個(gè)〈p〉段落的純文本，然后用html（）賦給最后一個(gè)〈p〉段落。

$（“p”）.append（“〈b〉美好生活〈/b〉”）；表示給〈p〉標(biāo)簽添加一段html代碼作為子元素。

處理表單元素的值

表單是與用戶交互最頻繁的元素之一，它通過各種形式接受用戶的數(shù)據(jù)。在表單元素的各個(gè)屬性中，value值最受關(guān)注。JQuery中的val（）方法可以獲取和設(shè)置表單元素的值。

用法舉例：

$（“［name=radio］：checked”）.val（）；表示獲取name屬性為“radio”的表單元素中被選中項(xiàng)的value值。

此例中使用了兩次val（）方法，第一次用來獲取按鈕的value值，第二次將獲取的值賦值給文本框。

處理頁面中的事件

使用Javascript處理頁面中的事件，對(duì)于不同的瀏覽器，方法各不相同，JQuery對(duì)事件的處理進(jìn)行了統(tǒng)一規(guī)范并提供了便捷的方法。bind（eventType，［data］，Listener）方法對(duì)事件進(jìn)行綁定，其中事件類型可以使blur、focus、change、submit等；unbind（）移除事件；trigger（eventType）方法用來觸發(fā)事件。

用法舉例：

$（“img”）.bind（“click”，function（）｛

$（#one）.append（“〈div〉點(diǎn)擊事件〈/ div〉”）；｝）

此例表示對(duì)〈img〉綁定了1個(gè)click事件。

結(jié)語

JQuery作為Javascript的一個(gè)框架，提供豐富的函數(shù)和強(qiáng)大的功能，實(shí)現(xiàn)了腳本與頁面的分離，使代碼的可讀性非常強(qiáng)；它的鏈?zhǔn)讲僮骺梢园讯鄠€(gè)操作寫到一行代碼里；JQuery還提供了大量的插件，包括表單插件、UI插件、日期插件等，開發(fā)者可使用插件進(jìn)行表單確認(rèn)、添加動(dòng)畫，給我們的網(wǎng)站帶來炫酷的效果，還可以改寫和封裝插件達(dá)到自己想要的特效。而且隨著html5在移動(dòng)端的使用越來越廣泛，JQuery將成為web開發(fā)的重要部分。

10.3969/j.issn.1001-8972.2015.15.028