劉 汀

（中機中聯(lián)工程有限公司，重慶 400039）

基于jQuery的Web前端組件的應(yīng)用研究

劉 汀

（中機中聯(lián)工程有限公司，重慶 400039）

組件化問題也有了諸多方案，如：ReactJS，AngularJS，VueJS。組件化之后的前端工程仍然面臨著許多挑戰(zhàn)，這些挑戰(zhàn)也催生了很多新的方案。文章以探討為主，講解基于jQuery的Web前端組件的應(yīng)用研究。

jQuery；Web前端組件；JavaScript

作為目前為止最流行的JavaScript庫，jQuery的存在，讓學習前端開發(fā)的人感到前端越來越容易入門了，用簡單的幾行代碼就可以實現(xiàn)需求。jQuery從2006年誕生至今，已經(jīng)被廣泛應(yīng)用在Web開發(fā)項目中，使Web開發(fā)更為便利。

1 jQuery相關(guān)概念

由于近年移動互聯(lián)網(wǎng)的迅速發(fā)展，對于網(wǎng)頁的技術(shù)創(chuàng)新、前端開發(fā)也有著越來越高的要求，jQuery是一個小型的JavaScript庫，其允許程序員方便快速地改進Web頁面的外觀和行為。jQuery的語法簡潔，以內(nèi)容服務(wù)交換（Content Services Switch，CSS）選擇器的形式使用變量，作為將文檔對象模型（Document Object Model，DOM）的任何目標元素，可以是一個唯一元素、元素集或者所選擇的任何元素，與效果聯(lián)系起來的途徑[1]。

jQuery框架具有以下幾個特點：（1）輕便，jQuery框架經(jīng)過UglifyJS的壓縮后，大小只有300 kb左右；（2）選擇器功能豐富，jQuery不約束開發(fā)者使用特定的選擇器，開發(fā)者可以選用CSS1至CSS3的所有CSS風格選擇器，其自身還提供獨特的性能強大的選擇器，另外還支持各種插件方便開發(fā)者編寫?yīng)殑?chuàng)的選擇器；（3）jQuery框架內(nèi)擁有數(shù)目繁多的DOM操作，能夠使開發(fā)者在進行相關(guān)程度的編寫時更為便利且操作簡單；（4）兼容性良好，因為jQuery是JavaScript，能把它嵌入到JavaScript所應(yīng)用到的任何項目標中，無論你的瀏覽器是IE，Chrome，Safari還是jQuery其都會修復不同瀏覽器之間存在的差異[2]。

由于jQuery具備的上述特點，開發(fā)者在構(gòu)建Web前端組件時可以更為輕便快捷地進行復雜的項目設(shè)計，從而使Web產(chǎn)品的開發(fā)效率提升[3]，并有效減小開發(fā)成本。

2 基于jQuery的Web前端組件的應(yīng)用

2.1 將jQuery庫添加到項目中

在開始使用jQuery之前，必須將jQuery庫添加到項目中。要將jQuery庫添加到NetBeans項目中，只需從計算機上的相應(yīng)位置復制庫文件夾，然后在集成開發(fā)環(huán)境（Integrated Development Environment，IDE）的“Projects”窗口中將其直接粘貼到項目中。

（1）在IDE中，創(chuàng)建一個名為js的文件夾并將其添加到項目中。為此，需要單擊IDE工具欄中的“New File”按鈕。

（2）選擇Other類別，然后選擇Folder。

（3）將該文件夾命名為js。對于Java Web項目，確保將js文件夾放在項目的Web根中。為此，需在Parent Folder字段中輸入web。

（4）單擊Finish退出向?qū)А?/p>

（5）查找下載到計算機中的jQuery庫。到目前為止，最新庫版本為1.4.2，因此文件通常命名為jquery-1.4.2.js。將文件復制到剪貼板。

（6）將庫文件粘貼到新的js文件夾中。右鍵單擊js并選擇“Paste”。jquery-1.4.2.js文件節(jié)點將出現(xiàn)在該文件夾中。

（7）在編輯器中，從index.html文件中引用jQuery庫。為添加一對lt;scriptgt;標記并使用src屬性指向庫位置。

2.2 將jQuery可折疊面板窗口部件添加到項目中

通過使用包含在核心jQuery庫中的JavaScript行為，可以創(chuàng)建以上簡單測試?，F(xiàn)在，可通過使用基本超文本標記語言（HyperText Markup Language，HTML）標記設(shè)置員工聯(lián)系人列表來檢查更真實的示例。然后，我們將jQuery可折疊面板窗口部件應(yīng)用于該聯(lián)系人列表。

可折疊面板窗口部件屬于jQuery UI庫的一部分。用戶界面（user interface，UI）庫在核心庫的基礎(chǔ)上構(gòu)建，提供了用于為Web頁啟用交互、窗口部件和效果的模塊化方法?？墒刮募笮”３譃樽钚≈?，并可以方便地從位于http://jqueryui.com/download的jQuery下載界面中只選擇所需組件。

如果尚未執(zhí)行此操作，訪問http://jqueryui.com/download并下載可折疊面板導航窗口部件。注意，在選擇可折疊面板窗口部件時，會自動選擇UI核心庫和窗口部件工廠。還需注意，在下載頁面中，默認情況下會選擇“UI lightness”主題并將其包括在下載包中。在以下部分中，會將此主題應(yīng)用于聯(lián)系人列表。

lt;style type=“text/css”gt;

ul {list-style-type: none}

img {padding-right: 20px; float:left}

#infolist {width:500px}

lt;/stylegt;

在lt;stylegt;標記內(nèi)鍵入內(nèi)容時，可以通過按Ctrl-空格鍵利用IDE的內(nèi)置CSS代碼完成。

要生成可折疊面板效果，需導航至計算機上下載可折疊面板窗口部件的位置。在下載的文件夾中，將發(fā)現(xiàn)一個名為“development-bundle”的文件夾。在development-bundle文件夾中，展開ui文件夾并查找以下3個腳本：

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.accordion.js

工具包腳本的開發(fā)版未進行最小化處理，這意味著在編輯器中查看時，其代碼易于讀取。通常，要切換到產(chǎn)品應(yīng)用程序的已壓縮的最小化版本，以節(jié)省下載時間。

復制這3個腳本，回到IDE中，將其粘貼到之前在jqproject文件夾中創(chuàng)建的js件夾。development-bundlegt;ui文件夾也包含一個名為jquery-ui-1.8.1.custom.js的文件。此文件將上面所列的3個腳本組合為一個腳本。也可以將此文件粘貼到項目中，以代替3個單獨的腳本。

通過輸入3個鏈接到這些新JavaScript文件的lt;scriptgt;標記來引用index.html頁面中的腳本?？稍诰o隨引用核心jQuery庫jquery-1.4.2.js的lt;scriptgt;標記之后的位置添加lt;scriptgt;記。使用現(xiàn)有的lt;scriptgt;標記作為模型。

2.3 將jQuery的默認主題用于樣式增強

項目已經(jīng)具有了人們想要的行為。現(xiàn)在，通過并入jQuery的默認“UI lightness”主題來解決此問題。

（1）導航至計算機中下載可折疊面板窗口部件位置。在下載的文件夾中，展開development-bundlegt;themesgt;uilightness文件夾。

（2）在ui-lightness文件夾中，復制jquery-ui-1.8.1.custom.css文件和images文件夾，其中包含正確呈現(xiàn)主題所需的所有圖像。

（3）在IDE中，在名為css的項目中創(chuàng)建一個新文件夾。此文件夾將包含可折疊面板窗口部件的“U I lightness”主題。

為此，右鍵單擊項目節(jié)點并選擇“New”gt;“Folder”。（如果文件夾未顯示為選項，單擊I D E工具欄中的“New File”按鈕，然后在新建文件向?qū)е羞x擇“Other”gt;“Folder”。）將該文件夾命名為css并將其與index.html文件放在同一目錄中。

對于Java Web項目，確保將css文件夾放在項目的Web根中。為此，需在Parent Folder字段中輸入web。

（4）將這兩項直接粘貼到新的css文件夾中。為此，右鍵單擊css文件夾節(jié)點并選擇“Paste”。

（5）從index.html Web頁中引用jquery-ui-1.8.1.custom.css文件。在頁的頭中添加lt;linkgt;標記。

lt;link rel=“stylesheet” href=“css/jquery-ui-1.8.1.custom.css” type=“text/css”gt;

（6）返回到Web瀏覽器并刷新頁面。需要注意的是，現(xiàn)在使用jQuery的默認主題顯示列表，這是簡單、未風格化的版本的美學改進。

3 結(jié)語

本文通過介紹在項目中添加jQuery庫以及如何使用jQuery語法編寫Web前端組件的一些相關(guān)基本指令，來構(gòu)建Web頁面中元素的外觀和行為。隨著社會的不斷進步發(fā)展以及移動互聯(lián)網(wǎng)技術(shù)的不斷提高，Web前端組件開發(fā)工作需要相關(guān)技術(shù)的不斷推陳出新和完善。因此，不斷探求更多創(chuàng)新多元的框架進行前端組建開發(fā)，是未來需要研究的主要課題。

[1]施人銅.基于jQuery的Web前端組件開發(fā)研究與應(yīng)用[D].南京：東南大學，2015.

[2]黃競.基于jQuery框架的Web前端系統(tǒng)構(gòu)建方法的研究與應(yīng)用[D].北京：北京郵電大學，2012.

[3]王芳.jQuery插件對Web應(yīng)用的影響研究與討論[J].數(shù)字通信世界，2015（11）：63.

Application research of Web front-end component based on jQuery

Liu Ting
(China United Engineering Co.,Ltd., Chongqing 400039, China)

There are many solutions to the component problem, such as ReactJS, AngularJS and VueJS. Front-end engineering after componentization still faces many challenges, and these challenges have spawned many new solutions. This article mainly discusses the application research of Web front-end component based on jQuery.

jQuery; Web front-end component; JavaScript

劉?。?982— ），男，重慶人，工程師，學士；研究方向：計算機軟件。