Menguasai jQuery Secara Mudah: Teras jQuery-tutorial js-php.cn

Konsep asas di sebalik jQuery

Walaupun terdapat beberapa variasi konsep dalam API jQuery (seperti fungsi seperti $.ajax), konsep utama di sebalik jQuery ialah "cari sesuatu, lakukan sesuatu". Lebih khusus, pilih elemen DOM daripada dokumen HTML dan kemudian gunakan kaedah jQuery untuk melaksanakan operasi tertentu padanya. Ini adalah konsep gambaran besar. $.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>

Salin selepas log masuk

请注意，在此 HTML 文档中，我们使用 jQuery 来选择 DOM 元素 (<a>)。选择某些内容后，我们然后通过调用 jQuery 方法 text()、attr() 和 appendTo() 来对选择执行一些操作。

text 方法在包装的 <a> 元素上调用，并将该元素的显示文本设置为“jQuery”。 attr 调用将 href 属性设置为 jQuery 网站。

领会“找到某事，做某事”的基本概念对于 jQuery 开发人员的进步至关重要。

概念、概念背后、jQuery 背后

虽然选择某事和做某事是 jQuery 背后的核心概念，但我想扩展这个概念以包括创建一些东西。因此，jQuery 背后的概念可以扩展到包括首先创建新的东西，选择它，然后用它做一些事情。我们可以称之为 jQuery 背后的概念、概念背后的概念。

我想要说明的是，您不会只选择 DOM 中已有的内容。对于 grok 来说，另外一点很重要，那就是 jQuery 可用于创建新的 DOM 元素，然后对这些元素执行某些操作。

在下面的代码示例中，我们创建一个不在 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>

Salin selepas log masuk

这里要掌握的关键概念是，我们正在动态创建 <a> 元素，然后对其进行操作，就像它已经在 DOM 中一样。

jQuery 需要 HTML 才能在标准模式或接近标准模式下运行

当浏览器以怪异模式呈现 HTML 页面时，存在 jQuery 方法无法正常工作的已知问题。确保当您使用 jQuery 时，浏览器通过使用有效的文档类型以标准模式或几乎标准模式解释 HTML。

为了确保正确的功能，本书中的代码示例使用 HTML 5 文档类型。

<!DOCTYPE html>

Salin selepas log masuk

等待 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
            });
        
    

    <body></body>

Salin selepas log masuk

请记住，您可以根据需要将任意数量的 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!'); });
        
    

    <body></body>

Salin selepas log masuk

在包含 jQuery 之前包含所有 CSS 文件

从 jQuery 1.3 开始，该库不再保证在触发自定义 ready() 事件之前加载所有 CSS 文件。由于 jQuery 1.3 中的这一更改，您应该始终在任何 jQuery 代码之前包含所有 CSS 文件。这将确保浏览器在转向 HTML 文档中稍后包含的 JavaScript 之前已解析 CSS。当然，当浏览器解析 JavaScript 时，通过 CSS 引用的图像可能会也可能不会下载。

使用 jQuery 的托管版本

将 jQuery 嵌入网页时，大多数人选择下载源代码并从个人域/主机链接到它。但是，还有其他选项需要其他人为您托管 jQuery 代码。

Google 托管了多个版本的 jQuery 源代码，目的是供任何人使用。这实际上非常方便。在下面的代码示例中，我使用 <script>

🎜 🎜Untuk memahami konsep ini secara mendalam, pertimbangkan kod di bawah. 🎜

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Salin selepas log masuk

🎜Sila ambil perhatian bahawa dalam dokumen HTML ini kami menggunakan jQuery untuk memilih elemen DOM (<a>). Selepas memilih sesuatu, kami kemudian melakukan beberapa operasi pada pemilihan dengan memanggil kaedah jQuery text(), attr() dan appendTo() . 🎜 Kaedah 🎜text dipanggil pada elemen <a> yang dibalut dan menetapkan teks paparan elemen kepada "jQuery". Panggilan attr menetapkan atribut href ke tapak web jQuery. 🎜 🎜Memahami konsep asas "cari sesuatu, lakukan sesuatu" adalah penting untuk maju sebagai pembangun jQuery. 🎜

🎜Konsep, di sebalik konsep, di sebalik jQuery🎜 🎜Walaupun memilih sesuatu dan melakukan sesuatu adalah konsep teras di sebalik jQuery, saya ingin mengembangkan konsep ini termasuk mencipta sesuatu. Oleh itu, konsep di sebalik jQuery boleh dikembangkan untuk memasukkan mula-mula mencipta sesuatu yang baharu, memilihnya, dan kemudian melakukan sesuatu dengannya. Kita boleh memanggilnya konsep di sebalik jQuery, konsep di sebalik konsep itu. 🎜 🎜Perkara yang saya ingin nyatakan ialah anda tidak hanya memilih perkara yang sudah ada dalam DOM. Satu lagi perkara penting tentang grok ialah jQuery boleh digunakan untuk mencipta elemen DOM baharu dan kemudian melaksanakan operasi tertentu pada elemen tersebut. 🎜 🎜Dalam contoh kod di bawah, kami mencipta elemen <a> baharu yang tiada dalam DOM. Setelah dibuat, ia dipilih dan diambil tindakan. 🎜

<!DOCTYPE html>


    <p>
        Hi, I'm the DOM! Script away!
    
    <script> alert(jQuery('p').text()); 
</body>

Salin selepas log masuk

🎜Konsep utama untuk difahami di sini ialah kami mencipta elemen <a> secara dinamik dan kemudian memanipulasinya seolah-olah ia sudah berada dalam DOM. 🎜

🎜jQuery memerlukan HTML untuk dijalankan dalam mod standard atau berhampiran mod standard🎜 🎜Terdapat isu yang diketahui dengan kaedah jQuery tidak berfungsi dengan betul apabila penyemak imbas memaparkan halaman HTML dalam mod pelik. Pastikan bahawa apabila anda menggunakan jQuery, penyemak imbas mentafsir HTML dalam mod standard atau mod hampir standard dengan menggunakan jenis dokumen yang sah. 🎜 🎜Untuk memastikan kefungsian yang betul, contoh kod dalam buku ini menggunakan jenis dokumen HTML 5. 🎜

<!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>

Salin selepas log masuk

🎜Menunggu DOM siap🎜 🎜Apabila DOM dimuatkan dan tersedia untuk manipulasi, jQuery melancarkan acara tersuai yang dipanggil ready. Kod yang memanipulasi DOM boleh dijalankan dalam pengendali acara ini. Ini adalah corak biasa dalam penggunaan jQuery. 🎜 🎜Contoh berikut menunjukkan tiga contoh pengekodan acara tersuai ini sedang digunakan. 🎜

<!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>

Salin selepas log masuk

🎜Ingat bahawa anda boleh melampirkan seberapa banyak acara ready() pada dokumen yang anda perlukan. Anda tidak terhad kepada satu sahaja. Ia dilaksanakan mengikut susunan ia ditambah. 🎜

🎜Laksanakan kod jQuery apabila tetingkap penyemak imbas dimuatkan sepenuhnya🎜 🎜Biasanya, kami tidak mahu menunggu acara window.onload. Inilah gunanya menggunakan acara tersuai seperti ready() yang akan melaksanakan kod sebelum tetingkap dimuatkan dan selepas DOM sedia untuk dilalui dan dimanipulasi. 🎜 🎜Namun, kadangkala kita memang mahu menunggu. Walaupun acara ready() tersuai bagus untuk melaksanakan kod selepas DOM tersedia, kami juga boleh menggunakan jQuery untuk melaksanakan kod selepas keseluruhan halaman web dimuatkan sepenuhnya, termasuk semua sumber. 🎜 🎜Ini boleh dilakukan dengan melampirkan pengendali acara beban pada objek window. jQuery menyediakan kaedah acara load() yang boleh digunakan untuk memanggil fungsi selepas tetingkap dimuatkan sepenuhnya. Di bawah, saya telah memberikan contoh penggunaan kaedah acara load(). 🎜

