jQuery learning summary jQuery events_jquery

First, let’s look at a useful example to deepen our previous knowledge, some of which have appeared previously.

Copy code The code is as follows:

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

When you click Hide Image, the Google logo image will be hidden in one second. Here we use the hide() method. Of course, we don’t need to specify the time. If we want to display pictures, we should use the show() method. Isn’t it great?

Now let’s start with the main content of this article: events. You may have noticed that events have been used in many places above. Among them, document.ready is an event. When the document is ready, it tells jQuery that the event can be executed. Mouse movement, clicks, text box focus leaving, etc. are all events.

In the past, we often saw:

Copy code The code is as follows:

In Beijing

This way of writing. From now on, everyone should abandon this way of writing. Realize the separation of js code and html, so that the page is cleaner and more efficient. The current writing method will become:

jQuery("#divRent").click(function() {
  alert("租房贵");
});

Since this is a summary, I will use examples to record as many event methods as possible like the first three articles, so that everyone can refer to them when needed.

The following is what I encountered during my study:

1. one() event, bind an event to be executed once

Copy code The code is as follows:

People are in Beijing

Copy code The code is as follows:

jQuery("#divRent").one("click", function() {
alert("renting is expensive");
});

The above is bound to a click event, and no prompt will pop up when clicked for the second time.

2. focus() and blur() events

Copy code The code is as follows:

Copy code The code is as follows:

jQuery("#tTest").focus(function() {
jQuery(this).css("background", "yellow");
}).blur(function() {
jQuery(this).css("background", "white");
});

This example uses the chain writing method, I believe it is not difficult to understand. If you are not familiar with jQuery operating css styles, you can read the second summary. In this example, when the focus is on the text box, the background color changes to yellow, and then changes back to white when it leaves. The purpose of this is to improve user experience, I personally feel.

3. keydown() and keyup() events

Copy code The code is as follows:

Copy code The code is as follows:

jQuery("#tTest").keyup(function() {
jQuery("#lResult").html(jQuery(this).val());
});

When the key pops up (it feels hard to express here^_^), the content in the text box will be displayed in the label. For the part about operating element attributes, you can read the third summary.

4. submit() event

Copy code The code is as follows:

Copy code The code is as follows:

jQuery("#form1").submit(function() {
If (jQuery.trim(jQuery("#text").val()).length == 0) {
         return false;
}
});

As you can see, this example uses server controls. It's essentially the same thing, ultimately a form submission occurs. When the button is clicked, the form is submitted. If the content of the text box is empty, return false and do not submit; otherwise, submit. Such applications can be seen everywhere in web development.

5. hover() event

Copy code The code is as follows:

hover me

Copy code The code is as follows:

jQuery("#divHover").hover(function() {
jQuery(this).css("background", "yellow");
}, function() {
jQuery(this).css("background", "red");
});

When the mouse moves over the div, the background color of the div turns to yellow, and when the mouse moves out, the background color turns to red.

The above events are relatively common and commonly used. Of course, this article summarizes only a small part. If you encounter problems during learning, you have to use the jQuery documentation to consult it.