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

This article mainly explains the "jQuery event handling case analysis", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "jQuery event handling case analysis"!

1. Event handling of jQuery 1. Page loading event

$(document) .ready ()-onload

2. Event binding (bind)

Bind (type, [data], fn)

Type: indicates the event type (click, mouseover, mouseout...)

[data]: optional parameter that represents additional data passed to the event object

Fn: is a function (event handler) that executes when an event occurs

Bind an event handler function for a specific event (such as click) for each matching element

Document determines $(function () {$('# btn') .bind ('click',function () {/ / can bind other events to the button alert (' event binding')}))

Display effect: after clicking the OK button, a pop-up window appears

Document

$(function () {/ / change the img image $('img'). Bind (' mouseover',function () {$(this). Attr ({src:'../img/2.jpg'}) / / this represents the element img}) $('img'). Bind (' mouseout') Function () {$(this) .attr ({src:'../img/1.jpg'})})

Display effect: when the mouse hovers over a picture, a picture is displayed. When the mouse leaves this picture, another picture is displayed. Alternating over and over again, without limitation.

3. Anti-binding event (unbind)

Unbind ([type], [data]): delete bound events

(1) No parameters: delete all events bound on the element

(2) with parameter: [type] indicates the event type

Document

$(function () {/ / change the img image $('img'). Bind (' mouseover',function () {$(this). Attr ({src:'../img/2.jpg'}) / / this represents the element img}) $('img'). Bind (' mouseout') Function () {$(this) .attr ({src:'../img/1.jpg'})}) $('img') .unbind (' mouseout') / / unbind})

Display effect: after the mouse leaves the picture, the picture will not become 1.jpg

4. One-time event binding (one)

Bound events can only be executed once

Document

$(function () {/ / change the image of img by hovering and leaving events $('img') .bind (' mouseover') Function () {$(this) .attr ({src:'../img/2.jpg'}) / / this represents the element img}) / / one-time event binding $('img') .one (' mouseout') Function () {$(this) .attr ({src:'../img/1.jpg'})})

Display effect: after the mouse leaves the picture, the picture will become 1.jpg, but this change will only be performed once. The second time you leave the picture, it will not become 1.jpg.

5. Simulate mouse hover (hover) Document $(function () {$('div') .hover (function () {$(this) .css (' backgroundColor') 'pink')}) Document $(function () {$(' div') .hover (function () {$(this) .css ('backgroundColor','pink')}))

Display effect: when the mouse hovers over the picture, the picture changes from red to pink. It doesn't change back to its original red when you leave the picture.

Thank you for your reading, the above is the content of "jQuery event handling case analysis". After the study of this article, I believe you have a deeper understanding of the event handling case analysis of jQuery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.