簡潔掌握jQuery：核心jQuery
- 王林原創
- 2023-09-04 19:49:071003瀏覽
jQuery 背後的基本概念
雖然 jQuery API 中存在一些概念上的變化（例如 $.ajax 等函數），但 jQuery 背後的中心概念是「尋找某事，做某事」。更具體地說，從 HTML 文件中選擇 DOM 元素，然後使用 jQuery 方法對它們執行某些操作。這是大局概念。
#為了深入理解這個概念，請思考下面的程式碼。
<!DOCTYPE html>
<html lang="en">
<body>
<!-- jQuery will change this -->
<a href=""></a>
<!-- to this <a href="https://www.jquery.com">jQuery</a> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery('a').text('jQuery').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
</script>
</body>
</html>
請注意，在此 HTML 文件中，我們使用 jQuery 來選擇 DOM 元素 (<a></a>)。選擇某些內容後，我們然後透過呼叫 jQuery 方法 text()、attr() 和 appendTo() 來對選擇執行一些操作。
text 方法在包裝的 <a></a> 元素上調用，並將該元素的顯示文字設為「jQuery」。 attr 呼叫將 href 屬性設定為 jQuery 網站。
領會「找到某事，做某事」的基本概念對於 jQuery 開發人員的進步至關重要。
概念、概念背後、jQuery 背後
雖然選擇某事和做某事是 jQuery 背後的核心概念，但我想擴展這個概念以包括創建一些東西。因此，jQuery 背後的概念可以擴展到包括首先創建新的東西，選擇它，然後用它做一些事情。我們可以稱之為 jQuery 背後的概念、概念背後的概念。
我想要說明的是，您不會只選擇 DOM 中已有的內容。對於 grok 來說，另外一點很重要，那就是 jQuery 可用來建立新的 DOM 元素，然後對這些元素執行某些操作。
在下面的程式碼範例中，我們建立一個不在 DOM 中的新 <a></a> 元素。一旦創建，它就會被選擇並進行操作。
<!DOCTYPE html>
<html lang="en">
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery('<a>jQuery</a>').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2').appendTo('body');
</script>
</body>
</html>
這裡要掌握的關鍵概念是，我們正在動態建立 <a></a> 元素，然後對其進行操作，就像它已經在 DOM 中一樣。
jQuery 需要 HTML 才能在標準模式或接近標準模式下執行
當瀏覽器以怪異模式呈現 HTML 頁面時，存在 jQuery 方法無法正常運作的已知問題。確保當您使用 jQuery 時，瀏覽器會透過使用有效的文件類型以標準模式或幾乎標準模式解釋 HTML。
為了確保正確的功能，本書中的程式碼範例使用 HTML 5 文件類型。
<!DOCTYPE html>
等待 DOM 準備就緒
當 DOM 載入並可用於操作時，jQuery 會觸發名為 ready 的自訂事件。操作 DOM 的程式碼可以在此事件的處理程序中執行。這是 jQuery 使用中常見的模式。
以下範例展示了正在使用的此自訂事件的三個編碼範例。
<!DOCTYPE html>
<script>
// Standard
jQuery(document).ready(function () { alert('DOM is ready!'); });
// Shortcut, but same thing as above
jQuery(function () { alert('No really, the DOM is ready!'); });
// Shortcut with fail-safe usage of $. Keep in mind that a reference
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert('Seriously its ready!');
// Use $() without fear of conflicts
});
</script>
請記住，您可以根據需要將任意數量的 ready() 事件附加到文件中。你不只限於一個。它們按照添加的順序執行。
瀏覽器視窗完全載入時執行 jQuery 程式碼
通常，我們不想等待 window.onload 事件。這就是使用像 ready() 這樣的自訂事件的要點，該事件將在視窗載入之前、DOM 準備好被遍歷和操作之後執行程式碼。
然而，有時我們確實想等待。雖然自訂 ready() 事件非常適合在 DOM 可用後執行程式碼，但我們也可以使用 jQuery 在整個網頁（包括所有資源）完全載入後執行程式碼。
這可以透過將載入事件處理程序附加到 window 物件來完成。 jQuery 提供了 load() 事件方法，可用來在視窗完全載入後呼叫函數。下面，我提供了 load() 事件方法的使用範例。
<!DOCTYPE html>
<script>
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut
jQuery(window).load(function(){ alert('The page and all its assets are loaded!'); });
</script>
在包含 jQuery 之前包含所有 CSS 檔案
從 jQuery 1.3 開始，該程式庫不再保證在觸發自訂 ready() 事件之前載入所有 CSS 檔案。由於 jQuery 1.3 中的此更改，您應該始終在任何 jQuery 程式碼之前包含所有 CSS 檔案。這將確保瀏覽器在轉向 HTML 文件中稍後包含的 JavaScript 之前已解析 CSS。當然，當瀏覽器解析 JavaScript 時，透過 CSS 引用的圖像可能會也可能不會下載。
使用 jQuery 的託管版本
將 jQuery 嵌入網頁時，大多數人選擇下載原始碼並從個人網域/主機連結到它。但是，還有其他選項需要其他人為您託管 jQuery 程式碼。
Google 託管了多個版本的 jQuery 原始碼，目的是供任何人使用。這實際上非常方便。在下面的程式碼範例中，我使用 <script></script> 元素來包含由 Google 託管的 jQuery 的縮小版本。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。
使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。
不使用 Ready() 解析 DOM 时执行 jQuery 代码
并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。
现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。
为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的
以上是簡潔掌握jQuery：核心jQuery的詳細內容。更多資訊請關注PHP中文網其他相關文章！