<!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>

Salin selepas log masuk

🎜Sertakan semua fail CSS sebelum menyertakan jQuery🎜 🎜Bermula dengan jQuery 1.3, pustaka tidak lagi menjamin bahawa semua fail CSS dimuatkan sebelum acara ready() tersuai dicetuskan. Disebabkan oleh perubahan dalam jQuery 1.3 ini, anda harus sentiasa memasukkan semua fail CSS sebelum sebarang kod jQuery. Ini akan memastikan bahawa penyemak imbas telah menghuraikan CSS sebelum mengubah hala ke JavaScript yang terkandung kemudian dalam dokumen HTML. Sudah tentu, imej yang dirujuk melalui CSS boleh dimuat turun atau tidak apabila penyemak imbas menghuraikan JavaScript. 🎜

🎜Gunakan versi jQuery yang dihoskan🎜 🎜Apabila membenamkan jQuery ke dalam halaman web, kebanyakan orang memilih untuk memuat turun kod sumber dan memautkannya daripada domain/hos peribadi. Walau bagaimanapun, terdapat pilihan lain yang memerlukan orang lain untuk mengehoskan kod jQuery untuk anda. 🎜 🎜Google mengehos berbilang versi kod sumber jQuery yang bertujuan untuk digunakan oleh sesiapa sahaja. Ini sebenarnya sangat mudah. Dalam contoh kod di bawah, saya menggunakan elemen <script> untuk menyertakan versi mini jQuery yang dihoskan oleh Google. 🎜

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Salin selepas log masuk

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>


    <p>
        Hi, I'm the DOM! Script away!
    
    <script> alert(jQuery('p').text()); 
</body>

Salin selepas log masuk

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

摸索 jQuery 链接

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

您应该始终尝试通过利用链接来重用包装集。在下面的代码中，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>

Salin selepas log masuk

用破坏性方法打破链条

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

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

<!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>

Salin selepas log masuk

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

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

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

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

但是，一旦原始包装集被更改，链接的乐趣就不必停止。使用 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>

Salin selepas log masuk

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>


    
    <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>

Salin selepas log masuk

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

将事件附加到包装器集中包含的 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>

Salin selepas log masuk

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

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

所以代替这个：

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

Salin selepas log masuk

我们本来可以这样做：

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

Salin selepas log masuk

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

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

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

基于上一示例中的标记，我们可以选择页面中的所有 <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>

Salin selepas log masuk

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

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

仅仅因为您将 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>

Salin selepas log masuk

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

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

这段代码：

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

Salin selepas log masuk

可能会变成这样：

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

Salin selepas log masuk

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

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

为了演示，我们使用 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>

Salin selepas log masuk

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

检查包装器集是否为空

在开始操作包装器集之前，检查您是否确实选择了某些内容是合乎逻辑的。最简单的解决方案是使用 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>

Salin selepas log masuk

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

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

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

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

<!DOCTYPE html>


    <div>Syncfusion., Inc.

Salin selepas log masuk

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Menguasai jQuery Secara Mudah: Teras jQuery

Konsep asas di sebalik jQuery

概念、概念背后、jQuery 背后

jQuery 需要 HTML 才能在标准模式或接近标准模式下运行

等待 DOM 准备就绪

浏览器窗口完全加载时执行 jQuery 代码

在包含 jQuery 之前包含所有 CSS 文件

使用 jQuery 的托管版本

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

摸索 jQuery 链接

用破坏性方法打破链条

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

jQuery 函数的各个方面

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

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

检查包装器集是否为空

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

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

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

h1

h2

h3

确定 jQuery 函数使用的上下文

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