Maison > interface Web > js tutoriel > Introduction à quelques méthodes couramment utilisées dans jQuery

Introduction à quelques méthodes couramment utilisées dans jQuery

零下一度
Libérer: 2017-06-26 15:15:17
original
1126 Les gens l'ont consulté

1. Sélecteur de niveau
Sélecteur descendant "Élément parent Élément descendant"

Par exemple : $("div p") sélectionne tous les éléments p sous l'élément div


Sélecteur d'élément enfant "Élément parent> Élément enfant"

Par exemple : $("div>p") sélectionne l'élément p dans l'élément enfant de div


Premier frère arrière éléments "nom de l'élément + élément frère"

Par exemple : $("div+p") sélectionne le premier élément p après l'élément div


tout à l'envers Élément Brother "Nom de l'élément ~ Élément Brother"

Par exemple : $("div~p") sélectionne tous les éléments p après l'élément div


2. Sélecteur de filtre
:first              $(" p:first")                                                                                        "p: gt(1)"); Tous les éléments


avec des nombres supérieurs à 1 : eq $("p:eq(1)"); Tous les éléments

🎜> avec des nombres égaux à 1 :odd $( "td:odd"); Tous les éléments
avec des nombres impairs :even $("td:even"); Tous les éléments
avec des nombres pairs :not :not(.notr)") Sélectionnez tous les éléments


qui n'ont pas le nom de classe notr
Filtre basé sur le contenu
:contains(content)
: vide()


Filtre basé sur l'affichage

:hidden Sélectionnez les éléments cachés (display:none ou type="hidden" ou masquez l'élément parent ou la longueur et la largeur sont 0, ces éléments sont éléments cachés)

:visible


3. Sélecteur de formulaire

:input

:text
:button
:file
:radio
: submit

4. Attribut - sélecteur de filtre
[Nom de l'attribut] Sélectionnez l'élément avec cet attribut
[Nom de l'attribut='value'] Sélectionnez l'élément
avec l'attribut égal à un certain value [ Attribute name!='value'] Sélectionnez l'élément dont l'attribut n'est pas égal à une certaine valeur

Par exemple : $("input[name='newlatter']"); l'attribut name est newlatter

5. Sélecteur d'attribut de formulaire
Utiliser : vérifié :selected :enabled :disabled pour filtrer les éléments
Simplification du sélecteur de filtrage d'attribut
Par exemple : $(":radio: coché" )                                                                                                                                     peut sélectionner tous les éléments radio sélectionnés

                                                                                    ‐                       peut sélectionner tous les éléments d'option sélectionnés

    🎜> attr("Nom de l'attribut") Obtenir l'attribut Attr("Nom de l'attribut", valeur de l'attribut ) Définir l'attribut


removeAttr("Nom de l'attribut") Supprimer l'attribut


7. Méthodes pour obtenir et définir l'attribut value
val() et val("value")

8. html() html("value")
html ( ) correspond à innerHTML
html("value") correspond à innerHTML="value"

text() text("value")
text() correspond à innerText()
text("value ") correspond à innerText="value"


9. Fonction de style
css("nom du style") Récupère la valeur correspondant au style
css(" nom du style", "style La valeur de ") Définir le style correspondant Définir un
à la fois css({"Nom du style": "Valeur du style", "Nom du style": "Valeur du style" }) Définir plusieurs styles à la fois

addClass("class name") Ajouter une valeur correspondant à l'attribut de classe
removeClass("class name") Supprimer la valeur correspondant à l'attribut de classe
toggleClass("class name") Switch

width() Obtenez la largeur
height() Obtenez la hauteur
innerWidth() Obtenez la largeur (y compris le rembourrage)
externalWidth() Obtenez le width (y compris le remplissage et la bordure)
externalWidth(true) Obtenez la largeur (y compris le remplissage, la bordure et la marge extérieure)


10. Afficher et masquer les fonctions
show() show
hide() hide
toggle() switch
show(speed) Afficher dans le temps spécifié
hide(speed) Masquer dans le temps spécifié
toggle(speed) Switch dans le temps spécifié

slideUp(speed) slideUp(speed) dans le temps spécifié Réduire vers le haut dans le temps spécifié
slideDown(speed) Développer vers le bas dans le temps spécifié
slideToggle(speed) Basculer les deux états ci-dessus dans le délai spécifié time

fadeIn(speed) fadeIn(speed) dans le temps spécifié Fondu entrant dans le temps
fadeOut(speed) Fondu sortant dans le temps spécifié
fadeToggle(speed) Changez les deux états ci-dessus

11. Animation personnalisée
Selector.animate({" Parameters"},[time],[animation callback function]);
 
$(document).ready(function(){
>   $("div").animate({
   gauche : '250px',
   opacité :'0.5',
      hauteur :'150px',
   largeur :'150px'
} ,2000);
 });
 });


12. Événements de liaison
Selector.bind("event", gestionnaire d'événements Événement de l'élément À associer); la fonction de gestionnaire d'événement correspondante, il est recommandé d'utiliser on
selector.unbind("event"); pour déconnecter l'événement de l'élément de la fonction de gestionnaire correspondante. Il est recommandé d'utiliser off
selector.trigger("event. "); Déclencher un appel d'événement

Créer des fonctions d'événement couramment utilisées :
click(fn)/click()
DBLCLICK (Fn)/DBLCLICK ()
Flou (Fn)/Flou ()
Focus (Fn)/Focus ()
Changement (Fn)/Changement ()
Keydown (Fn)/Keydown "load (fn)/unload(fn)

Par exemple : $("div").click(function(e){});//e est l'objet événement


$("div").bind("click",function(){});


13. Attributs et méthodes couramment utilisés des objets d'événement d'événement
cible event Source
page ){
                    alert(e.pageX+":"                 e.pageY); fonction
on (type d'événement, sélecteur, fonction de traitement)
Vous pouvez donner les valeurs actuelles et futures d'un élément Lier des événements aux éléments correspondant au sélecteur

Par exemple : $("table ").on("click","tr",function(){
//Logique de traitement des événements
} ; Contenu interne pré-ajouté
after() Insérer du contenu après chaque élément correspondant
before( ) Insérer du contenu avant chaque élément correspondant
remove() Supprimer le nœud
vide() Nœud vide
clone() Copier les éléments du nœud
clone(true) Copier les éléments du nœud et les gestionnaires d'événements liés
enfants () Rechercher les éléments enfants
next() Rechercher les éléments frères suivants
prev() Rechercher les éléments frères précédents
siblings() Rechercher les éléments frères
find(selector) Rechercher les éléments enfants et les éléments descendants
parent() Rechercher l'élément parent
parent(selector) Rechercher les éléments ancêtres
eq(index) Renvoie l'objet jQuery
à index+1 first() Obtient le premier élément
last() Obtient le dernier element
is(expr) Détermine si l'élément satisfait à la condition expr
not(expr) Renvoie les éléments qui ne remplissent pas certaines conditions
get(index) Obtient l'un des éléments DOM correspondants

17. Fonction utilitaire
$.each(object,[callback])
Méthode de traversée, utilisée pour parcourir des tableaux et des objets
premier, deuxième)
Fusionner deux tableaux, fusionner les deux tableaux sur le premier tableau
$.trim(str)
Supprime les espaces au début et à la fin de la chaîne


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal