JQuery技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

孫桂萍

摘要：隨著網(wǎng)頁(yè)技術(shù)的成熟，各類技術(shù)層出不同，網(wǎng)頁(yè)的表現(xiàn)形式也越來(lái)越豐富，從最基礎(chǔ)單一的HTML，演變到今天的HTML+CSS+ JavaScript，由最基礎(chǔ)的頁(yè)面拼接發(fā)展到如今各式各樣的網(wǎng)頁(yè)動(dòng)畫效果，網(wǎng)頁(yè)的交互性也大大提高，這其中離不開(kāi)JQuery的功勞。

關(guān)鍵詞：網(wǎng)站建設(shè)；HTML；CSS；JQuery

網(wǎng)站前端開(kāi)發(fā)技術(shù)主要包括三個(gè)要素：HTML、CSS和JavaScript。JQuery是一個(gè)快速、簡(jiǎn)潔、優(yōu)秀的JavaScript框架。它的宗旨是“Write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。核心特征可以總結(jié)為：具有獨(dú)特鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展。

1 Jquery技術(shù)特點(diǎn)

使用JQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)JQuery（）（簡(jiǎn)寫為$），然后得到被選中的元素。選擇表達(dá)式可以是CSS選擇器， 也可以是JQuery特有的表達(dá)式， 如果選中多個(gè)元素，JQuery提供過(guò)濾器，可以縮小結(jié)果集，有時(shí)候，我們需要從結(jié)果集出發(fā)，移動(dòng)到附近的相關(guān)元素，JQuery也提供了在DOM樹(shù)上的移動(dòng)方法：

選中網(wǎng)頁(yè)元素后，就可以對(duì)它進(jìn)行某種操作。JQuery允許所有操作鏈接在一起，以鏈條的形式寫出來(lái)，操作網(wǎng)頁(yè)元素，最常見(jiàn)的需求是取得它們的值，或者對(duì)它們進(jìn)行賦值。

JQuery使用同一個(gè)函數(shù)，來(lái)完成取值和賦值。到底是取值還是賦值，由函數(shù)的參數(shù)決定。取出或設(shè)置值時(shí)需要注意的是，如果結(jié)果集包含多個(gè)元素，那么賦值的時(shí)候，將對(duì)其中所有的元素賦值；取值的時(shí)候，則是只取出第一個(gè)元素的值（.Text（）除外，它可以取出所有元素的text內(nèi)容）。

JQuery可以對(duì)網(wǎng)頁(yè)元素綁定事件，根據(jù)不同事件，運(yùn)行相應(yīng)的函數(shù)，熟練應(yīng)用事件，網(wǎng)站頁(yè)面會(huì)更生動(dòng)。若想實(shí)現(xiàn)更復(fù)雜的特效，還可將JQuery與animate動(dòng)畫相結(jié)合，制作出更炫酷的動(dòng)畫效果。

2 Jquery具體應(yīng)用

JQuery是為事件處理特別設(shè)計(jì)的。事件處理程序是當(dāng)HTML中發(fā)生某些事件時(shí)所調(diào)用的方法。常用的JQuery有鼠標(biāo)懸浮、點(diǎn)擊、移入移出等，JQuery還可與各類插件搭配使用，以達(dá)到預(yù)期的網(wǎng)頁(yè)效果。

：hover選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素，即鼠標(biāo)懸浮事件。在懸浮事件的時(shí)候我們要先分析清楚，懸浮事件有兩部分。

：click選擇器用于選擇鼠標(biāo)點(diǎn)擊的元素，即鼠標(biāo)點(diǎn)擊事件。當(dāng)點(diǎn)擊元素時(shí)，會(huì)發(fā)生click事件，鼠標(biāo)指針停留在元素上方，然后按下并松開(kāi)鼠標(biāo)左鍵時(shí)，就會(huì)發(fā)生一次click。click事件只有點(diǎn)擊一種狀態(tài)，不存在鼠標(biāo)懸停和移走兩種。

另外需要注意的是關(guān)于鼠標(biāo)的點(diǎn)擊還有一種.onclick（）事件，這是屬于Javascript的點(diǎn)擊事件，在寫法上也與JQuery點(diǎn)擊事件不同。

“aa”就是onclick的事件。onclick執(zhí)行的效果跟click大致相同只是寫法和語(yǔ)言上略有區(qū)別，但是能達(dá)到同樣的目的，都能完成鼠標(biāo)的點(diǎn)擊事件。

在網(wǎng)頁(yè)制作中還會(huì)出現(xiàn)很多鼠標(biāo)經(jīng)過(guò)或點(diǎn)擊時(shí)同一個(gè)元素下的子元素中切換的圖片不同的情況，JQuery中有eq（）和index（）兩種方式用來(lái)確定li的位置，它們相似但又大不相同。

：eq（）選擇器選取帶有指定index值的元素，index值是從0開(kāi)始，所以第一個(gè)元素的index值是0不是1。eq（）一般與其他元素或選擇器一起使用，來(lái)選擇指定的組中特定序號(hào)的元素。index（）方法返回指定元素相對(duì)于其他指定元素的index位置，這些元素可通過(guò)JQuery選擇器或DOM元素來(lái)指定。需要注意的是，如果未找到元素，index（）將返回-1。

綜上，這兩種方式都可以找到某個(gè)元素在上一級(jí)中的位置，只是使用情況不同，頁(yè)面中使用時(shí)還是要根據(jù)模塊的功能進(jìn)行選擇。

JQuery是一個(gè)強(qiáng)大且優(yōu)秀的js庫(kù)，它可以支持多種事件和選擇器，且普及度高、兼容性好、上手速度快，便于我們理解和使用。初期我們可以只掌握上面一些常用的事件方法，然后再一步一步去探索那些未知的神秘的JQuery。相信JQuery給我們帶來(lái)的只有更多的驚喜。

參考文獻(xiàn)：

[1]單東林，張曉菲，魏然.鋒利的JQuery（第二版）.北京：人民郵電出版社，2012，300-306

[2]湯東，張富銀.JQuery入門實(shí)戰(zhàn).北京：西南財(cái)經(jīng)大學(xué)出版社，2015，2-3

[3]朱育發(fā)，JQuery與JQuery Mobile開(kāi)發(fā)完全技術(shù)寶典.北京：中國(guó)鐵道出版社，2014，1

[4]奧特羅，勞倫斯.JQuery高級(jí)編程.北京：清華大學(xué)出版社，2013，4

[5]高云，JQuery技術(shù)內(nèi)幕.北京：機(jī)械工業(yè)出版社，2014，2-3endprint