简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

简洁掌握jQuery：核心jQuery

王林
发布： 2023-09-04 19:49:07
原创
950 人浏览过
<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 事件。这就是使用像 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_d...
    来自于 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&qu...
    来自于 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
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！