jquery change la valeur dom

Dans le processus de développement Web, nous devons généralement ajouter, supprimer, modifier et vérifier des éléments DOM. Parmi eux, changer la valeur des éléments du DOM est une opération courante. jQuery, une bibliothèque JavaScript populaire, fournit une API riche pour modifier la valeur des éléments DOM.

Cet article présentera comment jQuery modifie les valeurs DOM, notamment comment obtenir la valeur d'un élément, comment modifier la valeur d'un élément et comment faire fonctionner plusieurs éléments via des appels en chaîne.

Obtenir la valeur de l'élément

Dans jQuery, nous pouvons obtenir l'élément DOM via le sélecteur, puis obtenir la valeur de l'élément via l'API. Voici quelques API courantes pour obtenir les valeurs des éléments :

1. val() : Obtenez la valeur d'un élément d'entrée, de sélection ou de zone de texte.

Par exemple, récupérez la valeur d'une zone de texte :

var value = $('#input-id').val();

2. text() : récupérez le contenu textuel de l'élément.

Par exemple, obtenez le contenu texte d'un élément p :

var text = $('p').text();

3. html() : Obtenez le contenu HTML de l'élément.

Par exemple, récupérez le contenu HTML d'un élément div :

var html = $('div').html();

4. attr() : récupère la valeur d'attribut de l'élément.

Par exemple, pour obtenir l'attribut src d'un élément img :

var src = $('img').attr('src');

L'API ci-dessus peut également accepter une fonction comme paramètre pour personnaliser la valeur de l'élément. Par exemple :

var value = $('input').val(function(index, value) {
  return value.toUpperCase();
});

Lorsque vous obtenez les valeurs de plusieurs éléments, vous pouvez utiliser la fonction each() pour parcourir les éléments et obtenir leurs valeurs. Par exemple, récupérez la valeur de toutes les zones de texte :

$('input[type="text"]').each(function() {
  console.log($(this).val());
});

Modifier la valeur de l'élément

Obtenir la valeur de l'élément n'est qu'une partie de l'opération de modification du DOM La méthode la plus courante consiste à modifier la valeur de l'élément DOM. Voici quelques API courantes pour modifier les éléments DOM :

1. val() : Définissez la valeur d'un élément d'entrée, de sélection ou de zone de texte.

Par exemple, définissez la valeur d'une zone de texte sur "hello" :

$('#input-id').val('hello');

2. text() : définissez le contenu du texte du élément.

Par exemple, pour définir le contenu texte d'un élément p sur "world" :

$('p').text('world');

3. html() : Définissez le contenu HTML de l'élément.

Par exemple, définissez le contenu HTML d'un élément div sur "

title

":

$('div').html('<h1>title</h1>');

4. attr ( ) : définit la valeur d'attribut de l'élément.

Par exemple, définissez l'attribut src d'un élément img sur "image.jpg" :

$('img').attr('src', 'image.jpg');

Opération sur plusieurs éléments

#🎜 🎜 #Maintenant, nous avons appris comment obtenir et modifier la valeur d'un seul élément DOM. Mais souvent, nous devons effectuer des opérations identiques ou différentes sur plusieurs éléments. jQuery fournit des appels et des filtres chaînés pour fonctionner sur plusieurs éléments.

Utiliser des appels chaînés

Les appels chaînés de jQuery nous permettent d'opérer sur plusieurs éléments dans une seule instruction. Par exemple, changez la couleur d'arrière-plan de tous les éléments h1 en rouge :

$('h1').css('background-color', 'red');

Définissez la valeur de toutes les zones de texte sur vide :

$('input[type="text"]').val('');

Modifiez plusieurs attributs en même temps : #🎜🎜 #

$('img').attr({
  'src': 'image.jpg',
  'alt': 'image'
});

Utiliser des filtres

Un filtre est un sélecteur puissant fourni par jQuery qui peut sélectionner un sous-ensemble d'un ensemble d'éléments. Par exemple, sélectionnez tous les éléments avec la classe "active" :

$('.active')

Sélectionnez le premier élément p :

$('p:first')

Sélectionnez les trois premiers éléments div :

$('div:lt(3)')

# 🎜 🎜#Vous pouvez utiliser des filtres en conjonction avec l'API pour opérer sur les éléments sélectionnés. Par exemple, définissez la valeur de la zone de texte avec la classe « highlight » sur vide :

$('input.highlight:text').val('');

Les exemples ci-dessus montrent différentes utilisations de filtres En vous familiarisant avec l'utilisation des filtres, vous pouvez choisir en toute flexibilité celui requis. opérations.

Résumé

Grâce à l'introduction de cet article, nous avons appris comment jQuery obtient et modifie la valeur des éléments DOM, et comment implémenter plusieurs éléments via des appels en chaîne et des filtres. fonctionner. Ces techniques nous permettent d'exploiter les éléments DOM plus rapidement et d'améliorer l'efficacité du développement. Dans le même temps, apprendre à utiliser jQuery peut également jeter les bases de l’apprentissage d’autres bibliothèques et frameworks JavaScript.

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!