jQuery를 간단하게 마스터하기: 핵심 jQuery-JS 튜토리얼-php.cn

jQuery의 기본 개념

jQuery API에는 몇 가지 개념적 변형(예: $.ajax과 같은 함수)이 있지만 jQuery의 핵심 개념은 "무언가 찾기, 수행"입니다. 더 구체적으로 말하면 HTML 문서에서 DOM 요소를 선택한 다음 jQuery 메서드를 사용하여 해당 요소에 대해 특정 작업을 수행합니다. 이것이 큰 그림 개념이다.

이 개념을 깊이 이해하려면 아래 코드를 고려하세요.

으아악 이 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> 요소를 만듭니다. 일단 생성되면 선택되어 실행됩니다.

으아악 여기서 파악해야 할 핵심 개념은 <a></a> 요소를 동적으로 생성한 다음 해당 요소가 이미 DOM에 있는 것처럼 조작한다는 것입니다.

jQuery를 표준 모드 또는 표준 모드 근처에서 실행하려면 HTML이 필요합니다

브라우저가 이상한 모드에서 HTML 페이지를 렌더링할 때 jQuery 메서드가 제대로 작동하지 않는 알려진 문제가 있습니다. jQuery를 사용할 때 브라우저가 유효한 문서 유형을 사용하여 표준 모드 또는 거의 표준 모드에서 HTML을 해석하는지 확인하십시오.

올바른 기능을 보장하기 위해 이 책의 코드 예제에서는 HTML 5 문서 유형을 사용합니다.

으아악

DOM이 준비되기를 기다리는 중

DOM이 로드되어 조작이 가능해지면 jQuery는 ready라는 사용자 정의 이벤트를 실행합니다. DOM을 조작하는 코드는 이 이벤트 핸들러에서 실행될 수 있습니다. 이는 jQuery 사용의 일반적인 패턴입니다.

다음 예는 사용 중인 이 사용자 정의 이벤트의 세 가지 코딩 예를 보여줍니다.

으아악 원하는 만큼 ready()이벤트를 문서에 첨부할 수 있다는 점을 기억하세요. 당신은 하나만으로 제한되지 않습니다. 추가된 순서대로 실행됩니다.

브라우저 창이 완전히 로드되면 jQuery 코드 실행

일반적으로 우리는 window.onload 이벤트를 기다리고 싶지 않습니다. 이것이 창이 로드되기 전과 DOM을 탐색하고 조작할 준비가 된 후에 코드를 실행하는 window.onload 事件。这就是使用像 ready()와 같은 사용자 정의 이벤트를 사용하는 요점입니다.

하지만 때로는 기다리고 싶을 때가 있습니다. 사용자 정의 ready() 이벤트는 DOM을 사용할 수 있게 된 후 코드를 실행하는 데 적합하지만 jQuery를 사용하여 모든 리소스를 포함한 전체 웹페이지가 완전히 로드된 후에 코드를 실행할 수도 있습니다.

이 작업은 이벤트 메소드의 window 对象来完成。 jQuery 提供了 load() 事件方法，可用于在窗口完全加载后调用函数。下面，我提供了 load() 사용 예에 로딩 이벤트 핸들러를 첨부하여 수행할 수 있습니다.

으아악

jQuery를 포함하기 전에 모든 CSS 파일을 포함하세요

jQuery 1.3부터 라이브러리는 사용자 정의 ready() 이벤트가 시작되기 전에 모든 CSS 파일이 로드되는 것을 더 이상 보장하지 않습니다. jQuery 1.3의 이러한 변경으로 인해 항상 jQuery 코드 앞에 모든 CSS 파일을 포함해야 합니다. 이렇게 하면 나중에 HTML 문서에 포함된 JavaScript로 리디렉션되기 전에 브라우저가 CSS를 구문 분석했는지 확인할 수 있습니다. 물론, CSS를 통해 참조된 이미지는 브라우저가 JavaScript를 구문 분석할 때 다운로드될 수도 있고 다운로드되지 않을 수도 있습니다.

