淺談JQuery如何控制頁面

王玄玄

淺談JQuery如何控制頁面

王玄玄

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

JQuery介紹

簡介

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

JQuery提供的功能

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

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

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

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

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

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

JQuery的引用

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

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

用JQuery控制頁面

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

$（selector）或者jQuery（selector）。

其中selector符合CSS3標準，可以是ID選擇器、類別選擇器、屬性選擇器、子選擇器、標記選擇器等。

控制頁面元素的屬性

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

attr（name）：獲取元素集中第一項的屬性值；

attr（name，value）：設置元素集中所有項的屬性name的值為value；

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

用法舉例：

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

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

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

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

設置CSS樣式

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

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

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

用法舉例：

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

處理DOM模型

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

用法舉例：

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

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

處理表單元素的值

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

用法舉例：

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

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

處理頁面中的事件

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

用法舉例：

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

$（#one）.append（“〈div〉點擊事件〈/ div〉”）；｝）

此例表示對〈img〉綁定了1個click事件。

結語

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

10.3969/j.issn.1001-8972.2015.15.028