Maison > Article > interface Web > Maîtriser jQuery de manière simple : Core jQuery
Maîtriser jQuery de manière simple : Core jQuery
- 王林original
- 2023-09-04 19:49:07968parcourir
Concepts de base derrière jQuery
Bien qu'il existe quelques variations conceptuelles dans l'API jQuery (telles que des fonctions comme $.ajax), le concept central derrière jQuery est « trouver quelque chose, faire quelque chose ». Plus précisément, sélectionnez des éléments DOM dans un document HTML, puis utilisez les méthodes jQuery pour effectuer certaines opérations sur eux. C’est le concept global.
Pour comprendre ce concept en profondeur, considérez le code ci-dessous.
<!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>
Veuillez noter que dans ce document HTML, nous utilisons jQuery pour sélectionner des éléments DOM (<a></a>)。选择某些内容后，我们然后通过调用 jQuery 方法 text()、attr() 和 appendTo() pour effectuer certaines opérations sur la sélection.
text 方法在包装的 <a></a> 元素上调用，并将该元素的显示文本设置为“jQuery”。 attr 调用将 href Propriété définie sur le site Web jQuery.
Comprendre le concept de base « trouver quelque chose, faire quelque chose » est essentiel pour progresser en tant que développeur jQuery.
Concept, derrière le concept, derrière jQuery
Bien que sélectionner quelque chose et faire quelque chose soient les concepts fondamentaux de jQuery, je voulais étendre ce concept pour inclure la création de quelque chose. Par conséquent, les concepts derrière jQuery peuvent être étendus pour inclure d’abord la création de quelque chose de nouveau, sa sélection, puis l’utilisation de quelque chose. Nous pouvons l'appeler le concept derrière jQuery, le concept derrière le concept.
Le point que je veux souligner est que vous ne vous contentez pas de sélectionner ce qui est déjà dans le DOM. Un autre point important à propos de grok est que jQuery peut être utilisé pour créer de nouveaux éléments DOM, puis effectuer certaines opérations sur ces éléments.
Dans l'exemple de code ci-dessous, nous créons un nouvel élément <a></a> qui n'est pas dans le DOM. Une fois créé, il est sélectionné et mis en œuvre.
<!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>
Le concept clé à comprendre ici est que nous créons dynamiquement l'élément <a></a> puis le manipulons comme s'il était déjà dans le DOM.
jQuery nécessite que HTML s'exécute en mode standards ou en mode proche des standards
Il existe un problème connu avec les méthodes jQuery qui ne fonctionnent pas correctement lorsque le navigateur affiche les pages HTML en mode étrange. Assurez-vous que lorsque vous utilisez jQuery, le navigateur interprète le HTML en mode standards ou presque en mode standards en utilisant un type de document valide.
Pour garantir une fonctionnalité correcte, les exemples de code de ce livre utilisent le type de document HTML 5.
<!DOCTYPE html>
En attendant que le DOM soit prêt
Lorsque le DOM est chargé et disponible pour la manipulation, jQuery déclenche un événement personnalisé nommé ready. Le code qui manipule le DOM peut être exécuté dans le gestionnaire de cet événement. Il s'agit d'un modèle courant dans l'utilisation de jQuery.
Les exemples suivants montrent trois exemples de codage de cet événement personnalisé utilisé.
<!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>
N'oubliez pas que vous pouvez joindre autant d'événements ready() à votre document que vous le souhaitez. Vous n'êtes pas limité à un seul. Ils sont exécutés dans l'ordre dans lequel ils sont ajoutés.
Exécutez le code jQuery lorsque la fenêtre du navigateur est entièrement chargée
Normalement, nous ne voulons pas attendre l'événement window.onload. C'est l'intérêt d'utiliser un événement personnalisé comme window.onload 事件。这就是使用像 ready() qui exécutera le code avant le chargement de la fenêtre et une fois que le DOM sera prêt à être parcouru et manipulé.
Cependant, nous avons parfois envie d’attendre. Bien que les événements ready() personnalisés soient parfaits pour exécuter du code une fois le DOM disponible, nous pouvons également utiliser jQuery pour exécuter du code une fois que la page Web entière, y compris toutes les ressources, est entièrement chargée.
Cela peut être fait en attachant le gestionnaire d'événements de chargement à l'exemple d'utilisation window 对象来完成。 jQuery 提供了 load() 事件方法，可用于在窗口完全加载后调用函数。下面，我提供了 load() de la méthode événement.
<!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>
Inclure tous les fichiers CSS avant d'inclure jQuery
À partir de jQuery 1.3, la bibliothèque ne garantit plus que tous les fichiers CSS sont chargés avant le déclenchement de l'événement personnalisé ready(). En raison de ce changement dans jQuery 1.3, vous devez toujours inclure tous les fichiers CSS avant tout code jQuery. Cela garantira que le navigateur a analysé le CSS avant de le rediriger vers le JavaScript contenu plus tard dans le document HTML. Bien entendu, les images référencées via CSS peuvent ou non être téléchargées lorsque le navigateur analyse le JavaScript.
Utilisez la version hébergée de jQuery
Lors de l'intégration de jQuery dans une page Web, la plupart des gens choisissent de télécharger le code source et d'y créer un lien à partir d'un domaine/hôte personnel. Cependant, il existe d'autres options qui nécessitent que quelqu'un d'autre héberge le code jQuery pour vous.
Google héberge plusieurs versions du code source de jQuery destinées à tous. C'est en fait très pratique. Dans l'exemple de code ci-dessous, j'utilise l'élément <script></script> pour inclure une version minifiée de jQuery hébergée par 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 文档中的
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!