Maison > interface Web > Questions et réponses frontales > jquery change la valeur d'entrée d'entrée

jquery change la valeur d'entrée d'entrée

王林
Libérer: 2023-05-18 16:01:08
original
2010 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript très puissante qui fournit de nombreuses fonctions et fonctionnalités pouvant grandement simplifier le développement Web. Une opération courante consiste à modifier la valeur d’entrée d’un élément d’entrée. Dans cet article, nous verrons comment utiliser jQuery pour modifier la valeur d'entrée d'un élément d'entrée.

jQuery Selector

Avant d'utiliser jQuery pour modifier la valeur d'entrée d'un élément d'entrée, nous devons d'abord comprendre le concept de sélecteur. Un sélecteur est une expression utilisée pour sélectionner des éléments HTML. Nous pouvons sélectionner des éléments HTML par nom d'élément, classe, ID, attributs, etc.

Voici quelques sélecteurs jQuery courants :

  1. Sélecteur d'élément : sélectionnez les éléments par nom d'élément, par exemple : $("input")
  2. Sélecteur de classe : sélectionnez les éléments par nom de classe, par exemple : $( ".class ")
  3. Sélecteur d'ID : sélectionnez les éléments par ID, par exemple : $("#id")
  4. Sélecteur d'attribut : sélectionnez les éléments par attributs d'élément, par exemple : $("[name='username' ]")

Modifier la valeur d'entrée de l'élément d'entrée

De manière générale, nous pouvons modifier la valeur de l'élément d'entrée via la fonction val(). La fonction val() est une fonction fournie par jQuery pour obtenir et définir les valeurs des éléments. Voici un exemple de modification de la valeur de la zone de saisie :

Code HTML :

<input id="username" type="text" value="Hello World!">
Copier après la connexion

jCode de requête :

$("#username").val("New Value");
Copier après la connexion

Dans le code ci-dessus, nous sélectionnons l'élément d'entrée avec l'identifiant du nom d'utilisateur via le sélecteur d'ID et passons . val() La fonction change sa valeur en "Nouvelle valeur".

Modifier dynamiquement la valeur d'entrée de l'élément d'entrée

Parfois, nous devons modifier dynamiquement la valeur d'entrée de l'élément d'entrée par la valeur d'un autre élément. Par exemple, nous pouvons attribuer la valeur d'une zone de texte à une autre zone de texte après avoir cliqué sur un bouton. Voici un exemple :

Code HTML :

<input id="username1" type="text" value="Old Value">
<input id="username2" type="text" value="">

<button id="btn">Click me</button>
Copier après la connexion

Code jQuery :

$("#btn").click(function() {
  var oldVal = $("#username1").val();
  $("#username2").val(oldVal);
});
Copier après la connexion

Dans le code ci-dessus, nous avons ajouté un gestionnaire d'événements de clic pour le bouton via la fonction click(). Lorsque vous cliquez sur le bouton, il obtient la valeur de l'élément avec l'identifiant nom d'utilisateur1, puis l'attribue à l'élément avec l'identifiant nom d'utilisateur2.

Plus d'opérations

En plus de la fonction .val(), jQuery fournit également de nombreuses autres fonctions qui peuvent être utilisées pour modifier la valeur d'entrée de l'élément d'entrée. Voici quelques fonctions couramment utilisées :

  1. fonction text() : utilisée pour définir le contenu en texte brut de l'élément d'entrée, par exemple : $("#username").text("Nouveau texte"); () fonction : utilisée pour définir le code HTML sur la valeur de l'élément d'entrée, par exemple : $("#username").html("
  2. New HTML
  3. ");append() fonction : utilisée pour ajouter du contenu à la fin de l'élément d'entrée, Par exemple : $("#username").append("
  4. Appended Text
  5. ");fonction prepend() : utilisée pour ajouter du contenu au début de l'élément d'entrée, par exemple : $("#username").prepend( "
  6. Prepended Text
  7. ");
  8. Résumé

Cet article explique comment utiliser jQuery pour modifier la valeur d'entrée de l'élément d'entrée, ainsi que certaines fonctions et sélecteurs couramment utilisés. . La maîtrise de ces compétences peut permettre aux développeurs d'accomplir plus facilement les tâches de développement Web et d'améliorer l'efficacité du travail.

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!

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