<p>
$.ajax などの関数など)、jQuery の背後にある中心的な概念は「何かを見つけて何かをする」です。具体的には、HTML ドキュメントから DOM 要素を選択し、jQuery メソッドを使用してそれらに対して特定の操作を実行します。これが全体像の概念です。
<p>
<p>この概念を深く理解するには、次のコードを検討してください。
リーリー
<p>この HTML ドキュメントでは、jQuery を使用して DOM 要素を選択していることに注意してください (<a></a>)。何かを選択した後、jQuery メソッド text()、attr()、および appendTo() を呼び出して、選択内容に対していくつかのアクションを実行します。
<p>text メソッドは、ラップされた <a></a> 要素で呼び出され、要素の表示テキストを「jQuery」に設定します。 attr href 属性を jQuery サイトに設定するために呼び出されます。
<p>「何かを見つけて何かをする」という基本概念を理解することは、jQuery 開発者として進歩するために重要です。
<a></a> 要素を作成します。作成されると、選択されて実行されます。
リーリー
<p>ここで理解すべき重要な概念は、<a></a> 要素を動的に作成し、それがすでに DOM 内にあるかのように操作しているということです。
ready という名前のカスタム イベントをトリガーします。 DOM を操作するコードは、このイベントのハンドラーで実行できます。これは、jQuery の使用における一般的なパターンです。
<p>次の例は、使用中のこのカスタム イベントの 3 つのコーディング例を示しています。
リーリー
<p>ready() イベントは必要なだけドキュメントに添付できることに注意してください。 1 つだけに限定されるわけではありません。これらは追加された順に実行されます。
window.onload イベントを待ちたくありません。これは、ウィンドウが読み込まれる前、DOM を走査して操作する準備ができた後にコードを実行する ready() のようなカスタム イベントを使用することのポイントです。
<p>しかし、時には待ちたいこともあります。カスタム ready() イベントは、DOM が利用可能になった後にコードを実行するのに最適ですが、jQuery を使用して、すべてのリソースを含む Web ページ全体が完全に読み込まれた後にコードを実行することもできます。
<p> これは、load イベント ハンドラーを window オブジェクトにアタッチすることで実行できます。 jQuery は、ウィンドウが完全に読み込まれた後に関数を呼び出すために使用できる load() イベント メソッドを提供します。以下に、load() イベント メソッドの使用例を示します。
リーリー
ready() イベントが発生する前にすべての CSS ファイルが読み込まれることを保証しなくなりました。 jQuery 1.3 でのこの変更により、jQuery コードの前に常にすべての CSS ファイルを含める必要があります。これにより、HTML ドキュメントに後から含まれる JavaScript にリダイレクトする前に、ブラウザーが CSS を解析したことが保証されます。もちろん、CSS 経由で参照される画像は、ブラウザーが JavaScript を解析するときにダウンロードされる場合とダウンロードされない場合があります。
<script></script> 要素を使用して、Google がホストする jQuery の縮小バージョンを含めます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
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>
<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> 放在 <p> 元素之前，它将在浏览器加载 <p> 元素之前执行。这将导致 jQuery 假定文档不包含任何 <p> 元素。但是，如果我使用 jQuery 自定义 ready() 事件，那么 jQuery 在 DOM 准备好之前不会执行代码。但是，当我们可以控制文档中 <script> 元素的位置时，为什么要这样做呢？将 jQuery 代码放在页面底部可以避免使用 ready() 事件。事实上，将所有 JavaScript 代码放在页面底部是一种经过验证的性能策略。
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', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2/') // Sets the href attribute and then returns $('a')
.addClass('jQuery'); // Sets class and then returns $('a')
})(jQuery) </script>
</body>
</html>
text() 之类的方法在用于设置元素的文本节点时可以链接起来。然而， text() 在用于获取元素中包含的文本节点时实际上破坏了链条。
<p>在下面的示例中，text() 用于设置然后获取 <p> 元素中包含的文本。
<!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 包装器集。
<p>如果 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 <li>');
})(jQuery); </script>
</body>
</html>
jQuery('p > a')或jQuery(':first')和 jQuery(document.body)
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', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
// Pass jQuery a DOM reference
$(document.anchors[0]).attr('jQuery');
}); </script>
</body>
</html>
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 属性值来提醒鼠标悬停在哪个元素上。
<p>在前面的示例中，还可以获取 this 引用并将其传递给 jQuery 函数，以便使用 jQuery 功能包装 DOM 元素。
<p>所以代替这个：
// 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'));
this 是对 DOM 元素的引用。
<p>您可能想要将 jQuery 功能包装在 DOM 元素周围的原因应该是显而易见的。这样做使您能够在需要时使用 jQuery 链接。
<p>迭代 jQuery 包装器集中包含的一组元素与我们刚刚讨论的概念有些相似。通过使用 jQuery each() 方法，我们可以迭代包装集中包含的每个 DOM 元素。这允许通过使用 this 关键字单独访问每个 DOM 元素。
<p>基于上一示例中的标记，我们可以选择页面中的所有 <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>
<a> 元素的 id 值发出警报。由于页面中有三个 <a> 元素，因此您可以通过 each() 方法和三个警报窗口获得三次迭代。
<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', 'https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2');
})(jQuery);
</script>
</body>
</html>
get() 方法来访问包装器集中特定索引处的 DOM 元素。
<p>但是这里还有另一种选择。您可以通过简单地在 jQuery 对象本身上使用方括号数组表示法来避免使用 get() 方法。在我们之前的代码示例的上下文中：
<p>这段代码：
$('a').get(0).title ='jQuery.com';
$('a')[0].title ='jQuery.com';
get() 方法提供了一个巧妙的解决方案，用于将所有 DOM 元素放入本机数组中。只需调用 get() 方法而不向其传递索引参数，该方法将返回本机 JavaScript 数组中包装器集中的所有 DOM 元素。
<p>为了演示，我们使用 get() 进行测试。在下面的代码中，我将所有 <a> 元素放入一个数组中。然后，我使用该数组访问页面上第三个 <a> DOM 对象的 title 属性。
<!DOCTYPE html>
<html lang="en">
<body>
<a href="https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2" title="anchor1">jQuery.com</a>
<a href="https://www.php.cn/link/51ef70624ca791283ec434a52da0d4e2" title="anchor2">jQuery.com</a>
<a href="https://www.php.cn/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', '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');
} </script>
</body>
</html>
if 语句并不是完全必要的，因为如果没有找到元素，jQuery 将默默地失败。但是，链接到任何空包装器集的每个方法仍然会被调用。因此，虽然我们实际上可以放弃使用 if 语句，但使用它们可能是一个很好的经验法则。在空包装器集上调用方法可能会导致不必要的处理，如果方法返回包装器集以外的值，并且对这些值进行操作，则可能会导致不良结果。
noConflict() 方法，该方法有多种用途，即能够用另一个别名替换 $。这在三个方面很有帮助：它可以放弃对另一个库使用 $ 标志，帮助避免潜在的冲突，并提供为 jQuery 对象自定义名称空间/别名的能力。
<p>例如，假设您正在为 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 插件出现问题。
<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>
<div> 的文本节点值”。默认情况下执行此操作时，称为隐式迭代。
<p>这非常方便。大多数情况下，大多数 jQuery 方法将应用隐式迭代。但是，其他方法仅适用于包装器集中的第一个元素。例如，jQuery 方法 attr() 在用于获取属性值时将仅访问包装器集中的第一个元素。
<p>注意：当使用 attr() 方法设置属性时，jQuery 实际上会应用隐式迭代来将属性及其值设置到包装集中的所有元素。< /p>
<p>在下面的代码中，包装器集包含页面中的所有 <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() 方法，当我们的包装器集需要显式迭代来处理多个元素时，我们会调用另一轮迭代。
<p>在下面的代码示例中，我使用 $().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>
$.each 函数，不要与 $().each 方法混淆，该方法专门用于迭代 jQuery 包装器集。 $.each 方法实际上可用于迭代任何旧的 JavaScript 数组或对象。它本质上是原生 JavaScript 循环的替代品。
<!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>
$('a', document)）。这意味着，如果您没有为 jQuery 函数（例如 jQuery()）提供第二个参数来用作 DOM 查询的上下文，则使用的默认上下文是文档元素，通常称为 <body>.
<p>可以使用 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>
<!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', '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); </script>
</body>
</html>
以上がjQuery をシンプルにマスターする: Core jQueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
