社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 簡潔掌握jQuery：核心jQuery

簡潔掌握jQuery：核心jQuery

王林
發布： 2023-09-04 19:49:07
原創
1030 人瀏覽過
<p>簡潔掌握jQuery：核心jQuery

<p>

jQuery 背後的基本概念

<p>雖然 jQuery API 中存在一些概念上的變化（例如 $.ajax 等函數），但 jQuery 背後的中心概念是「尋找某事，做某事」。更具體地說，從 HTML 文件中選擇 DOM 元素，然後使用 jQuery 方法對它們執行某些操作。這是大局概念。

<p>

<p>#為了深入理解這個概念，請思考下面的程式碼。 

<!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>
登入後複製
<p>請注意，在此 HTML 文件中，我們使用 jQuery 來選擇 DOM 元素 (<a>)。選擇某些內容後，我們然後透過呼叫 jQuery 方法 text()、attr() 和 appendTo() 來對選擇執行一些操作。

<p>text 方法在包裝的 <a> 元素上調用，並將該元素的顯示文字設為「jQuery」。 attr 呼叫將 href 屬性設定為 jQuery 網站。

<p>領會「找到某事，做某事」的基本概念對於 jQuery 開發人員的進步至關重要。

概念、概念背後、jQuery 背後

<p>雖然選擇某事和做某事是 jQuery 背後的核心概念，但我想擴展這個概念以包括創建一些東西。因此，jQuery 背後的概念可以擴展到包括首先創建新的東西，選擇它，然後用它做一些事情。我們可以稱之為 jQuery 背後的概念、概念背後的概念。

<p>我想要說明的是，您不會只選擇 DOM 中已有的內容。對於 grok 來說，另外一點很重要，那就是 jQuery 可用來建立新的 DOM 元素，然後對這些元素執行某些操作。

<p>在下面的程式碼範例中，我們建立一個不在 DOM 中的新 <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>
登入後複製
<p>這裡要掌握的關鍵概念是，我們正在動態建立 <a> 元素，然後對其進行操作，就像它已經在 DOM 中一樣。

jQuery 需要 HTML 才能在標準模式或接近標準模式下執行

<p>當瀏覽器以怪異模式呈現 HTML 頁面時，存在 jQuery 方法無法正常運作的已知問題。確保當您使用 jQuery 時，瀏覽器會透過使用有效的文件類型以標準模式或幾乎標準模式解釋 HTML。

<p>為了確保正確的功能，本書中的程式碼範例使用 HTML 5 文件類型。 

<!DOCTYPE html>
登入後複製

等待 DOM 準備就緒

<p>當 DOM 載入並可用於操作時，jQuery 會觸發名為 ready 的自訂事件。操作 DOM 的程式碼可以在此事件的處理程序中執行。這是 jQuery 使用中常見的模式。

<p>以下範例展示了正在使用的此自訂事件的三個編碼範例。 

<!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
            });
        
    

    <body></body>
登入後複製
<p>請記住，您可以根據需要將任意數量的 ready() 事件附加到文件中。你不只限於一個。它們按照添加的順序執行。

瀏覽器視窗完全載入時執行 jQuery 程式碼

<p>通常，我們不想等待 window.onload 事件。這就是使用像 ready() 這樣的自訂事件的要點，該事件將在視窗載入之前、DOM 準備好被遍歷和操作之後執行程式碼。

<p>然而，有時我們確實想等待。雖然自訂 ready() 事件非常適合在 DOM 可用後執行程式碼，但我們也可以使用 jQuery 在整個網頁（包括所有資源）完全載入後執行程式碼。

<p>這可以透過將載入事件處理程序附加到 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!'); });
        
    

    <body></body>
登入後複製

在包含 jQuery 之前包含所有 CSS 檔案

<p>從 jQuery 1.3 開始，該程式庫不再保證在觸發自訂 ready() 事件之前載入所有 CSS 檔案。由於 jQuery 1.3 中的此更改，您應該始終在任何 jQuery 程式碼之前包含所有 CSS 檔案。這將確保瀏覽器在轉向 HTML 文件中稍後包含的 JavaScript 之前已解析 CSS。當然，當瀏覽器解析 JavaScript 時，透過 CSS 引用的圖像可能會也可能不會下載。

使用 jQuery 的託管版本

<p>將 jQuery 嵌入網頁時，大多數人選擇下載原始碼並從個人網域/主機連結到它。但是，還有其他選項需要其他人為您託管 jQuery 程式碼。

<p>Google 託管了多個版本的 jQuery 原始碼，目的是供任何人使用。這實際上非常方便。在下面的程式碼範例中，我使用 <script> 元素來包含由 Google 託管的 jQuery 的縮小版本。 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
登入後複製
<p>Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。

<p>使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。

不使用 Ready() 解析 DOM 时执行 jQuery 代码

<p>并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。

<p>现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。

<p>为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的 </body> 结束元素之前即可。这样做可以确保 DOM 完全加载，因为浏览器将从上到下解析文档。如果您将 JavaScript 代码放在文档中它操作的 DOM 元素之后，则无需使用 ready() 事件。

<p>在下面的示例中，我放弃了使用 ready()，只需将脚本放在文档正文关闭之前即可。这是我在本书中以及我构建的大多数网站上使用的技术。

<!DOCTYPE html>


    <p>
        Hi, I'm the DOM! Script away!

    
    <script> alert(jQuery('p').text()); 
</body>
登入後複製
<p>如果我将 <script> 放在 <p> 元素之前，它将在浏览器加载 <p> 元素之前执行。这将导致 jQuery 假定文档不包含任何 <p> 元素。但是，如果我使用 jQuery 自定义 ready() 事件，那么 jQuery 在 DOM 准备好之前不会执行代码。但是，当我们可以控制文档中 <script> 元素的位置时，为什么要这样做呢？将 jQuery 代码放在页面底部可以避免使用 ready() 事件。事实上，将所有 JavaScript 代码放在页面底部是一种经过验证的性能策略。

摸索 jQuery 链接

<p>使用 jQuery 函数选择某些内容并创建包装器集后，您实际上可以将 jQuery 方法链接到该集中包含的 DOM 元素。从概念上讲，jQuery 方法通过始终返回 jQuery 包装器集来继续该链，然后该包装器集可由链中的下一个 jQuery 方法使用。注意：大多数 jQuery 方法都是可链接的，但不是全部。

<p>您应该始终尝试通过利用链接来重用包装集。在下面的代码中，text()、attr() 和 addClass() 方法被链接起来。

<!DOCTYPE html>


    <a>
    
    <script> (function ($) {
     $('a').text('jQuery') // Sets text to jQuery and then returns $('a')
      .attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2/') // Sets the href attribute and then returns $('a')
      .addClass('jQuery'); // Sets class and then returns $('a')
 })(jQuery) 
</body>
登入後複製

用破坏性方法打破链条

<p>如前所述，并非所有 jQuery 方法都维护该链。诸如 text() 之类的方法在用于设置元素的文本节点时可以链接起来。然而， text() 在用于获取元素中包含的文本节点时实际上破坏了链条。

<p>在下面的示例中，text() 用于设置然后获取 <p>  元素中包含的文本。

<!DOCTYPE html>


    <p>

    
    <script> (function ($) {
    var theText = $('p').text('jQuery').text(); // Returns the string "jQuery"
     alert(theText);
     // Cannot chain after text(). The chain is broken.
     // A string is returned, not the jQuery object.
 })(jQuery) 
</body>
登入後複製
<p>使用 text() 获取元素中包含的文本是断链的一个主要示例，因为该方法将返回包含文本节点的字符串，但不包含 jQuery 包装器集。

<p>如果 jQuery 方法不返回 jQuery 包装器集，那么链就会被破坏，这应该不足为奇。这种方法被认为是破坏性的。

使用破坏性 jQuery 方法并使用 End() 退出破坏

<p>改变所选原始 jQuery 包装器集的 jQuery 方法被认为是破坏性的。原因是它们不维护包装器集的原始状态。不用担心;没有任何东西被真正摧毁或移除。相反，以前的包装器集会附加到新集。

<p>但是，一旦原始包装集被更改，链接的乐趣就不必停止。使用 end() 方法，您可以取消对原始包装器集所做的任何破坏性更改。检查以下示例中 end() 方法的用法，了解如何进出 DOM 元素进行操作。

<!DOCTYPE html>


    
    
    
        
  • 
        
  • 
            
      
                
    • 
                
    • 
                
    • 
            
    
        
    • 
        
  • 
        
  • 
    

    
    <script>  (function ($) {
      $('#list') // Original wrapper set
        .find('> li') // Destructive method
            .filter(':last') // Destructive method
                .addClass('last')
            .end() // End .filter(':last')
            .find('ul') // Destructive method
                 .css('background', '#ccc')
                .find('li:last') // Destructive method
                    .addClass('last')
                .end() // End .find('li:last')
            .end() // End .find('ul')
        .end() // End .find('> li')
        .find('li') // Back to the orginal $('#list')
            .append('I am an <li>');
  })(jQuery); 
</body>
登入後複製

jQuery 函数的各个方面

<p>jQuery 的功能是多方面的。我们可以向它传递不同的值和字符串格式，然后它可以使用它们来执行独特的功能。以下是 jQuery 函数的几种用法：

  • 使用CSS表达式和自定义jQuery表达式从DOM中选择元素，以及使用DOM引用选择元素：jQuery('p > a')或jQuery(':first')和 jQuery(document.body)
  • 通过传递 HTML 字符串结构或创建 DOM 元素的 DOM 方法来动态创建 HTML： jQuery('<div id="nav"></div>') 或 jQuery(document.createElement( 'div'))
  • ready() 事件的快捷方式，通过将函数传递给 jQuery 函数来实现： jQuery(function($){/* Ready() 的快捷方式 */})
<p>下面的代码示例详细介绍了这些用法。

<!DOCTYPE html>


    
    <script>  jQuery(function($){ // Pass jQuery a function
      // Pass jQuery a string of HTML
      $('<p>
').appendTo('body');
      // Pass jQuery an element reference
      $(document.createElement('a')).text('jQuery').appendTo('p');
      // Pass jQuery a CSS expression
      $('a:first').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
      // Pass jQuery a DOM reference
      $(document.anchors[0]).attr('jQuery');
  }); 
</body>
登入後複製

摸索当关键字 this 引用 DOM 元素时

<p>将事件附加到包装器集中包含的 DOM 元素时，关键字 this 可用于引用调用该事件的当前 DOM 元素。以下示例包含 jQuery 代码，该代码将自定义 mouseenter 事件附加到页面中的每个 <a> 元素。当光标进入或退出子元素时，本机 JavaScript mouseover 事件会触发，而 jQuery 的 mouseenter 则不会。

<!DOCTYPE html>


    jQuery.com
    jQuery.com
    jQuery.com

    
    <script>  (function ($)
    {
      $('a').mouseenter(
          function () { alert(this.id); });
    })(jQuery);
    
</body>
登入後複製
<p>在传递给 mouseenter() 方法的匿名函数内，我们使用关键字 this 来引用当前 <a> 元素。每次鼠标触摸“jQuery.com”文本时，浏览器都会通过识别其 id 属性值来提醒鼠标悬停在哪个元素上。

<p>在前面的示例中，还可以获取 this 引用并将其传递给 jQuery 函数，以便使用 jQuery 功能包装 DOM 元素。

<p>所以代替这个：

// Access the ID attribute of the DOM element.
alert(this.id);
登入後複製
<p>我们本来可以这样做：

// Wrap the DOM element with a jQuery object,
// and then use attr() to access ID value.
alert($(this).attr('id'));
登入後複製
<p>这是可能的，因为 jQuery 函数不仅接受选择器表达式，还接受对 DOM 元素的引用。在代码中，this 是对 DOM 元素的引用。

<p>您可能想要将 jQuery 功能包装在 DOM 元素周围的原因应该是显而易见的。这样做使您能够在需要时使用 jQuery 链接。

<p>迭代 jQuery 包装器集中包含的一组元素与我们刚刚讨论的概念有些相似。通过使用 jQuery each() 方法，我们可以迭代包装集中包含的每个 DOM 元素。这允许通过使用 this 关键字单独访问每个 DOM 元素。

<p>基于上一示例中的标记，我们可以选择页面中的所有 <a> 元素，并使用 each() 方法迭代包装器中的每个 <a> 元素设置，访问其 id 属性。这是一个例子。

<!DOCTYPE html>

jQuery.com jQuery.com jQuery.com
    
    <script>  (function ($) {
      $('a').each(function(){
          // Loop that alerts the id value for every <a> in the page
          alert($(this).attr('id')); // "this" refers to the current element in the loop
      });
  })(jQuery); 
</body>
登入後複製
<p>如果您要在浏览器中加载 HTML，浏览器将针对页面中每个 <a> 元素的 id 值发出警报。由于页面中有三个 <a> 元素，因此您可以通过 each() 方法和三个警报窗口获得三次迭代。

从包装集中提取元素，无需 jQuery 即可直接使用它们

<p>仅仅因为您将 jQuery 功能包装在 HTML 元素周围并不意味着您失去了对实际 DOM 元素本身的访问权限。您始终可以从包装器集中提取元素并通过本机 JavaScript 对该元素进行操作。例如，在下面的代码中，我通过操作 <a> DOM 元素的本机标题属性来设置 HTML 页面中 <a> 元素的标题属性。

<!DOCTYPE html>


    <a>jQuery.com
    
    <script>   (function ($) {
       // Using DOM node properties to set the title attribute
       $('a').get(0).title = 'jQuery.com';
       // Manipulation of DOM element using jQuery methods
       $('a').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
   })(jQuery);
    
</body>
登入後複製
<p>如所示，jQuery 提供了方便的 get() 方法来访问包装器集中特定索引处的 DOM 元素。

<p>但是这里还有另一种选择。您可以通过简单地在 jQuery 对象本身上使用方括号数组表示法来避免使用 get() 方法。在我们之前的代码示例的上下文中：

<p>这段代码：

$('a').get(0).title ='jQuery.com';
登入後複製
<p>可能会变成这样：

$('a')[0].title ='jQuery.com';
登入後複製
<p>两者都允许访问实际的 DOM 元素。就我个人而言，我更喜欢方括号表示法。它速度更快，因为它使用本机 JavaScript 从数组中检索元素，而不是将其传递给方法。

<p>但是，get() 方法提供了一个巧妙的解决方案，用于将所有 DOM 元素放入本机数组中。只需调用 get() 方法而不向其传递索引参数，该方法将返回本机 JavaScript 数组中包装器集中的所有 DOM 元素。

<p>为了演示，我们使用 get() 进行测试。在下面的代码中，我将所有 <a> 元素放入一个数组中。然后，我使用该数组访问页面上第三个 <a> DOM 对象的 title 属性。

<!DOCTYPE html>


    jQuery.com
    jQuery.com
    jQuery.com
    
    <script>  (function ($) {
      var arrayOfAnchors = $('a').get(); // Create native array from wrapper set
      alert(arrayOfAnchors[2].title); // Alerts the third link
        })
      (jQuery);
    
</body>
登入後複製
<p>注意：使用 get() 将结束 jQuery 的链接。它将获取包装器集并将其更改为不再使用 jQuery 功能包装的简单 DOM 元素数组。因此，使用 .end() 方法无法恢复 .get() 之后的链接。

检查包装器集是否为空

<p>在开始操作包装器集之前，检查您是否确实选择了某些内容是合乎逻辑的。最简单的解决方案是使用 if 语句来检查包装器集是否包含任何 DOM 元素。

<!DOCTYPE html>


    <a>jQuery
    
    <script>
        if (jQuery('a').get(0)) { // Is there an element in the set?
            jQuery('a').attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
        }
        if (jQuery('a').length) { // Check the length of the set. Can also use .size()
            jQuery('a').attr('title', 'jQuery');
        }  
</body>
登入後複製
<p>事情的真相是上面的 if 语句并不是完全必要的，因为如果没有找到元素，jQuery 将默默地失败。但是，链接到任何空包装器集的每个方法仍然会被调用。因此，虽然我们实际上可以放弃使用 if 语句，但使用它们可能是一个很好的经验法则。在空包装器集上调用方法可能会导致不必要的处理，如果方法返回包装器集以外的值，并且对这些值进行操作，则可能会导致不良结果。

通过重命名 jQuery 对象本身来创建别名

<p>jQuery 提供了 noConflict() 方法，该方法有多种用途，即能够用另一个别名替换 $。这在三个方面很有帮助：它可以放弃对另一个库使用 $ 标志，帮助避免潜在的冲突，并提供为 jQuery 对象自定义名称空间/别名的能力。

<p>例如，假设您正在为 XYZ 公司构建 Web 应用程序。自定义 jQuery 可能会很好，这样就不必使用 jQuery('div').show() 或 $('div').show() 您可以使用 XYZ('div ').show() 代替。

<!DOCTYPE html>


    <div>Syncfusion., Inc.
<script> var Syncfusion = jQuery.noConflict(); // Do something with jQuery methods alert(Syncfusion("div").text()); </body>
登入後複製
<p>注释：通过向 noConflict() 函数传递一个布尔值 true，您可以完全撤消 jQuery 在网页中引入的内容。这应该只在极端情况下使用，因为它很可能会导致 jQuery 插件出现问题。

当隐式迭代不够时使用 .each()

<p>希望很明显，如果您有一个包含三个空 <div> 元素的 HTML 页面（下面的示例），则以下 jQuery 语句将选择页面上的所有三个元素，迭代这三个元素（隐式）迭代），并将在所有三个 <div> 元素中插入文本“I am a div”。

<!DOCTYPE html>


    <div>
<div>
<div>
<script> (function ($) { $('div').text('I am a div'); })(jQuery); </body>
登入後複製
<p>这被认为是隐式迭代，因为 jQuery 代码假设您想要操作所有三个元素，这需要迭代所选元素并使用文本“I am a div”设置每个 <div> 的文本节点值”。默认情况下执行此操作时，称为隐式迭代。

<p>这非常方便。大多数情况下，大多数 jQuery 方法将应用隐式迭代。但是，其他方法仅适用于包装器集中的第一个元素。例如，jQuery 方法 attr() 在用于获取属性值时将仅访问包装器集中的第一个元素。

<p>注意：当使用 attr() 方法设置属性时，jQuery 实际上会应用隐式迭代来将属性及其值设置到包装集中的所有元素。< /p> <p>在下面的代码中，包装器集包含页面中的所有 <div> 元素，但 attr() 方法仅返回包装器集中包含的第一个元素的 id 值。 

<!DOCTYPE html>


    
I am a div

    
I am a div

    
I am a div

    
    <script>  (function($){
      // Alerts attribute value for first element in wrapper set
      alert($('div').attr('id')); // Alerts "div1"
  })(jQuery); 
</body>
登入後複製
<p>为了演示，假设您的目标实际上是获取页面上每个元素的 id 属性值。您可以编写三个单独的 jQuery 语句来访问每个 <div> 元素的 id 属性值。如果我们这样做，它可能看起来像这样：

$('#div1').attr('id');
$('#div2').attr('id');
$('#div3').attr('id');
// or
var $divs = $('div'); // Cached query
$divs.eq(0).attr('id'); // Start with 0 instead of 1
$divs.eq(1).attr('id');
$divs.eq(2).attr('id');
登入後複製
<p>这似乎有点冗长，不是吗？如果我们可以循环包装器集并简单地从每个 <div> 元素中提取 id 属性值，不是很好吗？通过使用 $().each() 方法，当我们的包装器集需要显式迭代来处理多个元素时，我们会调用另一轮迭代。

<p>在下面的代码示例中，我使用 $().each() 方法循环遍历包装器集，访问集中的每个元素，然后提取其 id 属性值。

<!DOCTYPE html>


    
div1

    
div2

    
div3

    
    <script>  (function($){
      // 3 alerts, one for each div
      $('div').each(function(){
          // "this" is each element in the wrapper set
          alert($(this).attr('id'));
          // Could also be written: alert(this.id);
        });
      })(jQuery);

    
</body>
登入後複製
<p>想象一下您面前的可能性，您可以随时强制执行迭代。

<p>注意： jQuery 还提供了 $.each 函数，不要与 $().each 方法混淆，该方法专门用于迭代 jQuery 包装器集。 $.each 方法实际上可用于迭代任何旧的 JavaScript 数组或对象。它本质上是原生 JavaScript 循环的替代品。

jQuery 包装器集中的元素按文档顺序返回

<p>选择器引擎将按照文档顺序返回结果，而不是按照选择器传入的顺序。包装器集将根据每个元素在文档中出现的顺序（从上到下）填充所选元素.

<!DOCTYPE html>


    
h1

    
h2

    
h3

    
    <script>  (function ($) {
      // We pass in h3 first, but h1 appears earlier in
      // the document, so it is first in the wrapper set.
      alert($('h3, h2, h1').get(0).nodeName);
      // Alerts "H1"
  })(jQuery);
    
</body>
登入後複製

确定 jQuery 函数使用的上下文

<p>选择 DOM 元素时 jQuery 函数使用的默认上下文是文档元素（例如 $('a', document)）。这意味着，如果您没有为 jQuery 函数（例如 jQuery()）提供第二个参数来用作 DOM 查询的上下文，则使用的默认上下文是文档元素，通常称为 <body>.

<p>可以使用 context 属性来确定 jQuery 函数执行 DOM 查询的上下文。下面我展示了两个检索上下文属性值的编码示例。

<!DOCTYPE html>


    <div>
        <div>
<script> (function ($) { // Alerts "object HTMLDocument" in Firefox // Same as $('a', document).context; alert($('a').context); // Alerts "object HTMLDivElement" in Firefox alert($('a', $('#context')[0]).context); })(jQuery); </body>
登入後複製

在单链中创建整个 DOM 结构，包括 DOM 事件

<p>通过利用链接和 jQuery 方法，您不仅可以创建单个 DOM 元素，还可以创建整个 DOM 结构。下面我创建了一个无序列表的 jQuery 链接，然后将其添加到 DOM。

<!DOCTYPE html>


    
    <script>  (function ($) {
      jQuery('')
          .append('
  • <a>jQuery.com
  • <a>jQuery Documentation
    • ')
          .find('a:first')
          .attr('href', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2')
          .end()
          .find('a:eq(1)')
          .attr('href', 'http://docs.jquery.com')
          .end()
          .find('a')
          .click(function () { return confirm('Leave this page?'); })
          .end()
          .appendTo('body');
  })(jQuery); 
</body>
    登入後複製
    <p>您需要从前面的示例中学到的概念是，jQuery 可用于制作和操作复杂的 DOM 结构。仅使用 jQuery 方法，您就可以创建您可能需要的大多数 DOM 结构。

    以上是簡潔掌握jQuery：核心jQuery的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    相關標籤：
    jquery 核心 簡潔
    來源：php.cn
    上一篇：JavaScript如何檢查目前運行環境是瀏覽器？ 下一篇：如何在 JavaScript 中建立具有多個嵌套鍵值對的多個物件的陣列？
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
    來自於 2024-04-06 14:54:03
    0
    2
    421
    如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
    來自於 2024-04-05 09:26:49
    0
    1
    1418
    需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
    來自於 2024-04-04 18:40:04
    0
    1
    3528
    我已經透過書籤在純 CSS 中創建了一個元素。它已創建，但不可見 我的程式碼如下：g=document.createElement('div');g.setAttribute("id","divcontainer&q...
    來自於 2024-04-04 17:27:27
    0
    1
    417
    在 Safari/Firefox iOS 上無法傳送表單數據 這適用於除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...
    來自於 2024-04-04 12:53:48
    0
    1
    303
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板