更新時(shí)間:2020-12-29 來源:黑馬程序員 瀏覽量:
隨著Web前端技術(shù)的不斷發(fā)展,互聯(lián)網(wǎng)上誕生了很多優(yōu)秀的JavaScript框架,這些框架基本上都封裝了JavaScript、DOM和Ajax等操作的功能,為開發(fā)人員提供了更加快捷、強(qiáng)大的開發(fā)方式。常見的JavaScript框架有jQuery、Prototype、ExtJS和等。jQuery因其簡潔的語法和跨瀏覽器的兼容性特點(diǎn),極大地簡化了開發(fā)人員對DOM對象、事件處理、動畫效果和Ajax的操作,目前已經(jīng)從其他框架中脫穎而出,成為Web開發(fā)人員的最佳選擇。
jQuery框架的特點(diǎn)可以歸納為以下幾點(diǎn)。
·jQuery是一個(gè)輕量級的腳本,其代碼非常小巧。
·語法簡潔易懂,學(xué)習(xí)速度快,文檔豐富。
·支持CSS1~css3定義的屬性和選擇器。
·跨瀏覽器,支持的瀏覽器包括IE、FireFox、Chrome等。
·實(shí)現(xiàn)了JavaScript腳本和HTML代碼的分離,便于后期編輯和維護(hù)。
·插件豐富,可以通過插件擴(kuò)展更多功能。
jQuery的官方網(wǎng)站(http://jquery.com/)提供了jQuery框架最新版本的下載,如下圖所示。
從上圖中可以看出,目前的jQuery最新版本是v3.5.1。由于jQuery在2.x版本以后就不再支持1E6/7/8瀏覽器,可以使用IE瀏覽器通過訪問地址https://code.jquery.com/jquery-3.5.1.min.js下載此版本。如果需要下載其他版本的jQuery,只需要更改上述地址中的版本號,并使用IE瀏覽器即可快速下載。
jQuery的使用非常簡單,只要在HTML(或JSP)中引入一個(gè)外部JavaScript文件即
可,其引入代碼如下所示:
<script src="jquery-3.5.1.min.js"></script>
上述代碼表示引入當(dāng)前目錄下的“jquery-3.5.1.min.js”文件。將jQuery文件引入之后,就可以使用jQuery的各種功能了,下面通過簡單的案例演示jQuery的使用。
1.創(chuàng)建項(xiàng)目
在Eclipse中創(chuàng)建一個(gè)名稱為chapterl5的Web項(xiàng)目,在項(xiàng)目的WebContent目錄下創(chuàng)建一個(gè)名稱為js的文件夾,并將下載的jquery-1.11.3.min.js文件放置在文件夾中。
2.創(chuàng)建hello.jsp文件
在WebContent目錄下創(chuàng)建一個(gè)名稱為hell.jsp的文件,在該文件的<head>標(biāo)記中引入jQuery類庫文件,并使用jQuery編寫一個(gè)彈出對話框,其代碼如下所示:
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello World!"); }) </script>
在上述代碼中,$(document).ready(function(){……})表示頁面加載完成后執(zhí)行匿名函數(shù)function(),相當(dāng)于JavaScript中的windows.onload函數(shù)。這里還可以簡寫成$().ready(function(){……})或$(function(){……})這樣的形式。
3.運(yùn)行程序并查看結(jié)果
發(fā)布項(xiàng)目并啟動服務(wù)器,在瀏覽器的地址欄中輸入http://localhost:8080/chapter15/hello.jsp訪問hello.jsp,瀏覽器的顯示“Hello World!”。因?yàn)閔ello.jsp頁面文件載入后自動彈出了“ Hello World!”對話框,這說明 jQuery已經(jīng)可以正常使用。
在jQuery中,符號$的使用最為頻繁。$本質(zhì)上是一個(gè)函數(shù),該函數(shù)根據(jù)其參數(shù)的不同可以實(shí)現(xiàn)不同的功能,如作為選擇器使用、作為功能函數(shù)的前綴、創(chuàng)建頁面的DOM節(jié)點(diǎn)等。此外,還可以使用 jQuery代替$,例如$(document)可以寫成jQuery(document)。$實(shí)際上是 jQuery的簡寫形式。
猜你喜歡: