Résumé des méthodes couramment utilisées dans Jquery_jquery

//Avantages de jQuery :

1 Léger
​ ​ 2 Sélecteurs puissants
​ ​ 3 Excellente encapsulation des opérations DOM
​ ​ 4 Mécanisme fiable de gestion des événements
​ ​ 5 Ajax parfaits
​ ​ 6 Ne polluez pas les variables de premier niveau
​ ​ 7 Excellente compatibilité avec les navigateurs
                                                                                       Mode de fonctionnement de la chaîne
          9 Itération implicite
10 Le comportement a été séparé de la couche structurelle
11 Prise en charge riche des plug-ins
12Documentation complète
13Open Source

629e799adbc9dadfcd341ee6c7f26ebfAucun code n'est autorisé ici2cacc6d41bbb37262a98f745aa00fbf0

$("#foo") et jQuery("#foo") sont équivalents
$.ajax et jQuery.ajax sont équivalents Le symbole $ est l'abréviation de jQuery

// window.onload : $(function(){ })
$(function(){ }) est équivalent à l'événement window.onload dans js. Il est exécuté immédiatement après le chargement de la page. Seulement, c'est la même chose que window.onload
. Mais window.onload ne peut en écrire qu'un, mais $(function(){ }) peut en écrire plusieurs
Lorsqu'il n'y a pas d'abréviation, c'est $(document)ready(function(){ })

//Style de fonctionnement en chaîne :

    $(".level1>a").click(function(){
      $(this).addClass("current") //给当前元素添加"current"样式
      .next().show(); //下一个元素显示
      .parent().siblings()//父元素的同辈元素
      .children("a") //子元素<a>
      .removeClass("current")//移出"current"样式
      .next().hide();//他们的下一个元素隐藏
    return false;
    })

//Convertir un objet jQuery en objet DOM :

1 L'objet jQuery est un objet de type tableau, et l'objet DOM correspondant peut être obtenu via la méthode [index]

var $cr = $("#cr");//objet jQuery
          var cr = $[0]; //Objet DOM

2 Une autre méthode est fournie par jQuery lui-même, et l'objet DOM correspondant est obtenu via la méthode get(index)

var $cr = $("#cr");//objet jQuery
          var cr = $cr.get(0);//Objet DOM

//Convertir un objet DOM en objet jQuery :

Pour un objet DOM, il vous suffit d'envelopper l'objet DOM avec $() pour obtenir un objet jQuery.
La méthode est : $(Objet DOM);

var cr = document.getElementById("cr");//objet DOM
        var $cr = $(cr); //objet jQuery

//Résoudre les conflits :

1 Si d'autres bibliothèques JS entrent en conflit avec la bibliothèque jQuery, nous pouvons appeler la fonction jQuery.noConflict() à tout moment pour transférer le contrôle de la variable $ vers d'autres bibliothèques JavaScript

    var $jaovo = jQuery.noConflict();
    $jaovo(function(){
      $jaovo("p").click(function(){
        alert($jaovo(this).text());
      });
    });

2 Vous pouvez utiliser "jQuery" directement pour effectuer du travail jQuery

    jQuery(function(){
      jQuery("p".click(function(){
        alert(jQuery(this).text());
      }));
    });

//sélecteur jQuery

1 Sélecteur de base
Le sélecteur de base est le sélecteur le plus couramment utilisé dans jQuery et est également le sélecteur le plus simple. Il recherche les éléments DOM via l'identifiant de l'élément, la classe et le nom de la balise

.

//jQuery :

Récupérez simplement l’objet label. C’est un tableau

//Acquisition d'objets jQuery :

$("p");//Obtenir tous les objets de balise p ---- L'objet obtenu est un tableau
$("#aa");//Récupérer l'objet de la balise avec l'identifiant aa --- L'objet obtenu est un tableau
$(".aaa");//Récupérer l'objet du tag avec la classe aaa --- L'objet obtenu est un tableau

//Conversion entre objet jQuery et objet DOM :

