如何獲取jQuery？jQuery的使用演示

從jQuery的官方網(wǎng)站可以獲取最新版本的jQuery文件，如圖1所示。

圖1 jQuery官方網(wǎng)站

　　從圖1中可以看出，jQuery 1.x 和 2.x系列已經(jīng)停止更新，單擊“Download jQuery”按鈕可以下載最新的jQuery 3.x系列版本。它們之間的區(qū)別在于，jQuery 1.x系列的經(jīng)典版本保持了對早期瀏覽器的支持，最終版本是jQuery 1.12.4。jQuery 2.x系列的版本不再支持IE6~8瀏覽器，從而更加輕量級，最終版本是jQuery2.2.4。而jQuery3.x系列的版本只支持最新的瀏覽器。

　　本書以jQuery 3.3.1版本為例進行講解。進入下載頁面后，獲取jQuery所有版本的下載鏈接地址，如圖2所示。

圖2 獲取jQuery所有版本的下載地址

　　在下載頁面會看到j(luò)Query文件的類型主要包括未壓縮(uncompressed)的開發(fā)版和壓縮(minified)后的生產(chǎn)版。壓縮指的是去掉代碼中所有換行、縮進和注釋等減少文件的體積，從而更有利于網(wǎng)絡(luò)傳輸。如圖3所示。

圖3 jQuery下載頁面

　　在圖3中，選擇3.3.1的壓縮版(minified)，將代碼保存成本地文件即可，將文件命名為jquery-3.3.1.min.js。

將jQuery文件下載后，在HTML中使用

引入jQuery后，就可以使用jQuery提供的功能了。下面通過代碼演示jQuery的簡單使用，具體代碼如下。

　在上述代碼中，第9行用于引入jQurey，第14行用于通過jQuery來實現(xiàn)隱藏div元素的效果。通過瀏覽器訪問測試，可以看到div被隱藏起來了。如果將第14行代碼注釋，則div就會顯示出來。

　　由此可見，在使用jQuery時，有兩個基本步驟，第一步是獲取要操作的元素，也就是在$()函數(shù)中傳入字符串div，表示div元素;第二步是調(diào)用操作方法，如hide()方法用來將元素隱藏。這個步驟和原生JavaScript的DOM操作其實是很類似的，但代碼簡潔了許多。下面通過代碼對比jQuery和JavaScript原生代碼的區(qū)別。

　　// jQuery代碼(為了方便對比，將代碼分成兩行書寫)

　　var div = $("div"); // 獲取元素

　　div.hide(); // 對元素進行操作

　　// JavaScript原生代碼

　　var div = document.querySelector('div'); // 獲取元素

　　div.style.display = 'none'; // 對元素進行操作

　　在使用jQuery時需要注意代碼的書寫位置， jQuery代碼需要寫在要操作的DOM元素的后面，確保DOM元素已經(jīng)加載后，才可以用jQuery進行操作。如果將jQuery代碼寫在DOM元素前面，則代碼不會生效，示例代碼如下。

　　上述代碼將要操作的div元素寫在了第5行，通過瀏覽器訪問，會發(fā)現(xiàn)div沒有被隱藏起來，說明jQuery沒有找到div元素。

　　如果一定要將jQuery代碼寫在DOM元素的前面，則可以利用如下語法來實現(xiàn)。

　　// 語法1(簡寫形式)

　　$(function() {

　　// 頁面DOM加載后執(zhí)行的代碼

　　});

　　// 語法2(完整形式)

　　$(document).ready(function() {

　　// 頁面DOM加載完成后執(zhí)行的代碼

　　});

　　上述代碼是jQuery提供的加載事件，將頁面DOM加載完成后要執(zhí)行的代碼提前寫到函數(shù)中，傳給jQuery，由jQuery在合適的時機去執(zhí)行。上述兩種語法任選其一，由于第1種語法比較簡潔，在開發(fā)中推薦使用第1種。

　　下面通過代碼演示jQuery加載事件的使用，具體代碼如下。


猜你喜歡：

什么是變量？JavaScript變量命名規(guī)范介紹

setTimeout函數(shù)用法：setTimeout()方法用法介紹

布局視口、視覺視口和理想視口分別是什么？

黑馬程序員web前端培訓(xùn)課程