호스팅 버전의 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 文档中的 </body> 结束元素之前即可。这样做可以确保 DOM 完全加载，因为浏览器将从上到下解析文档。如果您将 JavaScript 代码放在文档中它操作的 DOM 元素之后，则无需使用 ready() 事件。

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

<!DOCTYPE html>
<html lang="en">
<body>
    <p>
        Hi, I'm the DOM! Script away!</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> alert(jQuery('p').text()); </script>
</body>
</html>

로그인 후 복사

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

摸索 jQuery 链接

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <a></a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script> (function ($) {
     $('a').text('jQuery') // Sets text to jQuery and then returns $('a')
      .attr('href', '//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2/') // Sets the href attribute and then returns $('a')
      .addClass('jQuery'); // Sets class and then returns $('a')
 })(jQuery) </script>
</body>
</html>

로그인 후 복사

用破坏性方法打破链条

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <p></p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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) </script>
</body>
</html>

로그인 후 복사

使用 text() 获取元素中包含的文本是断链的一个主要示例，因为该方法将返回包含文本节点的字符串，但不包含 jQuery 包装器集。

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <style>
        .last
        {
            background: #900;
        }
    </style>
    <ul id="list">
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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 &lt;li&gt;');
  })(jQuery); </script>
</body>
</html>

로그인 후 복사

jQuery 函数的各个方面

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() 的快捷方式 */})

下面的代码示例详细介绍了这些用法。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  jQuery(function($){ // Pass jQuery a function
      // Pass jQuery a string of HTML
      $('<p></p>').appendTo('body');
      // Pass jQuery an element reference
      $(document.createElement('a')).text('jQuery').appendTo('p');
      // Pass jQuery a CSS expression
      $('a:first').attr('href', '//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2');
      // Pass jQuery a DOM reference
      $(document.anchors[0]).attr('jQuery');
  }); </script>
</body>
</html>

로그인 후 복사

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <a id="link1">jQuery.com</a>
    <a id="link2">jQuery.com</a>
    <a id="link3">jQuery.com</a>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($)
    {
      $('a').mouseenter(
          function () { alert(this.id); });
    })(jQuery);
    </script>
</body>
</html>

로그인 후 복사

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

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

所以代替这个：

// Access the ID attribute of the DOM element.
alert(this.id);

로그인 후 복사

我们本来可以这样做：

// Wrap the DOM element with a jQuery object,
// and then use attr() to access ID value.
alert($(this).attr('id'));

로그인 후 복사

这是可能的，因为 jQuery 函数不仅接受选择器表达式，还接受对 DOM 元素的引用。在代码中，this 是对 DOM 元素的引用。

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

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

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

<!DOCTYPE html>
<html lang="en">
<body><a id="link1">jQuery.com</a> <a id="link2">jQuery.com</a> <a id="link3">jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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); </script>
</body>
</html>

로그인 후 복사

如果您要在浏览器中加载 HTML，浏览器将针对页面中每个 <a> 元素的 id 值发出警报。由于页面中有三个 <a> 元素，因此您可以通过 each() 方法和三个警报窗口获得三次迭代。

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <a>jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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', '//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2');
   })(jQuery);
    </script>
</body>
</html>

로그인 후 복사

如所示，jQuery 提供了方便的 get() 方法来访问包装器集中特定索引处的 DOM 元素。

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

这段代码：

$('a').get(0).title ='jQuery.com';

로그인 후 복사

可能会变成这样：

$('a')[0].title ='jQuery.com';

로그인 후 복사

两者都允许访问实际的 DOM 元素。就我个人而言，我更喜欢方括号表示法。它速度更快，因为它使用本机 JavaScript 从数组中检索元素，而不是将其传递给方法。

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <a href="//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2" title="anchor1">jQuery.com</a>
    <a href="//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2" title="anchor2">jQuery.com</a>
    <a href="//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2" title="anchor3">jQuery.com</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      var arrayOfAnchors = $('a').get(); // Create native array from wrapper set
      alert(arrayOfAnchors[2].title); // Alerts the third link
        })
      (jQuery);
    </script>
