Un tutoriel concis sur l'utilisation de jquery

1. Sélectionnez les éléments de la page Web
La conception de base et l'utilisation principale de jQuery sont de "sélectionner un élément de page Web, puis d'effectuer une opération dessus". C'est la caractéristique fondamentale qui la distingue des autres bibliothèques de fonctions.
La première étape de l'utilisation de jQuery consiste souvent à insérer une expression de sélection dans le constructeur jQuery() (en abrégé $), puis à obtenir l'élément sélectionné.

L'expression de sélection peut être un sélecteur CSS :

Copiez le code Le code est le suivant :

 $(document)//Sélectionnez l'objet document entier 
$('#myId')//Sélectionnez l'élément de page Web avec l'ID myId 
$('div.myClass')//Select l'élément div avec la classe myClass 
$('input[name=first]')//Sélectionnez l'élément input dont l'attribut name est égal à first 

peut également être une expression spécifique à jQuery :

Copier le code Le code est le suivant :

$('a:first')// Sélectionnez le premier élément de la page Web 
$(' tr:odd')//Sélectionnez les lignes impaires du tableau 
$('#myForm :input')//Sélectionnez les éléments d'entrée dans le formulaire 
$('div:visible') //Sélectionnez les éléments div visibles 
$('div:gt(2)')//Sélectionnez tous les éléments div sauf les trois premiers 
$('div:animated ')//Sélectionnez l'élément div actuellement dans un état animé 

2. Modifiez l'ensemble de résultats
Si plusieurs éléments sont sélectionnés, jQuery fournit des filtres pour affiner l'ensemble de résultats :

Copier le code Le code est le suivant :

$('div').has('p '); //Sélectionnez l'élément div contenant l'élément p 
$(' div').not('.myClass'); //Sélectionnez les éléments div dont la classe n'est pas égale à myClass 
$('div ').filter('.myClass'); //Sélectionnez les éléments div dont la classe est égale à myClass 
$('div').first(); //Sélectionnez le 1er élément div 
$('div) ').eq(5); //Sélectionnez le 6ème élément div 

Parfois, nous devons partir de l'ensemble de résultats et passer aux éléments associés proches. jQuery fournit également des méthodes de déplacement sur l'arborescence DOM :

Copier le code Le code est le suivant :

$('div').next('p '); //Sélectionnez le premier élément p après l'élément div 
$('div').parent(); //Sélectionnez l'élément parent de l'élément div 
$('div').closest( 'form'); //Sélectionnez l'élément parent du formulaire le plus proche du div 
$('div').children(); //Sélectionnez tous les éléments enfants du div 
$('div').siblings( ); //Sélectionner les éléments frères de div 

3. Opération en chaîne
Après avoir sélectionné un élément de page Web, vous pouvez y effectuer certaines opérations. jQuery permet de relier toutes les opérations entre elles et d'écrire sous forme de chaîne, comme par exemple :

Copier le codeLe le code est le suivant :

$('div').find('h3').eq(2).html('Hello');

Nous pouvons le déballer comme ça, c'est-à-dire Ce qui suit est le suivant :

Copier le code Le code est le suivant :

$('div')//Trouver l'élément div 
.find('h3')//Sélectionnez l'élément h3 
.eq(2)//Sélectionnez le troisième élément h3 
.html( 'Bonjour'); //Sélectionnez-le Le contenu est modifié en Bonjour 

C'est la fonctionnalité la plus louable et la plus pratique de jQuery. Son principe est que chaque opération jQuery renvoie un objet jQuery, donc différentes opérations peuvent être connectées entre elles.
jQuery fournit également la méthode .end(), qui permet à l'ensemble de résultats de prendre du recul :

Copier le code Le code est le suivant :

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end()/ /Retour à l'étape de sélection de tous les éléments h3
.eq(0)//Sélectionnez le premier élément h3
.html('World');

4. Opérations sur les éléments : acquisition et attribution de valeurs
Lors de l'exploitation d'éléments de page Web, l'exigence la plus courante est d'obtenir leurs valeurs ou de leur attribuer des valeurs.
jQuery utilise la même fonction pour compléter la valeur (getter) et l'affectation (setter). L'obtention ou l'attribution d'une valeur est déterminée par les paramètres de la fonction.
$('h1').html(); //html() n'a pas de paramètres, ce qui signifie retirer la valeur de h1 $('h1').html('Hello' //html()); a le paramètre Bonjour, Indique l'attribution d'une valeur à h1
Les fonctions communes de valeur et d'affectation sont les suivantes :

Copier le code Le code est le suivant :

.html() Obtenez ou définissez le contenu html 
.text() Obtenez ou définissez le contenu du texte 
.attr() Obtenez ou définissez la valeur de un attribut 
.width() Obtenez ou définissez la largeur d'un élément 
.height() Obtenez ou définissez la hauteur d'un élément 
.val() Obtenez la valeur d'un élément de formulaire 

Il est à noter que si l'ensemble de résultats contient plusieurs éléments, donc lors de l'attribution d'une valeur, tous les éléments seront attribués lors de la prise d'une valeur, seule la valeur du premier élément sera retirée (sauf pour .text(), qui supprime le contenu textuel de tous les éléments).
5. Fonctionnement de l'élément : déplacer
Si vous souhaitez déplacer l'élément sélectionné, il existe deux méthodes : l'une consiste à déplacer l'élément directement, l'autre consiste à déplacer d'autres éléments afin que le élément cible Arriver là où nous voulons être.

Supposons que nous sélectionnions un élément div et que nous devions le déplacer derrière l'élément p.

La première méthode consiste à utiliser .insertAfter() pour déplacer l'élément div derrière l'élément p :

Copiez le code Le code est le suivant :

$('div').insertAfter('p');

La deuxième méthode consiste à utiliser .after() pour ajouter l'élément p devant l'élément div :

Copier le code Le code est le suivant :

$('p').after('div' );

En apparence, l'effet de ces deux méthodes est le même, la seule différence semble être la perspective de fonctionnement différente. Mais en fait, ils ont une différence majeure, c’est-à-dire que les éléments renvoyés sont différents. La première méthode renvoie l'élément div et la seconde méthode renvoie l'élément p. Vous pouvez choisir la méthode à utiliser en fonction de vos besoins.

En utilisant ce mode de fonctionnement, il y a quatre paires de

Copiez le code Le code est le suivant :

 
.insertAfter() et .after() : Insérer des éléments par derrière en dehors des éléments existants 
.insertBefore() et .before() : Insérer des éléments par devant en dehors des éléments existants 
 appendTo(). et .append() : insérer des éléments de l'arrière à l'intérieur des éléments existants 
.prependTo() et .prepend() : insérer des éléments de l'avant à l'intérieur des éléments existants 

6. Opérations sur les éléments : copier, supprimer et créer

Copiez les éléments en utilisant .clone().
Pour supprimer des éléments, utilisez .remove() et .detach(). La différence entre les deux est que le premier ne conserve pas l'événement de l'élément supprimé, alors que le second le fait, ce qui est avantageux lors de la réinsertion du document.

Pour effacer le contenu d'un élément (mais pas supprimer l'élément), utilisez .empty().

La méthode de création d'un nouvel élément est très simple, il suffit de passer le nouvel élément directement dans le constructeur jQuery :

Copier le code Le code est le suivant :

