Que utiliser lors du chargement d'une page jquery à l'aide d'un événement de sélection

jQuery est une bibliothèque JavaScript très populaire dans le développement front-end, qui peut manipuler rapidement et facilement des documents HTML et des styles CSS. Dans jQuery, les sélecteurs sont une fonction très importante et couramment utilisée, grâce à laquelle vous pouvez sélectionner des éléments sur la page puis les utiliser.

jQuery fournit une variété de sélecteurs qui peuvent sélectionner des éléments en fonction de leurs noms de balises, noms de classe, valeurs d'ID, valeurs d'attribut, etc. Lorsque la page se charge, nous effectuons généralement un traitement spécial sur certains éléments, comme afficher ou masquer certains éléments, ou lier des événements.

Dans ce cas, vous pouvez utiliser le sélecteur et la liaison d'événement de jQuery. Voici quelques événements et sélecteurs couramment utilisés.

1. Événement d'achèvement du chargement de la page

Dans jQuery, l'événement d'achèvement du chargement de la page peut être lié à l'aide de la méthode ready(), qui sera exécutée immédiatement après le chargement du DOM. L'exemple de code est le suivant :

$(document).ready(function() {
  // 页面加载完成后执行的代码
});

De plus, comme ready() est couramment utilisé, jQuery fournit également un formulaire abrégé :

$(function() {
  // 页面加载完成后执行的代码
});

Ces deux formulaires sont complètement équivalents et peuvent tous deux effectuer certaines opérations après le chargement de la page.

2. Sélecteur

1. Sélecteur de base

Le sélecteur de base est la forme de sélecteur la plus simple. Il peut sélectionner des éléments en fonction de leur nom de balise, de leur nom de classe et de leur valeur d'identification.

Sélectionnez les éléments en fonction des noms de balises :

$('p') // 选择所有<p>元素

Sélectionnez les éléments en fonction des noms de classe :

$('.my-class') // 选择所有class属性值为my-class的元素

Sélectionnez les éléments en fonction des valeurs d'ID :

$('#my-id') // 选择ID值为my-id的元素

2. Sélecteur d'attribut

Les sélecteurs d'attribut peuvent sélectionner des éléments en fonction de leurs valeurs d'attribut, où Les plus couramment utilisés sont [class^="xxx"] et [class$="xxx"].

Sélectionnez les éléments en fonction du nom de l'attribut et de la valeur de l'attribut :

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

Sélectionnez les éléments en fonction du début de la valeur de l'attribut :

$('div[class^="my-"]') // 选择class属性值以my-开头的所有div元素

Sélectionnez les éléments en fonction de la fin de la valeur de l'attribut :

$('a[href$=".pdf"]') // 选择href属性值以.pdf结尾的所有a元素

3. Le sélecteur hiérarchique peut sélectionner un élément, des éléments enfants, des éléments parents, des éléments frères, etc.

Sélectionnez les éléments enfants d'un élément :

$('ul li') // 选择所有ul元素下的li元素

Sélectionnez l'élément parent d'un élément :

$('li').parent() // 选择所有li元素的父元素

Sélectionnez les éléments frères d'un élément :

$('li').siblings() // 选择所有li元素的兄弟元素（不包括自己）

4. Sélecteur de formulaire

Le sélecteur de formulaire peut sélectionner des éléments de formulaire, notamment zones de texte, cases à cocher, boutons radio, zones déroulantes, etc.

Sélectionnez tous les éléments de la zone de texte :

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

Sélectionnez tous les éléments de la case à cocher :

$('input[type="checkbox"]') // 选择所有type属性值为checkbox的input元素

Sélectionnez tous les éléments des boutons radio :

$('input[type="radio"]') // 选择所有type属性值为radio的input元素

Sélectionnez tous les éléments de la liste déroulante :

$('select') // 选择所有select元素

3. Liaison d'événement

1. Événement en un seul clic

L'événement Click est l'un des événements les plus couramment utilisés et peut être lié via la méthode click(). L'exemple de code est le suivant :

$('button').click(function() {
  // 单击了button按钮后执行的代码
});

2. Événement de double-clic

L'événement de double-clic fait référence à l'événement de clic deux fois rapide sur un élément, qui peut être lié via la méthode dblclick(). L'exemple de code est le suivant :

$('button').dblclick(function() {
  // 双击了button按钮后执行的代码
});

3. Événements de clavier

Les événements de clavier font référence à des événements lorsqu'une touche du clavier est enfoncée ou relâchée sur la page et peuvent être liés via trois méthodes : keypress(), keydown() et keyup().

4. Événements de souris

Les événements de souris font référence aux événements lorsque la souris se déplace sur la page, clique, double-clique, appuie, relâche, etc. Cela peut être fait via mousemove(), mousedown(), mouseup(), mouseenter() , mouseleave(), hover() et autres méthodes de liaison.

5. Événement de défilement de page

L'événement de défilement fait référence à un événement déclenché lorsque l'utilisateur fait défiler la page, qui peut être lié via la méthode scroll().

Ci-dessus sont quelques événements et sélecteurs couramment utilisés, qui peuvent nous aider à localiser rapidement des éléments sur la page et à effectuer la liaison d'événements. Bien entendu, jQuery propose également de nombreuses autres fonctions et méthodes, et les lecteurs intéressés peuvent apprendre et explorer par eux-mêmes.

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!