Résumé des méthodes courantes jquery et exemples d'utilisation_jquery

mouseover()/mouserout()

Les événements Mouseover/mouseout sont déclenchés lorsque la souris entre/quitte un élément ou ses éléments descendants.
L'événement mouseover est le plus souvent utilisé avec l'événement mouseout.

En raison du mécanisme de bouillonnement, les événements de survol/mouserout sont souvent accidentellement déclenchés lorsqu'ils ne sont pas nécessaires, provoquant des problèmes de script.

mouseenter()/mouseleave()

mouseenter/mouseleave est déclenché lorsque et seulement lorsque la souris entre dans l'élément sélectionné. Il ne sera pas déclenché lorsque la souris passe à travers des éléments enfants. Peu importe que l'élément cible ait des enfants.

focusin() et focusout()

.focusin() : Cet événement est déclenché lorsqu'un élément ou ses sous-éléments reçoivent le focus
.focusout() : Cet événement est déclenché lorsqu'un élément ou ses éléments enfants perdent le focus

Contrairement à la méthode focus(), la méthode focusin() est également déclenchée lorsqu'un élément enfant obtient le focus.

Copier le code Le code est le suivant :

focusin fire

focusin fire

<script><br> $( "p" ).focusin(function() {<br> $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );<br> });<br> </script>

eq() et get()

.get() : obtenez un élément DOM correspondant via l'objet jQuery.
.eq() : Construit un nouvel objet jQuery à partir d'un élément de la collection

eq renvoie un objet jQuery et get renvoie un objet DOM. Par exemple :

$( "li" ).get( 0 ).css("color", "red"); //Erreur
$( "li" ).eq( 0 ).css("color", "red"); //Corriger
Alors, qu’est-ce qu’un objet DOM et qu’est-ce qu’un objet jQuery ?

L'objet DOM est un objet obtenu à l'aide de js, et l'objet juqery est un objet obtenu à l'aide du sélecteur de la bibliothèque de classes jQuery.

Par exemple : var $obj = $("div");//objet jQuery

La méthode get convertit essentiellement l'objet jQuery en objet DOM, mais css appartient au constructeur jQuery, et cette méthode n'existe pas dans le DOM. Si nous devons utiliser la méthode jQuery, nous devons écrire comme ceci :

Copier le code Le code est le suivant :

var li = $("li").get(0);
$(li).css("color","black");//Envelopper avec $

filtre()

Méthode filter() : filtre l'ensemble des éléments qui correspondent à l'expression spécifiée.

Cette méthode est utilisée pour restreindre la portée de la correspondance. Séparez plusieurs expressions par des virgules.

filter(expression) : (String|Function) Si le paramètre est une chaîne, un sélecteur jQuery est formulé pour supprimer tous les éléments qui ne correspondent pas au sélecteur de l'ensemble d'emballage, ne laissant que les éléments qui correspondent à l'élément du sélecteur. ; utilisé pour déterminer les critères de filtre si l'argument est une fonction. Cette fonction est appelée une fois pour chaque élément de l'ensemble d'emballage. Tout élément qui renvoie false lors de l'appel de fonction sera supprimé de l'ensemble d'emballage.

Le code suivant signifie : conserver le premier et l'élément avec la classe sélectionnée

Code HTML :

Copier le code Le code est le suivant :

Bonjour

Bonjour encore

Et encore

Code jQuery :

Copier le code Le code est le suivant :

$("p").filter(".selected, :first")

Résultat :

Copier le code Le code est le suivant :

Bonjour

,

Et encore

Regardez un autre exemple de fonction, une fonction est utilisée comme une collection d'éléments de test. Il accepte un index de paramètre, qui est l'index de l'élément de la collection jQuery. Dans les fonctions, cela fait référence à l'élément DOM actuel.

Code HTML :

Copier le code Le code est le suivant :

1. Bonjour

Code jQuery :

Copier le code Le code est le suivant :

$("p").filter(function(index) {
return $("ol", this).length == 0;
});

Résultat :

Copier le code Le code est le suivant :

Comment vas-tu ?

Méthodes .bind(), .live() et .delegate()

.bind() : le moyen le plus simple de lier les fonctions de gestion d'événements consiste à utiliser la méthode .bind(). C'est la même chose que la méthode live(), acceptant deux paramètres :

.bind(type d'événement, gestionnaire d'événements)

Deux façons de lier les gestionnaires d'événements :

Copier le code Le code est le suivant :

$(document).ready(function(){

$('.mydiv').bind('click',test);

fonction test(){ alert("Bonjour tout le monde !");

>
});

Les gestionnaires d'événements peuvent également utiliser des fonctions anonymes, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

$(document).ready(function(){

          $("#mydiv").bind("click",function(){
alert("Bonjour tout le monde !");
})
});

.live() : La seule différence entre la méthode live et la méthode bind est que .live() agit non seulement sur les éléments existant actuellement dans le DOM, mais agit également sur les éléments qui peuvent exister (générés dynamiquement) dans le DOM. futur

Copier le code Le code est le suivant :

$(document).ready(function(){

           $('.box').live('click',function(){
                $(this).clone().appendTo('.container');
});
});

                                                                                                                      

L'inconvénient de l'utilisation de la méthode live pour lier des événements est qu'elle ne peut pas utiliser d'appels chaînés. Existe-t-il une méthode qui peut non seulement lier des événements comme la méthode live, mais également prendre en charge les appels chaînés ? La réponse est la méthode déléguée ci-dessous.

Méthode delegate() : ajoute un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné),

Et spécifiez les fonctions à exécuter lorsque ces événements se produisent. À partir de jQuery 1.7, .delegate() a été remplacé par la méthode .on().

Syntaxe :

