簡潔掌握jQuery：核心jQuery-js教程-PHP中文網

首頁

web前端

js教程

簡潔掌握jQuery：核心jQuery

王林

Sep 04, 2023 pm 07:49 PM

jquery核心簡潔

簡潔掌握jQuery：核心jQuery

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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles