jquery Chapter Fourth

Events and animations in jquery

I. Events in jquery

1. Loading the DOM

(1) Timing of execution

$ (document). The Ready () method has similar functionality to the Window.onload method, but there is a difference in the timing of the execution. The Window.onload method is executed when all elements in the Web page are fully loaded into the browser, while $ (document). Ready () is called when the DOM is fully in place. It is also important to note that if the DOM is ready, the $ (document) method is called, and it is possible that the associated file for the element has not been downloaded at this time. For example, the image-related HTML download is complete, and the DOM tree has been parsed, but the picture has not been loaded, you cannot get the height and width of these properties. You can therefore use another method of loading the page: Load () to resolve the problem. The load () method binds a handler function in the OnLoad event. If the handler is bound to a Window object, it fires after all content has been loaded, and if the handler is bound to the element, it is triggered after the element's contents have been loaded. The code is as follows:

$ (window). Load (function () {

Writing code

})

Equivalent to

Window.onload = function () {

Writing code

}

(2) Multiple use

Suppose there are 2 functions in the Web page, the JavaScript code is as follows:

function One () {

Alert ("one");

}

function () {

Alert ("both");

}

Once the page has finished loading, call the one function and the two functions by using the following JavaScript code:

Window.onload = one;

Window.onload = both;

However, when you run the code, you find that only the string "Two" dialog box appears. The reason that the string "One" dialog box cannot be ejected is that JavaScript's onload event can only hold a reference to a function at a time, and it automatically overwrites the previous function with the following function, so you cannot add new behavior to the existing behavior. But jquery's $ (document). Ready () method can handle two of behaviors triggered sequentially. For example, the following jquery code:

function One () {

Alert ("one");

}

function () {

Alert ("both");

}

$ ("document"). Ready (function () {

One ();

})

$ ("document"). Ready (function () {

Both ();

});

After you run the code, the string "One" dialog box pops up, and the string "One" dialog box pops up.

(3) Shorthand method

$ (document). Ready (function () {

Writing code

})

Can be simply written as:

$ (function () {

Writing code

})

In addition, $ (document) can also be abbreviated to $ (). When $ () is not with a parameter, the default parameter is "document" so it can be abbreviated as:

$ (). Ready (function () {

Writing code

})

2. Event Binding

After the document is loaded, if you intend to do something for the element binding event, you can use the bind () method to match the binding of the element for a particular event, the invocation format of the bind () method is:

Bind (Type [, data], FN);

The bind () method has 3 parameters:

The 1th one is the event type.

The 2nd parameter is an optional parameter, which is the extra data object passed to the event object as the value of the Event.data property.

The 3rd parameter is the handler function used to bind.

(1) Basic effect

Here's an example of how the bind () method is used. If you have a FAQ in your page, click the title link to display the content. The HTML code is as follows:

<div id = "Panel" >

<div class = "Content" >

jquery is after prototype has a good ...

</div>

</div>

jquery Code:

$ (function () {

$ ("#panel h5.head"). Bind ("click", Function () {

$ (this). Next (). Show ();

})

});

Run the code, click the title "link", and the "content" is expanded. As with Ready (), bind () can also be called multiple times.

(2) Enhance the effect

Let's do this in the example above: Click Title once, show content, click Title once, and hide content.

The jquery code is as follows:

$ (function () {

$ ("#panel h5.head"). Bind ("click", Function () {

var $content = $ (this). Next ();

if ($content. Is (": visible")) {

$content. Hide ();

} else {

$content. Show ();

}

})

})

(3) Changing the type of the bound event

In the example above, the event type that is bound to the element is clicked, which triggers the binding event when the user clicks, and then executes the function code of the event. Now replace the event type with the MouseOver and Mouseout,jquery code as follows:

$ (function () {

$ ("#panel h5.head"). Bind ("MouseOver", function () {

$ (this). Next (). Show ();

}). bind ("Mouseout", function () {

$ (this). Next (). Hide ();

})

})

After running the code, when the mouse hovers over the title, the content is displayed, and the content is hidden when the mouse moves out of the title.

(4) Shorthand binding event

Events such as click, MouseOver, mouseout are often used in programs, and jquery provides a shorthand approach to this. The shorthand method is similar to the bind () method, with the same effect, and the only difference is that it reduces the amount of code.

For example, change the example above to use the shorthand binding event in the following code:

$ (function () {

$ ("#panel h5. Head"). MouseOver (function () {

$ (this). Next (). Show ();

}). mouseout (function () {

$ (this). Next (). Hide ();

})

})

3. Synthetic Events

jquery has two synthetic event--hover () methods and Toggle () methods, similar to the Ready () method described previously, the hover () method and the toggle () method are all methods of jquery customization

(1) Hover () method

The syntax structure of the hover () method is:

Hover (Enter.leave);

The hover () method simulates a cursor hover event. When the cursor moves over an element, the specified 1th function (enter) is triggered, and the specified 2nd function (leave) is triggered when the cursor moves out of the function;

Rewrite the above example to use the hover () method, the jquery code is as follows:

$ (function () {

$ ("#panel h5.head"). Hover (function () {

$ (this). Next (). Show ();

},function () {

$ (this). Next (). Hide ();

})

})

(2) Toggle () method

The syntax structure of the toggle () method is:

Toggle (fn1,fn2,... FnN);

The toggle () method simulates a mouse continuous click event. The 1th click Element, triggering the specified 1th function (FN1), and when you click the same element again, the specified 2nd function (fn2) is triggered, and if there are more functions, it is triggered sequentially until the last one.

Using the Toggle () method to rewrite the above example, the jquery code is as follows:

$ (function () {

$ ("#panel h5.head"). Toggle (function () {

$ (this). Next (). Show ();

},function () {

$ (this). Next (). Hide ();

})

})

(3) Enhance the effect again

If you want the user to highlight the title after clicking the title, the implementation is to first define a highlighted style in the CSS, with the following CSS code:

. highlight{background: #FF3300;}

Then write the following jquery code:

$ (function () {

$ ("#panel h5.head"). Toggle (function () {

$ (this). AddClass ("highlight");

$ (this). Next (). Show ();

},function () {

$ (this). Removeclass ("highlight");

$ (this). Next (). Hide ();

})

})

4. Event bubbling

(1) Event bubbling continues to rise to the top of the DOM in the same hierarchy as blisters.

(2) event bubbling causes an element event that is not wanted to be triggered, and blocking event bubbling will limit the scope of the event.

It is very simple to use event objects in your program, just add a parameter to the function, and the jquery code is as follows:

$ ("element"). Bind ("click", Function (event) {

......

}) ;

Stopping event bubbling can prevent event handlers for other objects in the event from being executed, and in jquery you can use the Stoppropagation () method to stop event bubbling. The code is as follows:

$ (function () {

$ (' span '). BIND ("click", Function (event) {

var txt = $ (' #msg '). HTML () + "<p> inner span element clicked </p>";

$ (' #msg '). html (TXT);

Event.stoppropagation ();

});

})

Elements in a Web page are made by their own default behavior, for example, when a hyperlink is clicked, the form commits after clicking the Submit button, and sometimes the default behavior of the element needs to be blocked.

In jquery, the Preventdefault () method is provided to block the default behavior of the element. The code is as follows:

5. Properties of the Event object

(1) Event.type

The function of this method is to obtain the type of event

$ ("a"). Click (Function (event) {

alert (Event.type);

return false;

})

The above code will output when it is run:

"Click"

(2) Event.preventdefault () method

The function of this method is to block the default behavior, which is not valid in IE.

(3) Event.stoppropagation () method

The function of this method is to stop event bubbling. is not valid in IE.

(4) Event.target

Gets the triggering event element when the method is used.

$ ("A[href = ' http://google.com ']"). Click (function () {

var TG = Event.target;

alert (TG.HREF);

return false;

})

The above code will output when it is run:

"Http://google.com"

(5) Event.relatedtarget

This method gets the related elements that trigger the event element.

(6) Event.pagex and Event.pagey

This method gets the cursor relative to the page x-coordinate and the y-coordinate.

(7) Event.which

The function of this method is to get the left, middle and right mouse buttons in the mouse click Practice, and to get the keys of the keyboard in the keyboard events.

(8) Event.metakey

This method gets the <ctrl> key in the keyboard.

6. Removing events

(1) Remove previously registered events on button elements

Unbind () method, grammatical structure: unbind ([Type],[data]);

(2) Remove one of the events from the <button> element

$ (' #btn '). Unbind ("click", MyFun2);

jquery provides a shorthand method for the--one () method for situations that require only one trigger and then immediately unbind. Syntax structure:

One (TYPE,[DATA],FN);

Second, the animation in jquery

1.show () method and Hide () method

Both of these methods can control the display and concealment of content. In an HTML document, calling the Hide () method for an element changes the display style of the element to "none".

The 2.show () method and the Hide () method let the element move. If you want the element to appear slowly when you call the show () method, you can specify a speed parameter for the show () method, for example: $ ("element"). Show ("slow");

After running the code, the element will be displayed slowly within 600 milliseconds, and other speed keywords are "normal" and "fast". (Lengths are 400 milliseconds and 200 milliseconds, respectively)

In addition to using the Speed keyword, you can specify a number in milliseconds. For example:

$ ("element"). Show ("1000");

2.fadeIn () method and Fadeout () method

Both of these methods change the opacity of the element. The FadeOut () method reduces the opacity of an element within a certain amount of time knowing that the element disappears completely. The FadeIn () method is the opposite.

3.slideUp () method and Slidedown () method

Both of these methods only change the height of the element. The Slideup () method shortens the height of the element until it is hidden. The Slidedown () method is just the opposite.

jquery Chapter Fourth