Example learning of DOM operations and events in jquery. Imitation of the prompt effect of the Yahoo mailbox login box_jquery

But it feels very boring to write like this.

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

So I will find a few examples that I think are practical and introduce them. By the way, I will introduce the operations and events used in it.

html code:



jquery code:

Copy code The code is as follows:

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

The effect achieved is that when the address box gets the mouse focus, the value in the address box is cleared. When mouse focus is lost, the address box returns to its default settings.

Introduce the jquery events used here:

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

By the way, let’s introduce other mouse events. mouseover() is triggered when the mouse moves into the object. mouseout() Triggered when the mouse moves out of the object. mousemove() is triggered when the mouse moves in the object.

The jquery dom operation used:

val() is to get the value of the element value, and can also set the value of the element value. This method of obtaining and setting within a function is very common in jquery

classes, including html(), text(), heigth(), width(), css(), attr ()etc.

Here we distinguish between html() and text()

html() is relative to the html code in the object, while text() is just the text content in the object

Example Example

Difference

$('p').html(). The result is Difference

$('p').text(). The result is Difference

That’s it for the introduction and expansion of this example