Conversion de dom en objet jquery

Les nœuds DOM sont des éléments très importants lors de l'utilisation de JavaScript pour le développement de pages. DOM (Document Object Model) fait référence à l'analyse de documents HTML ou XML dans une structure arborescente, nous permettant d'utiliser JavaScript pour accéder et manipuler n'importe quel élément du document. Cependant, nous constatons parfois que l’exploitation détaillée des nœuds DOM est très compliquée et difficile à comprendre. C'est pourquoi de nombreux développeurs préfèrent utiliser jQuery. jQuery est une bibliothèque JavaScript largement utilisée, en utilisant jQuery, nous pouvons facilement accéder et manipuler les nœuds DOM.

Dans cet article, je vais vous présenter comment utiliser jQuery pour convertir le DOM en objets jQuery, et comment utiliser les objets jQuery pour diverses opérations et transformations.

Conversion du DOM en objet jQuery

Pour convertir les nœuds DOM en objets jQuery, nous devons utiliser la fonction de sélection de jQuery. Pour utiliser une fonction de sélection, nous devons transmettre le nom de la balise ou le nom de la classe ou l'ID du nœud en tant que paramètre à la fonction. Par exemple, si nous avons le code HTML suivant :

<div class="example" id="myDiv">Hello World!</div>

Nous pouvons le convertir en objet jQuery en utilisant le code suivant :

var myDiv = $('#myDiv');

Ici, nous utilisons jQuery pour convertir le nœud en objet jQuery en utilisant $() puis en passant dans ' #myDiv', il s'agit d'un sélecteur qui recherche dans le document HTML un élément div avec l'identifiant 'myDiv'. On peut alors accéder à l'élément à l'aide de la variable myDiv, qui est désormais un objet jQuery.

En plus de cela, nous pouvons également convertir les nœuds DOM en objets jQuery en :

var myDiv = $('#myDiv')[0];

Ici, nous convertissons d'abord les éléments en objets jQuery en utilisant $('#myDiv'), puis utilisons [0] en qui reconvertit l'original Nœud DOM. De cette façon, nous pouvons accéder aux propriétés JavaScript d'origine et aux méthodes DOM de l'élément.

Conversion entre objets jQuery

Un objet jQuery peut rechercher ou stocker un ou plusieurs éléments et utiliser diverses méthodes et propriétés pour manipuler ces éléments. Si nous devons accéder à un seul élément (comme dans l'exemple ci-dessus), nous pouvons utiliser [0] pour y accéder.

Cependant, si nous voulons accéder à plusieurs éléments, nous devons utiliser un sélecteur qui renvoie plusieurs éléments. De cette façon, nous pouvons convertir plusieurs éléments en objets jQuery en utilisant le code suivant :

var divs = $('.example');

Ici, nous utilisons le sélecteur de classe '.example' qui recherchera dans le document HTML tous les éléments contenant cette classe et les convertira. Renvoyé en tant qu'objet jQuery .

En plus d'utiliser des sélecteurs pour renvoyer des objets jQuery pour plusieurs éléments, nous pouvons également convertir plusieurs éléments en objets jQuery en utilisant la méthode suivante :

var listItems = $('li');
var listItem = $(listItems[0]);

Ici, nous convertissons d'abord tous les éléments li en objets jQuery, puis utilisons listItem[0 ] pour reconvertir le premier élément li en nœud DOM d'origine.

Expansion et contraction des objets jQuery

Nous pouvons également étendre ou contracter des objets jQuery en ajoutant ou en supprimant des éléments DOM. Nous pouvons ajouter des éléments DOM à la page en utilisant :

var newDiv = $('<div>');
newDiv.addClass('newDiv').text('Hello World!');
$('body').append(newDiv);

Ici, nous convertissons d'abord un nouvel élément div en un objet jQuery en utilisant $('

'), puis l'ajoutons en utilisant addClass('newDiv') Un attribut de classe qui ajoute du texte en utilisant text('Hello World!'). Nous utilisons ensuite append(newDiv) pour ajouter le nouvel élément div à l'élément body de la page.

Nous pouvons également supprimer des éléments DOM de la page en utilisant la méthode suivante :

var firstListItem = $('li:first-child');
firstListItem.remove();

Ici, nous trouvons d'abord le premier élément li via le sélecteur, puis utilisons la méthode remove() pour supprimer l'élément de la page.

Résumé

En utilisant jQuery, nous pouvons accéder très facilement aux nœuds DOM. Nous pouvons utiliser des fonctions de sélection pour convertir les nœuds DOM en objets jQuery et les manipuler à l'aide de diverses méthodes et propriétés.

Nous pouvons également convertir plusieurs éléments DOM en objets jQuery et les manipuler à l'aide de diverses méthodes et propriétés. Nous pouvons ajouter ou supprimer des éléments pour agrandir ou réduire les objets jQuery.

En utilisant jQuery, nous pouvons écrire plus facilement du code JavaScript maintenable et compréhensible.

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!

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