Bibliothèque de base JavaScript

JQueryName

Bibliothèque JavaScript

Une collection spécifique encapsulée (méthodes et fonctions). Dans cette bibliothèque, de nombreuses fonctions bien définies sont encapsulées, prenant en charge les opérations régulières et les extensions de js

 

JQueryName

Il s'agit d'une bibliothèque js rapide et brève conçue dans le but de "écrire moins, faire plus"

Apprenez l'essence de jquery : apprenez à appeler ces fonctions (méthodes)

Utilisation de jQuery

• importer un fichier jq

• Utilisez la balise de script ci-dessous

<script src="./jquery-3.6.0.js"></script> 
<script> 
        var box1 = document.querySelector(".box1") 
        console.log(box1); 
        var box1Jq = $('.box1') 
        console.log(box1Jq); 
    </script>

Fonction d'entrée de JQuery

• Attendez que le document soit chargé (l'image n'a pas besoin d'être chargée), et exécutez le code

          $(document).ready(fonction () { 
              console.log(1, $(".box1")); 
          })

• Attendez que le document soit chargé (l'image n'a pas besoin d'être chargée), exécutez le code, qui est l'abréviation du précédent

          $(fonction () { 
              console.log(2, $(".box1")); 
          })

• Attendez que le document soit chargé (l'image doit être chargée), et exécutez le code

          $(window).on("load", function () { 
              console.log(3, $(".box1")); 
          }) 
          $(window).on("load", function () { 
              console.log (33, $(".box1")); 
          })

• Méthode d'écriture native, (l'image doit être chargée)

          window.onload = function () { 
              console.log(4, $(".box1")); 
          } 
          // La manière originale d'écrire doit être écrasée 
          window.onload = function () { 
              console.log(44, $ ( ".box1")); 
          }

L'objet de niveau supérieur de JQuery $

$ est un autre nom pour jQuery, vous pouvez utiliser jQuery à la place, mais pour plus de commodité, utilisez généralement $ directement

API commune JQuery

Sélecteurs pour jQuery

Il existe de nombreuses façons d'obtenir DOM dans js natif, mais il y a des problèmes de compatibilité, donc jq encapsule la méthode de sélection, de sorte que nous avons une norme unifiée pour obtenir des éléments

$(selector) renvoie un objet Jq, qui est un tableau, pas un tableau dom. Pour utiliser la méthode jq, vous devez utiliser l'objet jq pour appeler

    <div class="box1"></div> 
    <div id="box1"> 
        <div class="box2"></div> 
    </div> 
    <script> 
        // Qu'il s'agisse d'un identifiant ou d'une classe, tout est renvoyé C'est un tableau d'objets jq 
        // L'utilisation des sélecteurs est la même que celle des sélecteurs CSS 
        console.log($(".box1")); 
        console.log($("#box1")); 
        console.log($ ( "div")); 
        console.log($(".box2")); 
        console.log($("#box1 .box2")); 
    </script>

itération implicite

Le processus de traversée des éléments internes du DOM est appelé itération implicite

jq parcourra automatiquement les éléments correspondants et exécutera la méthode correspondante. Nous n'avons pas besoin d'écrire nous-mêmes l'opération de traversée de boucle pour simplifier le code

        // Ajouter des événements de clic pour cinq lis 
        // Écriture originale 
        var lis = document.querySelectorAll("li") 
        for (var i = 0; i < lis.length; i++) { 
            lis[i].style.color = 'red ' 
        } 
        // Comment écrire jq 
        var liss = $('li') 
        liss.css("color", "blue")

Récupère l'élément avec l'indice spécifié

            // Récupère l'élément avec l'indice spécifié, utilise la méthode eq pour obtenir l'élément avec l'indice correspondant 
            console.log(liss.eq(i)); 
            liss.eq(i).css("color", colors[i ])

Obtenir l'indice de l'élément courant

        liss.click(function () { 
            // console.log(this); 
            // utilise $ pour convertir this en un objet jq 
            console.log($(this).index()); 
        })

Pensée exclusive

L'élément actuel définit le style et les autres éléments frères effacent le style

siblings() : renvoie l'élément frère de l'élément enfant sélectionné

        lis.click(function () { 
            // console.log(this); 
            // lis.css("color", 'black') 
            // Définir la couleur de la police de l'élément actuel sur rouge 
            $(this).css ( "color", "red") 
            // Obtient les éléments frères de l'élément actuel, 
            // Vous pouvez passer un sélecteur, ce qui signifie ne rechercher que les éléments frères et respecter les règles du sélecteur 
            console.log($(this ).siblings ('.item') ); 
            $(this).siblings('.item').css("couleur", "noir") 
        })

programmation en chaîne

Les objets JQ peuvent toujours appeler des fonctions jq, et tous les codes peuvent être écrits sur une seule ligne

        lis.click(fonction () { 
            $(this).css("couleur", "rouge").siblings('.item').css("couleur", "noir") } 
        )

manipulation de style

• $(selector).css(property) : récupère la valeur de la propriété

  console.log($('.box1').css("background-color"));

• $(selector).css(property, value) : définit la valeur de la propriété

  $('.box1').css("couleur-arrière-plan", 'bleu')

• S'il y a de nombreuses propriétés à définir, vous pouvez utiliser des objets pour les définir

          // Définissez la valeur de la propriété 
          $('.box1').css({ 
              width: '200px', 
              height: "200px", 
              color: 'white', 
              // Lorsque le paramètre est un objet, utilisez le nommage hump method 
              fontSize : '50px', 
              // ou utilisez la chaîne keb-base 
              'background-color' : 'blue' 
          })

• Le nom de la classe de l'élément de contrôle, définissez le nom de la classe

  • Ajouter une classe : $(selector).addClass("nom de la classe")

            $('.add').click(fonction () { 
                $('.box1').addClass("box4") 
            })

  • Supprimer la classe : $(selector).removeClass("nom de la classe")

            $('.del').click(fonction () { 
                $('.box2').removeClass("box2") 
            })

  • Basculer la classe : $(selector).toggleClass("nom de la classe")

            $('.toggle').click(fonction () { 
                $('.box3').toggleClass("box4") 
            })

animation

afficher masquer

afficher (vitesse, rappel)

vitesse : spécifie la vitesse de l'animation, la valeur peut être lente, rapide ou le nombre de millisecondes

callback : fonction de rappel, une fonction qui sera exécutée après la fin de l'animation

afficher masquer basculer

        $('.btn1').click(function () { 
            $('.container').show(1000, function () { 
                console.log("L'animation est terminée"); 
            }) } 
        ) 
        $('. btn2 ').click(function () { 
            // console.log(this); 
            // obtenir le conteneur 
            // masquer l'élément caché 
            $('.container').hide(1000, function () { 
                console.log("animation Ended"); 
            }) } 
        ) 
        $('.btn3').click(function () { 
            $('.container').toggle(1000, function () { 
                console.log("L'animation est terminée"); 
            }) 
        })

glisser

slideDown slideUp slideToggle

        $('.btn1').click(function () { 
            $('.container').slideDown(1000, function () { 
                console.log("L'animation est terminée"); 
            }) 
        }) 
        $('. btn2 ').click(function () { 
            $('.container').slideUp(1000, function () { 
                console.log("L'animation est terminée"); 
            }) } 
        ) 
        $('.btn3'). click( function () { 
            $('.container').slideToggle(1000, function () { 
                console.log("L'animation est terminée"); 
            }) 
        })

fondu enchaîné

fadeIn fadeOut fadeToggle

fadeTo (vitesse, opacité, rappel)

opacity : bascule la transparence sur la valeur spécifiée

        $('.btn1').click(function () { 
            $('.container').fadeIn(1000, function () { 
                console.log("L'animation est terminée"); 
            }) 
        }) 
        $('. btn2 ').click(function () { 
            $('.container').fadeOut(1000, function () { 
                console.log("L'animation est terminée"); 
            }) } 
        ) 
        $('.btn3'). click( function () { 
            $('.container').fadeToggle(1000, function () { 
                console.log("L'animation est terminée"); } ) } 
            ) 
        $ 
        ('.btn4').click(function ( ) { 
            $ ('.container').fadeTo(1000, 0.5,fonction () { function () { 
                console.log("L'animation est terminée");
            }) 
        })

animation personnalisée

animer (paramètres, vitesse, rappel)

params : l'attribut de style au moment de la résiliation

vitesse : vitesse, comme ci-dessus

callback : fonction de rappel, comme ci-dessus

        $('.btn1').click(function () { 
            $('.container').animate({ 
                width: '200px', 
                height: '200px', 
                backgroundColor: '#00f', 
                fontSize: '80px', 
                color:'white' 
            }, 1000, function () { 
                console.log("L'animation est terminée"); 
            }) 
        })

arrêter l'animation

arrêter l'animation en cours

        $('.btn2').click(fonction () { 
            $('.container').stop() 
        })

manipulation d'attribut

1. Attributs inhérents

prop("nom de la propriété") obtenir la valeur de la propriété

prop("nom de la propriété", "valeur de la propriété") définir la valeur de la propriété

Les attributs de l'élément lui-même

1. Si l'élément a un attribut correspondant, renvoie la valeur d'attribut spécifiée

2. Si l'élément n'a pas de valeur d'attribut correspondante, il renvoie une chaîne vide, et si l'attribut ne vient pas avec l'élément, il renvoie undefined

$("img").prop("src", imgUrl)

2. Attributs personnalisés

attr("attribute name") Obtenir la valeur de l'attribut personnalisé

attr("attribute name","attribute value") Définir la valeur de l'attribut personnalisé

1. Si l'élément a un attribut correspondant, renvoie la valeur d'attribut spécifiée

2. Si l'élément n'a pas de valeur d'attribut correspondante, renvoie undefined

$("img").attr("src", imgUrl)

3. Cache de données

data, vous pouvez accéder aux données sur l'élément spécifié sans changer la structure dom, et les données stockées disparaîtront lorsque la page est actualisée

data("nom de la propriété") pour obtenir la valeur de la propriété personnalisée

data("nom de la propriété", "valeur de la propriété") définir la valeur de la propriété personnalisée

<!-- Pour écrire des données sur l'étiquette, vous devez utiliser la valeur de l'attribut data --> 
console.log($("img").data("src")); 
$("img").data ("src", imgUrl) 
console.log($("img").data("title")); 
console.log($("img").data("href"));

la différence

prop et attr ne peuvent stocker que des chaînes, les données peuvent stocker n'importe quel type

prop>attr prop>data L'efficacité de data et attr n'est pas nécessairement

texte de contenu

html() Obtient ou définit le contenu de l'élément équivalent à innerHTML

text() Obtient ou définit le contenu textuel de l'élément équivalent à innerText

val() Obtient ou définit la valeur de l'élément de formulaire équivalente à value

        console.log($('.box1').text()); 
        console.log($('.box1').html()); 
        $('.box1').text("<bouton>C'est Un bouton</bouton>") 
        $('.box1').html("<bouton>Ceci est un bouton</bouton>") 
        console.log($('input').val()); 
        $( 'entrée').val("valeur modifiée")

opération de traversée

L'itération implicite de jq effectuera la même opération sur le même type d'éléments. Si vous souhaitez effectuer différentes opérations sur différents éléments, vous devez utiliser la traversée

parcourir les éléments DOM

jqDom.each(fonction (index,domEl) {})

index : numéro d'index

domEl: objet élément DOM, pas un objet jq, pour utiliser la méthode jq, vous devez d'abord le convertir en objet jq

        // Ne peut boucler que le tableau dom de jq 
        $("li").each(function (index, domEl) { 
            console.log(index, domEl); 
            // domEl.style.color = colors[index] 
            $(domEl) . css('couleur', couleurs[index]) 
        })

itérer sur tous les objets

$. chaque(obj,fonction (index,item) {})

obj : l'objet à traverser, tout objet est bon, principalement utilisé pour le traitement de données

index : numéro d'index

item : l'élément à parcourir

        // peut parcourir n'importe quel objet 
        $.each($('li'), function (index, item) { 
            console.log(index, item); 
        })

manipulation d'éléments

1. Créer des éléments

var li = $(`<li>4</li>`)

2. Ajouter des éléments

• interne

  append(el) // ajoute à la fin de l'élément interne

  prepend(el) // ajouter à l'avant de l'élément intérieur

• externe

  before(el) // ajouté avant l'extérieur de l'élément

  after(el) // ajouter après l'extérieur de l'élément

        $('ul').append(li) 
        $('ul').prepend(li) 
        $('ul').after(li) 
        $('ul').before(li) 
        // fonctionne de la même manière à le même élément de temps, le résultat final sera la dernière opération appelée

3. Supprimer des éléments

remove() supprime les éléments correspondants, y compris lui-même

empty() supprime les éléments enfants de l'élément correspondant, ne s'incluant pas lui-même

la casse html('') correspond au contenu de l'élément

opération de taille, opération de localisation

1. Taille

      console.log($(".box1").width()); // Obtenir la largeur de l'élément correspondant, ne calculer que la largeur 
      console.log($(".box1").height());// Obtenez la hauteur de l'élément correspondant, calculez uniquement la hauteur 
      console.log($(".box1").innerWidth());// Obtenez la largeur de l'élément correspondant, y compris le rembourrage 
      console.log($(".box1"). innerHeight()); // Obtient la hauteur de l'élément correspondant, y compris le rembourrage 
      console.log($(".box1").outerWidth());// Obtient la largeur de l'élément correspondant, y compris le rembourrage, border 
      console. log($(".box1") .outerHeight());// Récupère la hauteur de l'élément correspondant, y compris le rembourrage, la bordure 
      console.log($(".box1").outerWidth(true));// Get la largeur de l'élément correspondant, y compris padding, border, margin 
      console.log($(".box1").outerHeight(true));// Récupère la hauteur de l'élément correspondant, y compris padding, border, margin

2. Emplacement

• compenser

  Utilisé pour définir ou réinitialiser le décalage de l'élément sélectionné par rapport au document, il n'a rien à voir avec le parent

        // Vous pouvez obtenir directement deux propriétés : la distance de haut et de gauche par rapport à la gauche et au haut du document 
        console.log($(".box1").offset()); 
        // Vous pouvez également définir la position 
        $ ("".box1" ).offset({ 
          gauche : 0, 
          haut : 60, 
        });

• position

  Il est utilisé pour renvoyer la position de l'élément entier par rapport à l'élément parent (l'élément parent doit avoir un attribut position). S'il n'y a pas de position, recherchez le niveau supérieur jusqu'au corps, et la marge sera comptée dans la position ensemble. Elle peut uniquement être obtenue et ne peut pas être définie.

        // Deux attributs peuvent être obtenus directement : la distance du haut et de la gauche par rapport à la gauche et au haut de l'élément parent 
        console.log($(".box1").position());

3. Événement de défilement

      $(document).scroll(function () { 
        // scrollTop()/scrollLeft est utilisé pour obtenir la longueur de défilement 
        if ($(document).scrollTop() > 400) { 
          $(".top").fadeIn(1000 ) ; 
        } else { 
          $(".top").fadeOut(1000); 
        } 
      }); 
      $(".top").click(function () { 
        // Définissez la hauteur de défilement sur 0 pour obtenir l'effet de retour vers le haut 
        $(document).scrollTop(0); 
      });

événement

1. Inscription à un seul événement

el.event type(fonction(){

    // gestionnaire d'événements

})

• L'événement de survol imite un mouseover

       $(".box1").hover( 
          fonction () { 
            $(".box1").css({ 
              largeur : "200px", 
              hauteur : 200, 
            }); 
          }, 
          fonction () { 
            $(".box1" ).css({ 
              largeur : "100px", 
              hauteur : 100, 
            }); 
          } 
        );

2. Traitement des événements sur événement de liaison

el.on('events',fn) 
// événements un ou plusieurs types d'événements séparés par des espaces 
// fonction à exécuter par fn

avantage

• Plusieurs fonctions peuvent être liées

        // Lier plusieurs fonctions, si plusieurs événements sont la même opération 
        // peuvent être écrits ensemble 
        $(".box1").on("mouseenter mouseleave click", function () { 
          console.log(1 ); 
        }); 
        / / Liez plusieurs fonctions, si plusieurs événements effectuent des opérations différentes 
        // Utilisez la forme d'objet 
        $(".box1").on({ 
          click: function () { 
            console.log(1 ); 
          }, 
          mouseenter: function () { 
            console .log(2); 
          }, 
          mouseleave : fonction () { 
            console.log(3); 
          }, 
        });

• Lier dynamiquement des événements à des éléments enfants

        // Déléguer des événements aux éléments parents 
        // Vous pouvez lier des événements à des éléments générés dynamiquement 
        $("ul").on("click", "li", function () { 
          console.log(this); 
        });

événement non lié

        // Libère la liaison d'événement 
        // Libère tous les événements 
        $("bouton").off(); 
        // Libère un seul événement 
        $("bouton").off("clic"); il y a un événement

L'événement unique n'est déclenché qu'une seule fois

$("bouton").one("clic", fonction () { 
    envoyerMsg(); 
});

Déclencher automatiquement des événements

$("bouton").click();

objet gestionnaire d'événements de jq

      // Événement bulle 
      // Lors d'un clic sur un élément enfant, s'il y a le même type d'événement sur l'élément parent, l'élément parent sera également déclenché 
      $(".box1").click(function (e) { 
        console.log ("box1" ); 
      }); 
      $(".box2").click(function (e) { 
        e.stopPropagation(); 
        console.log("box2"); 
      }); 

      // événement par défaut 
      $("a ").click (fonction (e) { 
        e. preventDefault(); 
        console. log("a"); 
      });

Bibliothèque de plug-ins JQ

Bibliothèque de plugins jQuery - Collection des plugins jQuery les plus complets, les plus récents et les meilleurs