jquery gets and sets the value of the HTML element

jquery gets and sets the value of the HTML element

Concise Modern Magic Library release date: 2011-07-07 10:16:13 20,481 reads

Server June spent a total of 13.221 MS 6 database queries, and strive to provide you with this page. Val () method

This method is similar to the Value property in JavaScript and can be used to set and get the values of the meta-cable. Whether the element is a text box or a drop-down list is sufficient, it can return the value of the element. If the element is multi-select, an array containing all the selected values is returned. Let's take a look at the following effect demo:

Welcome to the Concise Modern Magic Library

• Easy-to-understand PHP magic
• Easy-to-understand JavaScript magic
• Easy-to-understand jquery magic

The implementation of the above effect is simple, such as the following code:

$ (function () {$ ("#btn_1"). Click (function () {//Get the value of the button "alert ($ (this). Val ());}); $ ("#btn_2"). Click (function () {//Set the value of the button for $ (this). val ("I've been clicked!");});

For example, the mailbox login interface of the website, by default, the email Address text box and the Mailbox Password box are respectively "Please enter the email address" and "Please enter the mailbox password" prompt. When you focus your mouse on the mailbox Address text box, the "Please enter your email address" text in the text box will be emptied.

If you do not enter anything in the Mailbox Address box at this point, and focus the mouse focus directly to the password input box, you will find the prompt text inside the password box is emptied, and the email address input box prompt is restored.

How to achieve the above effect?

1th Step: Design The basic structure of the Web page. Add two text boxes to the page, set IDs for two text boxes, and set their default values to "Please enter your email address" and "Please enter your email password".

<div><input type= "text" id= "address" value= "Please enter your email address"/>   <br/><br/><input type= "text" id= "Password" value= "Please enter your email password"/>  <br/><br/><input type= "button" value= "Login"/></div>

2nd step: Operate on the "Address box".

When the Address box gets the mouse focus, if the value of the Address box is "Please enter an e-mail address", the value in the Address box is emptied. You can use the following jquery code:

The Address box gets the mouse focus $ ("#address"). focus (function () {      ///Get the value of the current text box     var txt_value =  $ (this). Val ();    if (txt_value== "Please enter email address") {//if eligible, empty the text box contents          $ (this). Val ("");              }    );

When the Address box loses the mouse focus, if the value of the Address box is empty, set the value of the Address box to clear enter the mailbox address. You can use the following jquery code:

The Address box loses the mouse focus   $ ("#address"). blur (function () {     ///Gets the value of the current text box     var txt_value =  $ (this). Val ();    if (txt_value== "") {   //If the condition is met, set the content     $ (this). val ("Please enter your email address");}    )

The Ps:focus () method is equivalent to the onfocus () method in JavaScript, which is used to handle events when the focus is obtained. The blur () method is equivalent to the onblur () method in JavaScript, which acts as an event when the focus is lost.

3rd step: The "Password box" operation, the implementation process and "address box" the same. At this point, similar to the Yahoo Mail login box prompt effect is complete.

You can also use the DefaultValue property of the form element to implement the same functionality, and the DefaultValue property contains the initial value of the form element. The code is as follows:

$ ("#address"). focus (function () {         //Address box gets the mouse focus   var txt_value =  $ (this). Val ();   Gets the value of the current text box   if (txt_value==this.defaultvalue) {     $ (this). Val ("");              Empty the contents of the text box}) if the condition is met    ;    $ ("#address"). blur (function () {        //Address box loses the mouse focus   var txt_value =  $ (this). Val ();   Gets the value of the current text box   if (txt_value== "") {   $ (this). Val (this.defaultvalue);//If a condition is met, set content   }    })

Note: This points to the current text box, and "This.defaultvalue" is the default value for the current text box. The above example shows that the Val () method can not only set the value of the element, but also the value of the element.

jquery gets and sets the value of the HTML element