首頁(yè)技術(shù)文章正文

怎樣使用jQuery？jQuery常見(jiàn)操作問(wèn)題和解決方法

更新時(shí)間:2021年04月20日11時(shí)48分來(lái)源:傳智教育瀏覽次數(shù):

在引入jQuery后，就可以使用jQuery提供的功能了。下面通過(guò)代碼演示jQuery的簡(jiǎn)單使用，具體代碼如下。

   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8">
     <title>使用jQuery</title>
     <style>
      div { width: 200px; height: 200px; background-color: pink; }
     </style>
     <script src="jquery-3.1.1.min.js">
   </head>
   <body>
    <div></div>
    <script>
     $("div").hide(); // 隱藏div元素
    </script>
   </body>
  </html>

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

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

// jQuery代碼（為了方便對(duì)比，將代碼分成兩行書(shū)寫(xiě)）
var div = $("div");      // 獲取元素
div.hide();                   // 對(duì)元素進(jìn)行操作// JavaScript原生代碼
var div = document.querySelector('div');  // 獲取元素
div.style.display = 'none';                         // 對(duì)元素進(jìn)行操作

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

   <body>
    <script>
     $("div").hide();
    </script>
    <div></div>
   </body>

上述代碼將要操作的div元素寫(xiě)在了第5行，通過(guò)瀏覽器訪問(wèn)，會(huì)發(fā)現(xiàn)div沒(méi)有被隱藏起來(lái)，說(shuō)明jQuery沒(méi)有找到div元素。

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

// 語(yǔ)法1（簡(jiǎn)寫(xiě)形式）
$(function() {
 // 頁(yè)面DOM加載后執(zhí)行的代碼
});
// 語(yǔ)法2（完整形式）
$(document).ready(function() {
 // 頁(yè)面DOM加載完成后執(zhí)行的代碼
});

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

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

   <body>
    <script>
     $(function() {
      $("div").hide();
     });
    </script>
    <div></div>
   </body>

通過(guò)瀏覽器訪問(wèn)，會(huì)發(fā)現(xiàn)div成功被隱藏起來(lái)了。

需要注意的是，雖然jQuery的加載事件和DOM中的window.onload類似，但也有不同之處，具體對(duì)比如表1所示。

表1 頁(yè)面加載事件對(duì)比

對(duì)比項(xiàng)	window.onload	$(document).ready()
執(zhí)行時(shí)機(jī)	必須等待網(wǎng)頁(yè)中的所有內(nèi)容加載完成后（包括外部元素，如圖片）才能執(zhí)行	網(wǎng)頁(yè)中的所有DOM繪制完成后就執(zhí)行（可能關(guān)聯(lián)內(nèi)容并未加載完成）
編寫(xiě)個(gè)數(shù)	不能編寫(xiě)多個(gè)	能夠編寫(xiě)多個(gè)，依次執(zhí)行
簡(jiǎn)化寫(xiě)法	無(wú)	$()