JQuery技術在網頁設計中的應用

孫桂萍

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

關鍵詞：網站建設；HTML；CSS；JQuery

網站前端開發技術主要包括三個要素：HTML、CSS和JavaScript。JQuery是一個快速、簡潔、優秀的JavaScript框架。它的宗旨是“Write Less，Do More”，即倡導寫更少的代碼，做更多的事情。核心特征可以總結為：具有獨特鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展。

1 Jquery技術特點

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

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

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

JQuery可以對網頁元素綁定事件，根據不同事件，運行相應的函數，熟練應用事件，網站頁面會更生動。若想實現更復雜的特效，還可將JQuery與animate動畫相結合，制作出更炫酷的動畫效果。

2 Jquery具體應用

JQuery是為事件處理特別設計的。事件處理程序是當HTML中發生某些事件時所調用的方法。常用的JQuery有鼠標懸浮、點擊、移入移出等，JQuery還可與各類插件搭配使用，以達到預期的網頁效果。

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

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

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

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

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

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

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

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

參考文獻：

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

[2]湯東，張富銀.JQuery入門實戰.北京：西南財經大學出版社，2015，2-3

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

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

[5]高云，JQuery技術內幕.北京：機械工業出版社，2014，2-3endprint