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>
请注意，在此 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> 元素。一旦创建，它就会被选择并进行操作。
<!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>
这里要掌握的关键概念是，我们正在动态创建 <a></a> 元素，然后对其进行操作，就像它已经在 DOM 中一样。
jQuery 需要 HTML 才能在标准模式或接近标准模式下运行
当浏览器以怪异模式呈现 HTML 页面时，存在 jQuery 方法无法正常工作的已知问题。确保当您使用 jQuery 时，浏览器通过使用有效的文档类型以标准模式或几乎标准模式解释 HTML。
为了确保正确的功能，本书中的代码示例使用 HTML 5 文档类型。
<!DOCTYPE html>
等待 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
});
</script>
请记住，您可以根据需要将任意数量的 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!'); });
</script>
在包含 jQuery 之前包含所有 CSS 文件
从 jQuery 1.3 开始，该库不再保证在触发自定义 ready() 事件之前加载所有 CSS 文件。由于 jQuery 1.3 中的这一更改，您应该始终在任何 jQuery 代码之前包含所有 CSS 文件。这将确保浏览器在转向 HTML 文档中稍后包含的 JavaScript 之前已解析 CSS。当然，当浏览器解析 JavaScript 时，通过 CSS 引用的图像可能会也可能不会下载。
使用 jQuery 的托管版本
将 jQuery 嵌入网页时，大多数人选择下载源代码并从个人域/主机链接到它。但是，还有其他选项需要其他人为您托管 jQuery 代码。
Google 托管了多个版本的 jQuery 源代码，目的是供任何人使用。这实际上非常方便。在下面的代码示例中，我使用 <script></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>
🎜Sila ambil perhatian bahawa dalam dokumen HTML ini kami menggunakan jQuery untuk memilih elemen DOM (
<a></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></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></a> baharu yang tiada dalam DOM. Setelah dibuat, ia dipilih dan diambil tindakan. 🎜
<!DOCTYPE html>
Hi, I'm the DOM! Script away!
<script> alert(jQuery('p').text()); </script>
🎜Konsep utama untuk difahami di sini ialah kami mencipta elemen
<a></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></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) </script>
🎜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>
<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>
🎜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); </script>
🎜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></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>
Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。
使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。
不使用 Ready() 解析 DOM 时执行 jQuery 代码
并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。
现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。
为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的
Atas ialah kandungan terperinci Menguasai jQuery Secara Mudah: Teras jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!