Apprenez les sélecteurs jQuery de base à partir de zéro : démarrez rapidement !

Apprenez les sélecteurs de base jQuery à partir de zéro : démarrez rapidement !

jQuery est une bibliothèque JavaScript facile à apprendre et à utiliser qui simplifie la manipulation et la gestion des événements des documents HTML. Parmi eux, les sélecteurs sont l'une des pierres angulaires de jQuery. Grâce aux sélecteurs, nous pouvons facilement sélectionner des éléments HTML, faire fonctionner le DOM et réaliser des effets interactifs. Cet article présentera les sélecteurs de base de jQuery à partir de zéro pour aider les lecteurs à démarrer rapidement.

Tout d'abord, nous devons introduire la bibliothèque jQuery dans le document HTML. Elle peut être introduite via un lien CDN ou un fichier téléchargé, par exemple :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Une fois la bibliothèque jQuery introduite, nous pouvons commencer à utiliser des sélecteurs. Voici quelques exemples de sélecteurs de base :

Sélecteur de base

1. Sélectionnez l'élément par nom d'élément :

$('div') // 选取所有的<div>元素

2. Sélectionnez l'élément par nom de classe :

$('.classname') // 选取所有类名为classname的元素

3. Sélectionnez l'élément par ID :

$('#id') // 选取ID为id的元素

4. Sélectionnez tous les éléments :

$('*') // 选取所有元素

Sélecteur hiérarchique

1. Sélecteur descendant (sélectionne tous les éléments descendants) :

$('parentElement descendantElement') // 选取parentElement中的所有descendantElement元素

2. Sélecteur d'élément enfant (sélectionne uniquement les enfants directs) :

$('parentElement > childElement') // 选取parentElement中的所有直接子元素childElement

Sélecteur de filtre

1. Premier élément :

$('selector:first') // 选取第一个匹配的元素

Copier après la connexion

Dernier élément :

$('selector:last') // 选取最后一个匹配的元素

Copier après la connexion

Élément de position impaire :

$('selector:odd') // 选取所有奇数位置的元素

Copier après la connexion

Élément de position paire :

$('selector:even') // 选取所有偶数位置的元素

Copier après la connexion

Sélectionner l'élément de la zone de saisie :

$('input[type="text"]') // 选取所有type属性为text的<input>元素

Copier après la connexion

Sélectionner la case sélectionnée :

$('input:checked') // 选取所有被选中的<input>元素

Copier après la connexion
Le ci-dessus ne sont que des exemples d'utilisation de base des sélecteurs jQuery. Grâce à ces exemples, les lecteurs peuvent rapidement commencer à utiliser la fonction de sélection de jQuery. Bien entendu, jQuery fournit également des sélecteurs et des fonctions plus complexes, et les lecteurs peuvent continuer à apprendre et à explorer en profondeur. J'espère que cet article pourra aider les lecteurs à apprendre les sélecteurs de base jQuery à partir de zéro et à utiliser les éléments DOM de manière plus flexible et plus efficace dans le développement Web.

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!