</body>
</html>

로그인 후 복사

注意：使用 get() 将结束 jQuery 的链接。它将获取包装器集并将其更改为不再使用 jQuery 功能包装的简单 DOM 元素数组。因此，使用 .end() 方法无法恢复 .get() 之后的链接。

检查包装器集是否为空

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

<!DOCTYPE html>
<html lang="en">
<body>
    <a>jQuery</a>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        if (jQuery('a').get(0)) { // Is there an element in the set?
            jQuery('a').attr('href', '//m.sbmmt.com/link/51ef70624ca791283ec434a52da0d4e2');
        }
        if (jQuery('a').length) { // Check the length of the set. Can also use .size()
            jQuery('a').attr('title', 'jQuery');
        }  </script>
</body>
</html>

로그인 후 복사

事情的真相是上面的 if 语句并不是完全必要的，因为如果没有找到元素，jQuery 将默默地失败。但是，链接到任何空包装器集的每个方法仍然会被调用。因此，虽然我们实际上可以放弃使用 if 语句，但使用它们可能是一个很好的经验法则。在空包装器集上调用方法可能会导致不必要的处理，如果方法返回包装器集以外的值，并且对这些值进行操作，则可能会导致不良结果。

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

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <div>Syncfusion., Inc.</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        var Syncfusion = jQuery.noConflict();
        // Do something with jQuery methods
        alert(Syncfusion("div").text());
    </script>
</body>
</html>

로그인 후 복사

注释：通过向 noConflict() 函数传递一个布尔值 true，您可以完全撤消 jQuery 在网页中引入的内容。这应该只在极端情况下使用，因为它很可能会导致 jQuery 插件出现问题。

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <div></div>
    <div></div>
    <div></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('div').text('I am a div');
  })(jQuery);
    </script>
</body>
</html>

로그인 후 복사

这被认为是隐式迭代，因为 jQuery 代码假设您想要操作所有三个元素，这需要迭代所选元素并使用文本“I am a div”设置每个 <div> 的文本节点值”。默认情况下执行此操作时，称为隐式迭代。

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="div1">I am a div</div>
    <div id="div2">I am a div</div>
    <div id="div3">I am a div</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){
      // Alerts attribute value for first element in wrapper set
      alert($('div').attr('id')); // Alerts "div1"
  })(jQuery); </script>
</body>
</html>

로그인 후 복사

为了演示，假设您的目标实际上是获取页面上每个元素的 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');

로그인 후 복사

这似乎有点冗长，不是吗？如果我们可以循环包装器集并简单地从每个 <div> 元素中提取 id 属性值，不是很好吗？通过使用 $().each() 方法，当我们的包装器集需要显式迭代来处理多个元素时，我们会调用另一轮迭代。

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

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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);

    </script>
</body>
</html>

로그인 후 복사

想象一下您面前的可能性，您可以随时强制执行迭代。

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

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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);
    </script>
</body>
</html>

로그인 후 복사

确定 jQuery 函数使用的上下文

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <div>
        <div>
            <div id="context"><a href="#">jQuery</a>         </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <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); </script>
</body>
</html>

로그인 후 복사

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

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

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      jQuery('<ul></ul>')
          .append('<li><a>jQuery.com</a></li><li><a>jQuery Documentation</a></li>')
          .find('a:first')
          .attr('href', '//m.sbmmt.com/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); </script>
</body>
</html>

로그인 후 복사

您需要从前面的示例中学到的概念是，jQuery 可用于制作和操作复杂的 DOM 结构。仅使用 jQuery 方法，您就可以创建您可能需要的大多数 DOM 结构。

위 내용은 jQuery를 간단하게 마스터하기: 핵심 jQuery의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!