Maison > interface Web > js tutoriel > le corps du texte

Explication sur jquery DOM&events

jacklove
Libérer: 2018-05-21 10:39:14
original
1385 Les gens l'ont consulté

Les événements Jquery DOM& sont souvent rencontrés dans l'apprentissage. Cet article expliquera en détail les événements jquery DOM&.

Quelle est la différence entre une bibliothèque et un framework ?

La bibliothèque propose de nombreuses méthodes, ce qui équivaut à divers petits outils dans l'entrepôt. Vous pouvez les utiliser directement lorsque vous avez besoin d'outils.

Le cadre n'est qu'une étagère qui a été mise en place. Le corps principal a été déterminé et il ne reste plus qu'à le remplir de divers outils.

Que peut faire jquery ? Quelle est la différence entre les objets jquery et les objets natifs DOM ? Comment convertir ?

jquery peut parcourir du texte HTML, faire fonctionner des nœuds DOM, gérer des événements, des animations et des fonctions ajax, vous permettant de l'utiliser sur plus de plates-formes sans tenir compte de la compatibilité.
Les fonctionnalités sont : légères (32 Ko), compatibles avec CSS3, multi-navigateurs,

La différence entre les objets jquery et les objets natifs DOM est que les objets jqery sont des objets encapsulés d'objets natifs. les méthodes spécifiques aux objets jquery sont très pratiques à utiliser.

La requête utilisant directement la méthode array ([indice du numéro d'index]) sera convertie en un objet DOM natif si la méthode eq est utilisée, le résultat sera également un objet de requête. Pour convertir un objet natif en objet jquery, il vous suffit de l'envelopper avec $().
Par exemple :

objet jquery en natif> $(#head)[0]

objet natif en jquery> $(objet natif)

jquery Comment lier des événements ? Quelles sont les fonctions de liaison, de dissociation, de délégation, de mise en ligne, d'activation et de désactivation ? Lequel est recommandé ? Comment utiliser on pour lier des événements et utiliser un proxy d'événement ?

Vous pouvez lier des événements dans jquery comme suit :

$("button").click(function() {
    alert(1);
} );
$("button").bind('click', function(e){    console.log(e);
    alert(2);
});
$("button").on('click', function(){    console.log(e);    console.log(this);    console.log($(this));
});
Copier après la connexion

bind Ajouter un événement de liaison à l'élément (il est recommandé d'utiliser on au lieu de bind après la version 1.7)

unbind dissocie un événement d'élément (méthode utilisée avant la version 1.7)

delegate est équivalent à un proxy d'événement (un élément peut être spécifié) pour ajouter un ou plusieurs événements de liaison à l'élément (il est recommandé d'utiliser sur à la place après la version 1.7)

live équivaut à utiliser un proxy d'événement (pour le nœud racine), ajoutant un ou plusieurs événements de liaison à l'élément (aboli après la version 1.7, remplacé par on)

on lorsqu'on ajoute un ou plusieurs gestionnaires d'événements sur l'élément et les sous-éléments sélectionnés (la méthode la plus recommandée)

off est utilisé pour supprimer le gestionnaire d'événements ajouté par la méthode .on()

on La méthode () unifie les méthodes ci-dessus, il est donc désormais recommandé d'utiliser la méthode .on(), qui s'écrit :

$( "#members" ).on( "click" ,"li a" ,function( e ) {} );
Notez ici que la position de l'élément enfant est après le clic, ce qui représente l'utilisation d'un proxy d'événement

Comment jquery afficher/masquer des éléments ? Comment utiliser l'animation jquery ?

Afficher l'élément : $(selector).show(speed,callback);

Masquer l'élément : $(selector).hide(speed,callback);

Afficher et Masquer la bascule : $(selector).toggle(speed,callback);

Fade entrant et sortant :

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //
淡出$(selector).fadeToggle(speed,callback); //
淡入淡出切换$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度
Copier après la connexion

Glisser entrant et sortant :

$(sélecteur) .slideDown (speed,callback); //Glissez vers l'intérieur$(selector).slideUp(speed,callback); //Glissez vers l'extérieur$(selector).slideToggle(speed,callback); //Switch

Le paramètre optionnel speed spécifie la vitesse de masquage/affichage, et peut prendre les valeurs suivantes : "lent", "rapide" ou millisecondes.
Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le masquage ou l'affichage terminé.

jquery animation $(selector).animate({parmas},speed,callback);

params sont des paramètres obligatoires et sont les propriétés CSS de l'animation. La vitesse est un paramètre facultatif qui spécifie la durée de l'effet d'animation, en prenant la valeur lente, rapide ou millisecondes. classback est la fonction exécutée une fois l'animation terminée.

Comment définir et récupérer le contenu HTML à l'intérieur d'un élément ? Comment définir et obtenir le texte intérieur d’un élément ?

Définir ou obtenir du contenu HTML : $(selector).html()

Définir ou obtenir du contenu texte : $(selector).text()

Il existe des paramètres représentant Paramètres, aucun paramètre ne représente l'acquisition.

Comment paramétrer et obtenir le contenu saisi ou sélectionné par l'utilisateur du formulaire ? Comment définir et obtenir les propriétés des éléments ?

Définir ou obtenir le contenu d'entrée de l'utilisateur du formulaire $('#input').val()

Définir ou obtenir le contenu de la sélection du formulaire $('input:checked') ou $(' :checked ')

Définir ou obtenir les attributs de l'élément $("div").attr(e,d) e représente l'acquisition, d représente l'attribut qui doit être défini, et lorsqu'il est vide, il représente acquisition

Obtenez les éléments du groupe avec un certain attribut $('[data-img]') ou $('[data-img="xxx"]')

Cet article explique jquery Événements DOM et pour plus de connaissances connexes, veuillez suivre le site Web chinois de php.

Recommandations associées :

Quelques bases modulaires associées

Quelle est la différence entre innerText et innerHTML des objets dom ?

Quelques questions de base sur JS

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!