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

孫桂萍

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

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

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

1 Jquery技術(shù)特點

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

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

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

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

2 Jquery具體應(yīng)用

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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