$(selector).delegate(childSelector, type d'événement, fonction)
Description du paramètre :

childSelector requis. Spécifie un ou plusieurs éléments enfants auxquels les gestionnaires d'événements sont attachés.

événement requis. Spécifie un ou plusieurs événements à attacher à l'élément. Plusieurs valeurs d'événement séparées par des espaces. Doit être un événement valide.

fonction requise. Spécifie une fonction à exécuter lorsqu'un événement se produit.

Copier le code Le code est le suivant :

$(document).ready(function(){
           $('.container').delegate('.box','click',function(){
                $(this).clone().appendTo('.container');
});
});

delegate() sera utilisé dans les deux situations suivantes :

1. Si vous avez un élément parent et devez ajouter des événements à ses éléments enfants, vous pouvez utiliser délégué(). Le code est le suivant :

Copier le code Le code est le suivant :

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2. Lorsque l'élément n'est pas disponible dans la page actuelle, vous pouvez utiliser délégué()

Méthode end()

Méthode end() : appelée dans la chaîne de commandes jquery pour revenir à l'ensemble d'empaquetage précédent.
Chaque méthode de filtrage est poussée sur la pile. Lorsque nous devons revenir à l'état précédent, nous pouvons utiliser end() pour effectuer une opération pop afin de revenir à l'état précédent dans la pile.

La méthode

end() termine l'opération de filtrage la plus récente de la chaîne actuelle et restaure l'ensemble des éléments correspondants à son état précédent.

Copier le code Le code est le suivant :

Dans l'exemple de code ci-dessus, nous verrons seulement que la couleur de la police de l'élément 1 a changé, mais la couleur d'arrière-plan n'a pas changé. C'est parce que
L'état précédant la deuxième méthode find() a renvoyé un objet avec une valeur de classe de deux en police rouge. Par conséquent, la deuxième méthode find() recherchera uniquement .two dans

. () modifie le code de l'opération de chaîne comme suit :
Copier le code Le code est le suivant :



La méthode

end() renvoie ici l'état avant d'appeler find(), qui est $('ul.one')

toggleClass()

Méthode `toggleClass() : `Si le nom de classe spécifié n'existe pas dans l'élément, ajoutez le nom de classe spécifié si l'élément a déjà le
spécifié ; nom de classe, supprime le nom de classe spécifié de l'élément.
Méthode css(name,value) : définissez la valeur spécifiée sur l'attribut de style CSS spécifié de chaque élément correspondant

wrap() et wrapInner()

`wrap() et wrapInner() : `Le premier enveloppe tous les éléments correspondants avec les balises structurées des autres éléments
Ce dernier enveloppe le sous-contenu (y compris les nœuds de texte) de chaque élément correspondant avec une structure HTML.
Regardez l'exemple suivant de wrap() :
Utilisez le contenu du div original comme classe du nouveau div et enveloppez chaque élément

Code HTML :

Copier le code Le code est le suivant :




Bonjour


Au revoir





Code jQuery :

Copier le code Le code est le suivant :

$('.inner').wrap(function() {
return '
';
});

Résultat :
Copier le code Le code est le suivant :






Bonjour






Au revoir






Regardez ensuite l'exemple suivant de wrapInner() :
Utilisez le contenu du div original comme classe du nouveau div et enveloppez chaque élément
Code HTML :
Copier le code Le code est le suivant :




Bonjour


Au revoir




Code jQuery :
Copier le code Le code est le suivant :

$('.inner').wrapInner(function() {
return '
';
});

Résultat :
Copier le code Le code est le suivant :






Bonjour






Au revoir






Détacher, vider et supprimer les méthodes
.detach( [selector ] ) : supprime tous les éléments correspondants du DOM. Lorsque vous devez supprimer un élément, puis l'insérer bientôt dans le DOM, vous devez utiliser la méthode detach.
.empty() : Cette méthode supprime non seulement les éléments enfants (et autres éléments descendants), mais supprime également le texte à l'intérieur de l'élément. Parce que, selon les instructions, toute chaîne de texte dans l'élément est considérée comme un nœud enfant de l'élément.
.remove( [selector ] ) : Supprimez l'élément du DOM et supprimez les événements et les données jQuery sur l'élément
Exemple de vide() :
Copier le code Le code est le suivant :




• élément 1


• article 2


• élément 3




Regardez l'exemple Remove() suivant :
Description : Supprimer tous les paragraphes du DOM
Code HTML :
Copier le code Le code est le suivant :


Bonjour
comment allez-vous
?


Code jQuery :
Copier le code Le code est le suivant :

$("p").remove();

Résultat :
comment vont
Méthode val()
val() : récupère la valeur actuelle de l'élément correspondant.
Description : Obtenez la valeur dans la zone de texte
Code jQuery :
Copier le code Le code est le suivant :

$("input").val();

Code jQuery :
Copier le code Le code est le suivant :

$("input").val("bonjour tout le monde !");

chacun() et map()
Méthodes each() et map() : chacune renvoie le tableau d'origine et ne crée pas de nouveau tableau. La méthode map renverra un
nouveau tableau. Si la carte est utilisée inutilement, la mémoire peut être gaspillée.
chaque méthode :
Définissez un tableau vide et ajoutez des valeurs d'ID au tableau via la méthode each ; enfin, après avoir converti le tableau en chaîne, alertez la valeur ;
Copier le code Le code est le suivant :
$(fonction(){
var arr = [];
$(":checkbox").each(function(index){
         arr.push(this.id);
});
var str = arr.join(",");
alerte(str);
})


Méthode cartographique :
Exécutez chaque :checkbox pour renvoyer this.id; et enregistrez automatiquement ces valeurs de retour en tant qu'objets jQuery, puis utilisez la méthode get pour les convertir en tableaux Javascript natifs, puis utilisez la méthode join pour les convertir en chaînes, et enfin alerter Cette valeur;
Copier le code Le code est le suivant :
$(fonction(){
var str = $(":checkbox").map(function() {
         return this.id ;
}).get().join();   alerte(str);
})



Lorsque vous avez besoin de la valeur d'un tableau, utilisez la méthode map, qui est très pratique.
Pour une discussion plus détaillée, veuillez cliquer sur mon autre article : Explication détaillée de l'utilisation des fonctions intégrées de jQuery map() et each()
$.each()
La fonction $(selector).each() de jQuery peut parcourir les éléments enfants sélectionnés de la boucle, tandis que la fonction $.each() de jQuery peut parcourir n'importe quelle collection, y compris les objets et les tableaux. Elle reçoit la collection à parcourir et un. Fonction de rappel, la fonction de rappel transmet à chaque fois un indice de tableau et la valeur du tableau correspondant à l'indice.
$.each(array,callback);
$.each(objet,rappel);
Instance de tableau


Copier le code Le code est le suivant :
$.each( [ "un", "deux", "trois" ], function( i, l ){
alert( "index #" i ": " l );
});



rappel (index, valeur de l'index) DÉMO :

indice 0 : un
indice 1 : deux ;
indice 2 : trois
Instance d'objet

$.each({ nom : "John", lang : "JS" }, function( k, v ) {
alert( "Clé : " k ", Valeur : " v );
});
rappel (clé, valeur)
Démo :

Clé : nom, Valeur : trigkit4
Clé : âges, Valeur : 21
.trigger()

Description : exécute tous les gestionnaires et actions en fonction du type d'événement donné lié à l'élément correspondant.
Tout gestionnaire d'événements lié via .on() ou une méthode de raccourci sera déclenché lorsque l'événement correspondant se produit. Cependant, ils peuvent être déclenchés manuellement à l'aide de la méthode .trigger()
Copier le code Le code est le suivant :



.attr() et .prop()
.attr() : obtenez la valeur de l'attribut du premier élément de l'ensemble d'éléments correspondant ou définissez un ou plusieurs attributs de chaque élément correspondant.
.prop() : Comme ci-dessus
Avant jQuery 1.6, la méthode .attr() renvoyait la valeur de la propriété lors de la prise de la valeur de certains attributs, ce qui conduisait à des résultats incohérents. À partir de jQuery 1.6, la méthode .prop() renvoie la valeur de la propriété et la méthode .attr() renvoie la valeur des attributs.
Par exemple, selectedIndex, tagName, nodeName, nodeType,ownerDocument, defaultChecked et defaultSelected doivent être récupérés ou attribués à l'aide de la méthode .prop().
Ils n'ont pas d'attributs correspondants, seulement des propriétés.
.after() et .insertAfter()
1.après()
Description :
Insérez un objet jQuery (similaire à un tableau d'éléments DOM) après tous les paragraphes.
Code HTML :
Copier le code Le code est le suivant :

Bonjour
Je voudrais dire :


Code jQuery :
Copier le code Le code est le suivant :

$("p").after( $("b") );

Résultat :
Copier le code Le code est le suivant :


Je voudrais dire :
Bonjour

2.insertAfter()
Description :
Insérez tous les paragraphes après un élément. Identique à $("#foo").after("p")
Code HTML :
Copier le code Le code est le suivant :


Je voudrais dire :
Bonjour


Code jQuery :
Copier le code Le code est le suivant :

$("p").insertAfter("#foo");

Résultat :
Copier le code Le code est le suivant :


Bonjour
Je voudrais dire :


.before() et .insertBefore()
3.avant()
Description :
Insérez un objet jQuery (similaire à un tableau d'éléments DOM) avant tous les paragraphes.
Code HTML :
Copier le code Le code est le suivant :


Je voudrais dire :
Bonjour

Code jQuery :
Copier le code Le code est le suivant :

$("p").before( $("b") );

Résultat :
Bonjour
Je voudrais dire :

.append() et .appendTo()
4.append()
Description : ajoutez des balises HTML à tous les paragraphes.
Code HTML :
Copier le code Le code est le suivant :


Je voudrais dire :


Code jQuery :
Copier le code Le code est le suivant :

$("p").append("Bonjour");

Résultat :
Je voudrais dire : Bonjour

5.appendTo()
Description : Ajouter un nouveau paragraphe au div et ajouter une classe
Code HTML :
Copier le code Le code est le suivant :




Code jQuery :
Copier le code Le code est le suivant :

$("
")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");

Résultat :



.prepend() et .prependTo()
6.prepend()
Description : ajoutez un objet jQuery (similaire à un tableau d'éléments DOM) à tous les paragraphes.
Code HTML :
Je voudrais dire :
Bonjour
Code jQuery :
$("p").prepend( $("b") );
Résultat :
BonjourJe voudrais dire :
7.prependTo()
Description : ajoutez tous les paragraphes à l'élément avec la valeur ID foo.
Code HTML :
Copier le code Le code est le suivant :


Je voudrais dire :


Code jQuery :
Copier le code Le code est le suivant :

$("p").prependTo("#foo");

Résultat :
Je voudrais dire :
Résumé
1. .insertAfter() et .after() : Insérer des éléments par derrière à l'extérieur des éléments existants
2. .insertBefore() et .before() : Insérer des éléments de face en dehors des éléments existants
3. .appendTo() et .append() : insérez des éléments par derrière à l'intérieur d'éléments existants
4. .prependTo() et .prepend() : insérer des éléments
depuis l'avant à l'intérieur des éléments existants

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn