首頁技術(shù)文章正文

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

更新時間:2020-10-23 來源:黑馬程序員 瀏覽量:

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

1603444341178_31.png

圖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所示。
1603444348519_32.png

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

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

圖3 jQuery下載頁面

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

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

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

 在上述代碼中,第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元素前面,則代碼不會生效,示例代碼如下。
1603444121289_w2.png

  上述代碼將要操作的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加載事件的使用,具體代碼如下。
1603444065670_w3.png

猜你喜歡:

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

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!