Les méthodes jQuery et les méthodes DOM ne peuvent pas être utilisées (appelées) les unes avec les autres, mais les objets peuvent être convertis les uns aux autres
$("p");//est un objet jQuery
Document.documentElementsTagName("p");//C'est un objet DOM
$(document.documentElementsTagName("p"));//Convertir l'objet DOM en objet jQuery
$("p").get(1);//C'est un objet DOM,
Get(1); représente le deuxième chiffre du tableau p, (l'indice 1 est le deuxième chiffre)
$($("p").get(1));//L'objet jQuery est converti en

//Objet jQuery converti en objet DOM :

1 L'objet jQuery est un objet de type tableau, et l'objet DOM correspondant peut être obtenu via la méthode [index]
        var $cr = $("#cr");//objet jQuery
          var cr = $[0]; //Objet DOM
2 Une autre méthode est fournie par jQuery lui-même, et l'objet DOM correspondant est obtenu via la méthode get(index)
        var $cr = $("#cr");//objet jQuery
          var cr = $cr.get(0);//Objet DOM

//Objet DOM converti en objet jQuery :

Pour un objet DOM, il vous suffit d'envelopper l'objet DOM avec $() pour obtenir un objet jQuery.
La méthode est : $(Objet DOM);

var cr = document.getElementById("cr");//objet DOM
        var $cr = $(cr); //objet jQuery

//Créer un élément :

        $("7b494fea0f71cd91de22d01e80799adf123bed06894275b65c1ab86501b08a632eb");//Créer une balise 25edfb22a4f469ecb59f1190150159c6 avec l'attribut title=other et content 123
​​​​Nœud d'élément (nom de l'étiquette) Nœud d'attribut (titre de l'attribut = 'xxx') Étiquette de texte (123)

//text() nœud de texte :

text() : fonction/méthode pour obtenir le texte interne de la balise sélectionnée (contenu visible à l'œil humain)
                                                                                                          var li = $("li").text();//Obtenir les données dans le nœud texte de li (c'est-à-dire le contenu de 123)

//attr() Obtenir les attributs/Définir les attributs/Modifier les attributs :

            f9c858b17a39ec55ef2776c60045f8c494b3e26ee717c64999d7867364b1b4a3;

var i = $("p").attr("title");//Il s'agit d'obtenir la valeur de l'attribut title dans la balise p

           $("p").attr("title"," bbb");//Modifiez la valeur de l'attribut title dans la balise p en bbb

//removeAttr() supprime la valeur d'attribut de l'élément spécifié :  

removeAttr(xx,xx); supprimer la valeur de l'attribut

9cefbcc13e94bec958b7552008b0790cQuel est votre fruit préféré ?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"votre moins préféré");//Il s'agit de supprimer la valeur de l'attribut title dans la balise p (votre moins préféré)

//append() pour ajouter des éléments :

Ajoutez l'élément enfant correspondant à l'élément parent spécifié.

Appels de chaîne de fonctions : pourquoi les appels de chaîne peuvent-ils être utilisés ?
C'est parce que la fonction précédente renvoie toujours l'objet qui a été appelé
Par exemple, a.append(b).append(c) sous a est un objet tag parent pour y ajouter b, et la valeur renvoyée est toujours l'objet de a, vous pouvez donc également appeler la fonction et. ajoutez-y c

//a, b et c sont tous des objets étiquette

var $li_1 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");//Seuls les nœuds d'éléments sont créés
            var $li_2 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");
            var $parent = $("ul");

$parent.append($li_1).append($li_2);
a.append(b);//Ajoutez b à la fin de a (append), a est la balise parent et b est la balise enfant
a.append(c);//Ajoutez c à la fin de a (append), a est la balise parent et c est la balise enfant
a.append(b).append(c);//Ajoutez b et c à a. B et c sont des pairs, mais b est au-dessus de c (ajout d'appels chaînés)
a.prepend(b)//Ajouter b devant a a est la balise parent b est la balise enfant
a.insertAfter(b);//Ajouter a à la fin de b (de la même génération)

a.insertBefore(b);//Ajouter a devant b (de la même génération)
//Appeler le nœud mobile
//Insérez notre élément spécifié devant l'élément correspondant (specified element.insertBefore("matched element"))

//appendTo() ajoute des éléments :

//a est l'objet b est le nom de la balise
appendTo() : ​​​​ajoute l'élément spécifié à l'ensemble des éléments correspondants

$("li").appendTo("ul");//Ajouter la balise li à ul
a.appendTo("b"); //Oui, b est ajouté à a (a est une étiquette et b est une étiquette)
Élément spécifié.appendTo(élément correspondant);

//Supprimer l'élément (caché) remove() :

a.remove();//Supprimer a du HTML (caché)
var $li = $("ul li:eq(1)").remove();//Supprimer la deuxième balise li dans ul eq(1); qui est l'élément li avec l'indice 1, qui est l'élément li Deux; , car l'indice commence à 0
           $li.appendTo("ul");//Réajoutez l'élément qui vient d'être supprimé à ul
            $("ul li").remove("li[title !=Apple]");//Supprimer tous les éléments li de l'élément ul dont l'attribut title n'est pas celui d'Apple

//removeAttr() supprime la valeur d'attribut de l'élément spécifié :

removeAttr(xx,xx); supprimer la valeur de l'attribut
9cefbcc13e94bec958b7552008b0790cQuel est votre fruit préféré ?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"votre moins préféré");//Il s'agit de supprimer la valeur de l'attribut title dans la balise p (votre moins préféré)

//Effacer vide() :

         $("ul li:eq(1)").empty();//Trouvez le deuxième élément li dans ul et supprimez le contenu, (nœud de texte,25edfb22a4f469ecb59f1190150159c6content(nœud de texte)6a58da702854908946ebd81720150ba4Le fruit le moins préféré de votre petite amie est ???128dba7a3a77be0113eb0bea6ea0a5d0");//Remplacez la balise p entière par 8e99a69fbe029cd4e2b854e244eab143Quel est le fruit de votre petite amie fruit le moins préféré ???128dba7a3a77be0113eb0bea6ea0a5d0

// S'il y a plusieurs ps et que vous ne souhaitez en remplacer qu'un seul

          $($("p").get(1)).replaceWith("8e99a69fbe029cd4e2b854e244eab143Le fruit le moins préféré de votre petite amie est ???128dba7a3a77be0113eb0bea6ea0a5d0");//Ne remplacez que les 2 premiers p balises remplacées
Vous pouvez également ajouter un identifiant au tag que vous souhaitez remplacer, c'est-à-dire qu'un seul sera remplacé
              $("#abc").replaceWith("25edfb22a4f469ecb59f1190150159c6J'ai remplacé la balise par l'identifiant abcbed06894275b65c1ab86501b08a632eb")

//replaceAll() :
$("8e99a69fbe029cd4e2b854e244eab143Quel est le fruit le moins préféré de votre maman ???128dba7a3a77be0113eb0bea6ea0a5d0").replaceAll("#abc");//Le premier remplace le dernier par l'ID #abc Cette balise
               $("25edfb22a4f469ecb59f1190150159c6J'ai remplacé toutes les balises pbed06894275b65c1ab86501b08a632eb").replaceAll("p");//Le recto remplace ce qui suit

//Wrap wrap() wraoAll() wrapInner() :

//wrap() :