$('
Bonjour

');
$('
nouvel élément de liste
');
$('ul').append('
élément de liste
');

7. Méthodes utilitaires
En plus d'opérer sur les éléments sélectionnés, jQuery fournit également des méthodes d'outils (utilitaires) qui peuvent être utilisées directement sans sélectionner l'élément.
Si vous comprenez le principe d'héritage du langage Javascript, vous pouvez alors comprendre l'essence des méthodes outils. Il s'agit d'une méthode définie sur le constructeur jQuery, c'est-à-dire jQuery.method(), elle peut donc être utilisée directement. Ces méthodes pour faire fonctionner les éléments sont des méthodes définies sur l'objet prototype du constructeur, c'est-à-dire jQuery.prototype.method(), donc une instance doit être générée (c'est-à-dire que l'élément est sélectionné) avant utilisation. Si vous ne comprenez pas cette différence, ce ne sera pas un gros problème. Comprenez simplement la méthode outil comme une méthode qui peut être utilisée directement comme une fonction native JavaScript.

Les méthodes d'outils couramment utilisées sont les suivantes :

Copier le code Le code est le suivant :

$.trim() supprime les espaces aux deux extrémités de la chaîne. 
$.each() parcourt un tableau ou un objet. 
$.inArray() renvoie la position d'index d'une valeur dans le tableau. Si la valeur ne figure pas dans le tableau, -1 est renvoyé. 
$.grep() renvoie les éléments du tableau qui répondent à certains critères. 
$.extend() Fusionne plusieurs objets dans le premier objet. 
$.makeArray() Convertit l'objet en tableau. 
$.type() détermine le type d'objet (objet fonction, objet date, objet tableau, objet régulier, etc.). 
$.isArray() détermine si un paramètre est un tableau. 
$.isEmptyObject() détermine si un objet est vide (ne contient aucun attribut). 
$.isFunction() détermine si un paramètre est une fonction. 
$.isPlainObject() détermine si un paramètre est un objet créé avec "{}" ou "new Object". 
$.support() Détermine si le navigateur prend en charge une certaine fonctionnalité. 

8. Opérations sur les événements
jQuery peut lier des événements aux éléments d'une page Web. Selon différents événements, exécutez les fonctions correspondantes.

Copier le code Le code est le suivant :

$('p').click( function() { 
 alert('Hello'); 
});

Actuellement, jQuery prend principalement en charge les événements suivants :

Copier le code Le code est le suivant :

.blur() L'élément de formulaire perd le focus. 
.change() La valeur de l'élément de formulaire change 
.click() Clic de souris 
.dblclick() Double-clic de souris 
.focus() L'élément de formulaire obtient le focus 
. focusin() L'élément enfant prend le focus 
.focusout() L'élément enfant perd le focus 
.hover() En même temps, spécifiez les fonctions de gestionnaire pour les événements mouseenter et mouseleave 
.keydown() Appuyez sur le clavier (appuyez longuement sur la touche, un seul événement est renvoyé) 
.keypress() Appuyez sur le clavier (appuyez longuement sur la touche, plusieurs événements seront renvoyés) 
.keyup() Relâchez le clavier 
. load() L'élément est chargé 
.mousedown() Appuyez sur la souris vers le bas 
.mouseenter() La souris entre (ne se déclenche pas lors de la saisie d'un élément enfant) 
.mouseleave() La souris quitte (ne se déclenche pas lorsque laissant un élément enfant) 
.mousemove() La souris se déplace à l'intérieur de l'élément 
. mouseout() La souris quitte (se déclenche en quittant des éléments enfants) 
.mouseover() La souris entre (se déclenche lors de la saisie d'éléments enfants) 
.mouseup() Libère la souris 
.ready() Le chargement du DOM est terminé 
.resize() La taille de la fenêtre du navigateur change 
.scroll() La position de la barre de défilement change 
 .select() L'utilisateur sélectionne le contenu dans la zone de texte 
.submit() L'utilisateur soumet le formulaire 
.toggle() Exécute plusieurs fonctions en séquence en fonction du nombre de clics de souris 
.unload( ) L'utilisateur quitte la page 

Les événements ci-dessus sont tous des moyens pratiques d'utiliser .bind() dans jQuery. Utilisez .bind() pour contrôler les événements de manière plus flexible, comme lier la même fonction à plusieurs événements :

Copier le code Code comme suit :

$('input').bind('click change', //Lier le clic et modifier les événements en même temps 
 function(){ 
 alert('Bonjour' ) ; 
 } 
);

Si vous souhaitez que l'événement ne s'exécute qu'une seule fois, vous pouvez utiliser la méthode .one().

Copier le code Le code est le suivant :

$("p").one( "click" , function(){ 
alert("Hello"); //Exécuté une seule fois, les clics suivants ne s'exécuteront pas 
});

.unbind() est utilisé pour dissocier le événement.

Copier le code Le code est le suivant :

$('p').unbind( 'click' );

Toutes les fonctions de gestion d'événements peuvent accepter un objet événement comme paramètre, comme e dans l'exemple suivant :

Copier le code Le code est le suivant :

$("p").click(function(e){ 
alert(e.type); //" cliquez sur " 
});

Cet objet événement possède quelques propriétés et méthodes utiles :

Copiez le code Le code est le suivant :

 
event.pageX Lorsque l'événement se produit, la distance horizontale entre la souris et le coin supérieur gauche de la page Web
event.pageY Lorsque l'événement se produit, la distance verticale entre la souris et le coin supérieur gauche de la page Web
event.type Le type d'événement (tel qu'un clic)
event.which Quelle touche a été enfoncée
event.data Lier les données sur l'objet événement, puis transmettre la fonction de gestionnaire d'événements
event.target L'élément web ciblé par l'événement
event.preventDefault() Bloque le comportement par défaut des événements (par exemple, cliquer sur un lien ouvrira automatiquement une nouvelle page) 
event.stopPropagation() arrête les événements du bouillonnement jusqu'aux éléments supérieurs 

Dans la fonction de traitement des événements, vous pouvez utiliser le mot-clé this pour renvoyer l'élément DOM ciblé par l'événement :

Copier le code Le code est le suivant :

$('a').click(function(){ 
if ($(this).attr('href').match('evil ')){// S'il est confirmé qu'il s'agit d'un lien nuisible 
e.preventDefault(); //Empêcher l'ouverture 
$(this).addClass('evil'); //Ajouter une classe nuisible 
} 
}) ;

Il existe deux manières de déclencher automatiquement un événement. L'une consiste à utiliser la fonction d'événement directement et l'autre à utiliser .trigger() ou .triggerHandler().

Copier le code Le code est le suivant :

$('a').click( );
$('a').trigger('click');

9. Effets spéciaux
jQuery permet aux objets de présenter certains effets spéciaux.

$('h1').show(); //Afficher un titre h1
Les effets spéciaux couramment utilisés sont les suivants :

Copier le code Le code est le suivant :

.fadeIn() Fade in
.fadeOut() Fade out
.fadeTo() Ajuster la transparence
. hide() Masquer l'élément
.show() Afficher l'élément 
.slideDown() Développer vers le bas 
.slideUp() Rouler 
.slideToggle() Développer ou enrouler un élément en séquence 
 .toggle() Afficher ou masquer séquentiellement un élément 

À l'exception de .show() et .hide(), le temps d'exécution par défaut de tous les autres effets spéciaux est de 400 ms (millisecondes), mais vous pouvez le modifier ce paramètre.

Copier le code Le code est le suivant :

$('h1').fadeIn( 300); // Fondu entrant en 300 millisecondes 
$('h1').fadeOut('slow'); // Fondu lentement 

Une fois l'effet spécial terminé, vous pouvez spécifier une fonction à exécuter.

Copier le code Le code est le suivant :

$('p').fadeOut( 300, function (){$(this).remove(); });

Des effets spéciaux plus complexes peuvent être personnalisés avec .animate().

Copier le code Le code est le suivant :

$('div').animate( 
 { 
gauche : " =50", // Continuer à avancer vers la droite 
opacité : 0,2 // Spécifier la transparence 
}, 
300, // Durée 
fonction(){ alert (' terminé !'); }//Fonction de rappel 
);

.stop() et .delay() sont utilisés pour arrêter ou retarder l'exécution d'effets spéciaux.
$.fx.off Si défini sur true, tous les effets de page Web seront désactivés.

Un tutoriel concis sur l'utilisation de jquery_jquery