JQuery learning summary of jQuery events

First, let's look at a useful example to deepen our previous knowledge, some of which has appeared in the past.

<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" />

<input type="button" id="btnHide" value=" Hidden pictures " />

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

When you click on the hidden image, the image of the Google logo will be hidden for one second. Here we use the hide() method, and of course we don't specify the time, so if we want to display the image, we should use the show() method.

Now we begin what this article is about: events. As you may have noticed, events have been used in a number of ways. Document.ready is an event. When the document is ready, it tells jQuery that it is ready to execute the event.

In the past, we often saw:

<div onclick="alert(' Rent your ');" id="divRent"> In Beijing, </div>

That's the way to write it. From now on, you should get rid of that. Js code and HTML separation, so that the page clean, more efficient. Now, this is going to be:

jQuery("#divRent").click(function() {
  alert(" Rent your ");
});

Since it is a summary, I will record as many events as possible with examples as I did in the previous three articles, so that you can refer to them when you need to.

The following are what I encountered in the learning process:

1. One () event, which binds the event to be executed once

<div id="divRent"> People in Beijing </div>

jQuery("#divRent").one("click", function() {

    alert(" Rent your ");

});

The above binding one click event, the second click, no longer pop up prompt.

2. Focus () and blur() events

<input id="tTest" type="text" />

jQuery("#tTest").focus(function() { 

    jQuery(this).css("background", "yellow"); 

}).blur(function() { 

    jQuery(this).css("background", "white"); 

});

This example is practical to the chain method, I believe it is not difficult to understand. If you are not familiar with working with jQuery CSS styles, you can look at the second summary. This example changes the background color to yellow when the focus is on the text box and back to white when it leaves. The purpose of this is to improve the user experience, which I personally feel.

Keydown () and keyup() events

<input type="text" id="tTest" /> 

<label id="lResult"></label>

jQuery("#tTest").keyup(function() { 

    jQuery("#lResult").html(jQuery(this).val()); 

}); 

When the key pops up (it feels bad to express ^_^ here), the content in the text box will be displayed in the label. See the third article summary in the properties section of the action element.

4. Submit () event

<form id="form2" runat="server">

    <input id="text" type="text" /> 

    <asp:button id="btnTest" onclick="btnTest_Click" runat="server" text=" test "> 

    </asp:button> 

</form>

jQuery("#form1").submit(function() { 

    if (jQuery.trim(jQuery("#text").val()).length == 0) { 

        return false; 

    } 

});

As you can see, this example USES a server control. It's essentially the same, and you end up with a form submission. When the button is clicked, the form is submitted. If the content of the text box is empty, false is returned, and no commit is made. Otherwise, commit. Such applications are ubiquitous in web development.

5. Hover () event

<div id="divHover">hover me</div>

jQuery("#divHover").hover(function() { 

    jQuery(this).css("background", "yellow"); 

}, function() { 

    jQuery(this).css("background", "red"); 

});

When the mouse moves over the div, the div background color becomes yellow and the background color becomes red when removed.

The above several kinds of events are more common, is also used more. Of course, this article is only a small part of the learning problems encountered in the jQuery documentation.