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:

c2927140466346f8989b95bca6593c33
7c404b2586b4b5aabaf89de701321ce1

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:

1d937ed17e4e0fda79c3c148530f0eb8In Beijing16b28748ea4df4d9c2150843fecfba68

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:

220dad31e9953ce1caefcfa84705a250People are in Beijing16b28748ea4df4d9c2150843fecfba68

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:

d98f0c487087b05cd3d419ae72cd7696

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:

4b2764a3c367b627d6153bdf397b9c24
98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

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:

21450525e974e9be578136fc32da3f7c
a9aafc0e48dc1e40a299f1198237c1bc
976559bbc6f1fbf8c3657ed3cc58e825
1265af6dee180289cdd7fb3022456895
f5a47148e367a6035fd7a2faa965022e

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:

7f0eda05e93e41d7a8baaa89a79f95f9hover me16b28748ea4df4d9c2150843fecfba68

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.