Shulou(Shulou.com)06/01 Report--

The editor will share with you what are the common events in jQuery. I hope you will get something after reading this article. Let's discuss it together.

I. Classification of jQuery events

JQuery event is an encapsulation of JavaScript event. Commonly used events are classified as follows:

1. Basic event

Window event. Mouse event. Keyboard event. Form event.

2. A compound event is a combination of multiple events

Hover the mouse cursor. Continuous mouse clicks.

II. Mouse events

Mouse events are events that occur when a user moves or clicks a mouse over a document. Common mouse events are:

III. Keyboard events

An event occurs every time a user presses or releases a key on the keyboard. Common keyboard events are as follows:

IV. Form events

When the element gains focus, the focus () event is triggered, and when the focus is lost, the blur () event is triggered.

The submit () event is triggered when the form is submitted.

V. Comprehensive examples

Description of requirements:

1. When the user name input box gets focus, the background color of the input box is light blue, and when it loses focus, it reverts to white background color.

2. The font becomes bold when the mouse is moved to the login button and returns to normal when it is removed.

3. The form submission event is triggered when you hit the "enter" key of the keyboard.

Code:

Event demonstration example # login {width: 400px; height: 250px; background-color: # f2f2f2; border:1px solid # DDDDDD; padding: 5px;} # login fieldset {border: none; margin-top: 10px } # login fieldset legend {font-weight: bold;} # login fieldset p {display: block; height: 30px;} # login fieldset p label {display: block; float:left; text-align: right; font-size: 12px; width: 90px Height: 30px; line-height: 30px;} # login fieldset p input {display: block; float:left; border: 1px solid # 999; width: 250px; height: 30px; line-height: 30px;} # login fieldset p input.code {width: 60px } # login fieldset p img {margin-left: 10px;} # login fieldset p a {color: # 057BD2; font-size: 12px; text-decoration: none; margin: 10px;} # login fieldset p input.btn {background: url (". / images/login.gif") no-repeat Width: 98px; height: 32px; margin-left: 60px; color: # ffffff; cursor: pointer;} # login fieldset p input.input_focus {background-color: # BEE7FC } $(function () {/ / focus event of the user name input box $("input [name = 'member']") .focus (function () {$(this) .addClass ("input_focus");}) / / user name loses focus $("input [name = 'member']") .blur (function () {$(this) .removeClass ("input_focus");}) / / Mouseover event $(".btn") .mouseover (function () {$(this) .css ("font-weight", "bold");}); $(".btn") .mouseout (function () {$(this) .css ("font-weight", "normal");}) / / keyboard event. Hit enter to submit the form. The value of keyCode represents different keyboard keys / / js needs to distinguish the compatibility of keyCode (IE) and which (FF). Event.keyCode | | event.which is used to consider compatibility $(document) .keypress (function (e) {if (e.keyCode==13) {/ / $("# login") .submit () / / simulate form submission alert ("trigger form submission event");});}); user login

User name:

Password:

CAPTCHA:

Get another one.

Register | forget your password?

Effect:

After reading this article, I believe you have a certain understanding of "what are the common events in jQuery". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.