wrap() : enveloppez l'élément correspondant avec une nouvelle balise HTML.
un objet étiquette (enveloppé) b est une étiquette (enveloppée avec l'étiquette b)
         Toutes les balises a seront enveloppées
            a.wrap(b);
// S'il y a une balise a, enveloppez-la dans :
                                                                                                                                                                                                   dehors                a4b561c25d9afb9ac8dc4d70affff419 // S'il y a plusieurs balises a, enveloppez-les dans :
                                                                                                                                                                                                   dehors                a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                                    dehors                a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                                    dehors                a4b561c25d9afb9ac8dc4d70affff419 Chacun est séparé de la séparation d'emballage ensemble
.           a.wrap("b");//Il ajoute une balise parent à a est enveloppé par b
.                                                                                         $("p").wrap("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//Ajoutez une balise parent à la balise p, c'est-à-dire enveloppez la balise p avec la balise 5a8028ccc7a7e27417bff9f05adf5932 ;i> ;e388a4556c0f65e1904146cc1a846beeJe suis p tag94b3e26ee717c64999d7867364b1b4a372ac96585ae54b6ae11f849d2649d9e6
           /*
                                                                                                                                                                                                                                                                                 72ac96585ae54b6ae11f849d2649d9e6
             */


//wrapAll() :

wrapAll() : Enroulez toutes les étiquettes ensemble. Même si les étiquettes à emballer ne sont pas ensemble et qu'il y a d'autres étiquettes au milieu, les étiquettes à emballer seront déplacées ensemble et enveloppées ensemble
//Avant colis
                                                                                                                                                             e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
                                                                                                             ​​​​ a.wrapAll(b);//Tous les packages
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
Après un emballage comme celui-ci, la position de sortie changera et l'effet changera également


//wrapInner() :


wrapInner() : ajouter une balise spécifiée au contenu de la balise correspondante (équivalent à ajouter une sous-balise à la balise d'origine et à enregistrer le contenu textuel de la balise parent)
                                                                                                                                    a.wrapInner("b");//Le résultat est : 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed Utilisez la balise b pour encadrer le contenu dans un

                                                                                                                                                                                                                                 $("li").wrapInner("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//Le résultat est : d5b01ed333f292e161ef5c96ce4fe97f5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e62867e861ba23559b572f230426ab14ea           6ec3bfc2be99a37ee6d43b930f84f6a0

                                          5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6                                                                                   

//Commutation d'effet toggleClass() :

Il fait référence à la commutation entre les effets. Il y a un effet lorsqu'il n'y a pas de commutation pour la première fois. Lors de la commutation, il fait référence à l'effet composé de toutes les classes
. Cela signifie basculer entre l'effet actuel et l'effet spécifié
           080b747a20f9163200dd0a7d304ba388
         .haut{
                      font-weight:bold;     /* Police grasse */

                                                                                              couleur : rouge ; >

.un autre{                font-style:italic;               couleur:bleu;
>

                                                                                                5d242174db457a8d7d389a84473c5be7Quel est votre fruit préféré ?94b3e26ee717c64999d7867364b1b4a3

$("p").toggleClass("another ");//En fait, il s'agit d'un changement de classe. Lorsque cette fonction est déclenchée, cela équivaut à en changer une autre et une hauteur, comme indiqué ci-dessus. est en police rouge Lorsque la classe est une autre, elle est en police bleue
. Par conséquent, lorsque cette fonction est déclenchée, la couleur changera une fois. Une fois déclenchée, elle changera une fois. Il s'agit simplement d'un changement de classe et de la balise p après $("p").toggleClass(" un autre") Changez la classe d'origine à l'intérieur


//Déterminer si l'élément contient un certain style hasClass() :


$("p").hasClass("MyClass");//Déterminez s'il existe un attribut de classe dans la balise p qui est MyClass
​​​​ $("p").is("MyClass");//Identique à ci-dessus


//html() et text() :

         

$("p").html();//C'est la balise p. Le contenu entre les deux balises (e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3) est équivalent au innerHTML de p, qui est :             $("p").text();//Il s'agit des données texte (nœud de texte) dans la balise p, qui sont : Quel est votre fruit préféré ?

//Obtenir et perdre la mise au point focus() flou() :

focus() : Obtenez le focus
         blur() : perte de concentration
                                                                                                                                                                                                                                            Focus (méthodes et instructions qui doivent être exécutées pour obtenir le focus function() { instruction operation })
                 $("Nom de la balise (nom #ID) (nom de la classe)").blur(méthodes et instructions qui doivent être exécutées en cas de perte de la fonction focus(){opération d'instruction})

//Obtenir/changer la valeur() valeur defaultValue :

                         c192fad01f65efe0c56df57154833f89 ​​​​​ $("input").val();//C'est la valeur pour obtenir la valeur
            $("input").val("Le compte est ****");//C'est la valeur à modifier
Le résultat est : fe0bcad39060f87b60440cabbc926687

//valeur par défaut :

Représente la valeur par défaut de value, quelle est la valeur définie lors de l'écriture du code, puis quelle est defaultValue
         Généralement utilisé pour le jugement
If (txt_value == ""){//Cela signifie que si la valeur est vide, attribuez la valeur par défaut de départ à value
Utilisé pour définir la zone de saisie. Si la zone de saisie ne produit rien, la valeur par défaut sera saisie (lorsque la zone de saisie n'obtient pas le focus, la valeur par défaut sera affichée dans la zone de saisie. Après avoir obtenu le focus, la valeur par défaut. la valeur sera supprimée. Si le client ne saisit rien, et la valeur par défaut sera réattribuée à la valeur, qui est utilisée pour rappeler au client que rien n'a été saisi)
          $("input").val($("input").defaultValue)
>

//Afficher le nombre d'éléments enfants children() (uniquement les éléments enfants, les éléments enfants des éléments enfants, non comptés, les éléments enfants directs sont des éléments enfants) :

$("tag").children();

L'objet jQuery du tag.children();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   5db79b134e9f6b82c0b36e0489ee08ed
           $("a").children();//C'est 2 Parce que les éléments enfants de a ne sont que b et d

$("b").children();//C'est 1 car b n'a qu'un seul élément enfant, c

$("d").children();//C'est 0 car d n'a pas d'éléments enfants

//Éléments frères et sœurs, next(), prev(), siblings() :

next();//Le prochain élément de la même génération

          prev();//Élément précédent de la même génération

siblings();//Tous les éléments frères et sœurs a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a 9cefbcc13e94bec958b7552008b0790cQuel est votre fruit préféré ?94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185

d5b01ed333f292e161ef5c96ce4fe97fApplebed06894275b65c1ab86501b08a632eb

e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
7b0baccfcb080b732e507f200c89df46Ananasbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
5a8028ccc7a7e27417bff9f05adf593245672ac96585ae54b6ae11f849d2649d9e6

// Exemple : suivant()

var p= $("p").next();
p.html();//Le contenu de l'élément suivant du homologue de l'élément p (équivalent à innerHTML), le résultat est :
& Lt; li titre = 'pomme' & gt; pomme & lt;/li & gt;                                                                                                                                                                           e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
dans La balise suivante du pair de p est ul,ff6d136ddc5fdfeffaf53ff6ee95f185Voici le contenu de html()929d1f5ca49e04fdcb27f9465b944689
--------------------
// précédent()

var p = $("p").prev();

           p.html();//C'est le chiffre précédent de l'élément homologue de p, qui est l'élément b. Le html() de l'élément b est 123, donc c'est 123

.
123

----------------

// frères et sœurs()

var p = $("p").siblings();//Tous les éléments sont maintenant des tableaux

p.html(); //C'est juste 123, car c'est un tableau, s'il est affiché, le premier est affiché, donc le contenu de la balise b est 123. Vous devez parcourir pour voir tout le contenu <.> pour(var je =0;p.length;i ){

alert(p[i].innerHTML);//Voici tout le contenu, pourquoi utiliser innerHTML ?
//Parce que p est un objet jQuery, lorsque l'objet jQuery est suivi d'un indice, c'est un objet DOM, vous ne pouvez donc utiliser que innerHTML. Cela a la même fonction que la méthode html() de l'objet jQuery,                   //alert(); est une boîte contextuelle ordinaire
​​​​​​ //Le résultat est :
123
Quel est votre fruit préféré ?
Pomme
Oranges
Ananas
              456
>


//Mécanisme de délégation d'événement :

Mécanisme de délégation d'événement : nous devons trouver un élément et modifier ses attributs, mais nous ne savons pas si nous pouvons trouver cet élément, nous utilisons donc une variable temporaire pour lui déléguer l'événement, puis recherchons l'élément . Une fois trouvé, nous transmettons l'incident à
// $(custom variable.target).closest("l'élément que vous recherchez").css("un attribut après avoir trouvé", "changer la valeur de l'attribut")

 

//Ici, démarrez la recherche en cliquant sur l'objet (si vous cliquez sur a, vous chercherez d'abord a, puis span, puis p, puis body, jusqu'à ce que vous trouviez la bonne balise, vous arrêtez de chercher en ligne)

                $(document).bind("click",function(e){

                   $(e.target).closest("body").css("color","red");
                 })
//$(document).bind("clic",function("p"){
// $ ("p") Css ("couleur", "rouge");                                                                                                                                                                                                                                                                                                         //

                      //document : représente l'intégralité du document. Je souhaite faire correspondre un objet incertain dans le document, j'ai donc utilisé ce formulaire
.                        //e : fait référence à un certain élément que nous recherchons, c'est une valeur non spécifique, $(e.target) est l'objet non spécifique
                    // D'après notre correspondance non spécifique, celui qui correspond est celui-là
                                                                                                    35aaaf79a53df31d8da212e70697647e
                                                                                                              
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            dans dans dans                                                   929d1f5ca49e04fdcb27f9465b944689
                                                                                   

//Obtenir la marge gauche et la marge supérieure de l'objet offset() :


Utilisation :
               jQuery object.offset();
               jQuery object.offset().left/top;
           var $p = $("p").offset();//Obtenir la marge gauche et la marge supérieure de p, qui est un tableau
           $p.left;//La valeur obtenue est la marge de gauche
           $p.top;//La valeur obtenue est la marge supérieure

//Définir les coordonnées et afficher, show() :

Object.css().show("slow(slow)"/"normal(normal)"/"fast(fast)");

​ Une chaîne de l'une des trois vitesses prédéterminées (« lente », « normale », « rapide ») ou une valeur en millisecondes représentant la durée de l'animation (par exemple : 1000)
          $("#id").mouseover(function(e){
//e est équivalent à event
en js natif //Créer un élément div, l'objet événement déclenché par e (survol de la souris), cela représente l'objet source de l'événement (faisant référence à la balise html) lorsqu'il est déclenché
            var tooltip = "c4f2e5f2cda17ebc51ceca5f4bbed902" this.title "16b28748ea4df4d9c2150843fecfba68";
                                             $("body").append(tooltip); //Ajouter au document

                   $("#tooltip").css({

"top":e.pageY "px", "gauche":e.pageX "px", "largeur": "300px"

}).show("fast"); //Définissez la coordonnée x et la coordonnée y et affichez-la. Le e ici est la coordonnée de l'intersection entre l'événement et la souris lorsque la source de l'événement déclenche cet événement. représente ceci Les coordonnées du coin supérieur gauche de la boîte

                 })