Examples of DOM operations and events in jquery Learn how to do Yahoo Mailbox Login box prompts effect _jquery

Source: Internet
Author: User
But it feels so boring to write.

The advantage of jquery is that simple code can lead to a better user experience.

So just look for a few examples of what I feel practical, and introduce them. Incidentally, introduce the operations and events used therein.

HTML code:

<input type= "text" id= "address" value= "Please enter the mailbox"/>

jquery Code:
Copy Code code as follows:

$ (document). Ready (function () {
$ (' #address '). focus (function () {
var add_value=$ (this). Val ();
if (add_value== "Please enter a mailbox address") {
$ (this). Val ("");
}
})
$ (' #address '). blur (function () {
var add_value=$ (this). Val ();
if (add_value== "") {
$ (this). val ("Please enter your email address");
}
})
});

The effect of the implementation is that when the address box gets the mouse focus, the value in the Address box is emptied. When the mouse focus is lost, the Address box restores the default settings.

Describes the jquery events used here:

Focus () is triggered when the jquery object gets the mouse Spotlight, blur () is triggered when the jquery object loses the mouse focus

Incidentally, the events of the other mouse are introduced. MouseOver () is a mouse-moving object trigger. Mouseout () mouse moves out of the object trigger. MouseMove () is triggered when the mouse is moved in the object.

The DOM operation of jquery used:

Val () is the value that gets the element value, or it can set the value of the element value. This method of getting and setting within a function is common in jquery

The class is also HTML (), text (), Heigth (), Width (), CSS (), attr (), and so on.

Here is the distinction between HTML () and text ()

HTML () is relative to the HTML code in the object, and text () is just the text content in the object

Give an example <p><strong> difference </strong></p>

$ (' P '). html (). The result is <strong> difference </strong>

$ (' P '). Text (). The result is the difference

This is the introduction and extension of this example.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.