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

王林
王林original
2023-05-18 16:01:082005parcourir

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!">

jCode de requête :

$("#username").val("New Value");

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>

Code jQuery :

$("#btn").click(function() {
  var oldVal = $("#username1").val();
  $("#username2").val(oldVal);
});

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!

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