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

怎樣使用jQuery？jQuery常見操作問題和解決方法

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

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

   <!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行用于通過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元素前面，則代碼不會生效，示例代碼如下。

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

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

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

通過瀏覽器訪問，會發(fā)現(xiàn)div成功被隱藏起來了。

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

表1 頁面加載事件對比

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