Maison >interface Web >js tutoriel >Connaissance de base de jQuery introduction_jquery

Connaissance de base de jQuery introduction_jquery

WBOYoriginal: 2016-05-16 16:20:281251parcourir

Fonctions et comparaison de la bibliothèque JavaScript

Afin de simplifier le développement de JavaScript, certaines bibliothèques JavsScript sont nées. Les bibliothèques JavaScript encapsulent de nombreux objets et fonctions utilitaires prédéfinis. Il peut aider les utilisateurs à créer des pages client riches avec des fonctionnalités Web 2.0 qui ont des interactions difficiles et est compatible avec les principaux navigateurs

Actuellementles bibliothèques JavaScript populairessont :

Introduction à jQuery

jQuery est une autre excellente bibliothèque JavaScript après Prototype

Philosophie jQuery : Écrivez moins, faites plus. Les avantages sont les suivants :

Léger

Sélecteur puissant

Excellente encapsulation des opérations DOM

Mécanisme de gestion des événements fiable

Ajax parfait

Excellente compatibilité avec les navigateurs

Mode de fonctionnement de la chaîne

……

jQuery : HelloWorld

Objet jQuery

L'objet jQuery est l'objet généré en encapsulant l'objet DOM via jQuery ($())

Les objets jQuery sont uniques à jQuery. Si un objet est un objet jQuery, alors il peut utiliser les méthodes de jQuery : $("#persontab").html();

L'objet jQuery ne peut utiliser aucune méthode de l'objet DOM, et l'objet DOM ne peut utiliser aucune méthode de jQuery

Convention : Si vous obtenez un objet jQuery, ajoutez $ devant la variable

var $variable = objet jQuery

variable var = objet DOM

Objet DOM converti en objet jQuery

Pour un objet DOM, il vous suffit d'envelopper l'objet DOM avec $() (l'objet jQuery est l'objet généré en encapsulant l'objet DOM via jQuery), et vous pouvez obtenir un objet jQuery.

Après la conversion, vous pouvez utiliser les méthodes de jQuery

Convertir un objet jQuery en objet DOM

Les objets jQuery ne peuvent pas utiliser de méthodes dans le DOM, mais si jQuery n'encapsule pas les méthodes souhaitées et que vous devez utiliser des objets DOM, il existe deux méthodes comme suit :

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

(2) Utilisez la méthode get(index) dans jQuery pour obtenir l'objet DOM correspondant

Sélecteur jQuery

Les sélecteurs sont le fondement de jQuery. Dans jQuery, le traitement des événements, la traversée du DOM et les opérations Ajax reposent tous sur des sélecteurs

Avantages des sélecteurs jQuery :

Méthode d'écriture simple

Mécanisme complet de gestion des événements

Sélecteur de base

Le sélecteur de base est le sélecteur le plus couramment utilisé dans jQuery, et c'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 (l'identifiant ne peut être utilisé qu'une seule fois dans une page Web et la classe). est autorisé à être utilisé à plusieurs reprises).

Exemple de sélecteur de base

Changez la couleur d'arrière-plan de l'élément portant l'identifiant un en # bbffaa

Changez la couleur d'arrière-plan de tous les éléments avec la classe mini en #bbffaa

Changez la couleur d'arrière-plan de tous les éléments nommés

en #bbffaa

Changez la couleur d'arrière-plan de tous les éléments en #bbffaa

Changez la couleur d'arrière-plan de tous les éléments et de l'élément portant l'identifiant deux en # bbffaa

Sélecteur de niveau

Si vous souhaitez obtenir des éléments spécifiques via la relation hiérarchique entre les éléments DOM, tels que les éléments descendants, les éléments enfants, les éléments adjacents, les éléments frères, etc., vous devez utiliser des sélecteurs hiérarchiques.

Remarque : le sélecteur ("prev ~ div") ne peut sélectionner que les éléments frères après l'élément "# prev" ; alors que la méthode siblings() dans jQuery n'a rien à voir avec les positions avant et arrière, tant qu'elle l'est. un nœud frère, il peut sélectionner

Exemple de sélecteur hiérarchique

Changez la couleur d'arrière-plan de tous les

dans en # bbffaa

Changez la couleur d'arrière-plan de la sous-section interne

en # bbffaa

Changez la couleur d'arrière-plan du prochain

avec l'identifiant un en # bbffaa

Changez la couleur d'arrière-plan de tous les éléments frères

derrière l'élément portant l'identifiant deux en # bbffaa

Changez la couleur d'arrière-plan de tous les éléments

frères et sœurs de l'élément portant l'identifiant deux en # bbffaa

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

Article précédent：Explication détaillée du filtre jQuery selector_jqueryArticle suivant：Explication détaillée du filtre jQuery selector_jquery

Articles Liés

Voir plus