jquery changes input input value

jQuery is a very powerful JavaScript library that provides many functions and features that can greatly simplify web development. One common operation is to change the input value of an input element. In this article, we will look at using jQuery to change the input value of an input element.

jQuery Selector

Before using jQuery to change the input value of an input element, we first need to understand the concept of a selector. A selector is an expression used to select HTML elements. We can select HTML elements by element name, class, ID, attributes, etc.

The following are some common jQuery selectors:

1. Element selector: Select elements by element name, for example: $("input")
2. Class Selector: Select elements by class name, for example: $(".class")
3. ID selector: Select elements by ID, for example: $("#id")
4. Attribute selector: Select elements through element attributes, for example: $("[name='username']")

Change the input value of the input element

Generally speaking, We can change the value of the input element through the val() function. The val() function is a function provided by jQuery for getting and setting element values. The following is an example of changing the value of the input box:

HTML code:

<input id="username" type="text" value="Hello World!">

jQuery code:

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

In the above code, we selected the id through the ID selector is the input element of username, and its value is changed to "New Value" through the .val() function.

Dynamically change the input value of the input element

Sometimes, we need to dynamically change the input value of the input element through the value of another element. For example, we can assign the value of one text box to another text box after clicking a button. The following is an example:

HTML code:

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

<button id="btn">Click me</button>

jQuery code:

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

In the above code, we added a click event to the button through the click() function handler. When the button is clicked, it gets the value of the element with id username1 and then assigns it to the element with id username2.

More operations

In addition to the .val() function, jQuery also provides many other functions that can be used to change the input value of the input element. The following are some commonly used functions:

1. text() function: used to set the plain text content of the input element, for example: $("#username").text("New text");
2. html() function: used to set HTML code to the value of the input element, for example: $("#username").html("New HTML");
3. append() function: used to add content to the end of the input element, for example: $("#username").append(" Appended Text");
4. prepend( ) function: used to add content to the beginning of the input element, for example: $("#username").prepend(" Prepended Text");

Summary

This article introduces how to use jQuery to change the input value of the input element, as well as some commonly used functions and selectors. Mastering these skills can make it easier for developers to complete web development tasks and improve work efficiency.

The above is the detailed content of jquery changes input input value. For more information, please follow other related articles on the PHP Chinese website!