Events and animations in jquery

1. Event binding--bind (TYPE,[PARAMS],FN)

Type: Event types, including Blur,focus,load,resize,scroll,unload,click,dbclick,mousedouwn,mouseup,mousemove,mouseover,mouseout , Mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error,

Params: Optional parameter, an extra data object that is passed to the event object as the value of the Event.data property

fn: handler function for binding

The time binding type in *jquery is less than normal javascript on, such as OnClick ()--click ()

<div id= "Panel" >

When the DOM is loaded, find the element that contains the title, bind the click event, find the content element, display the content element

$ (function () {$ ("#panel"). Bind ("click", Function () {$ (this). Next (). Show ();}));

As with the Ready () method, the Bind () method can be called multiple times, this refers to the DOM element of the corresponding behavior, and in order for the DOM element to use the method in jquery, you can use $ (this) to convert it to a jquery object

The content is hidden after the content is displayed and then clicked on the title

When the DOM is loaded, find the element that contains the title, bind the click event, find the content element, hide if the content element is displayed, and if the content is hidden, display

$ (function () {

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

function () {

if ($ (this). Next (). Is (": visible")) {

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

else{$ (This). Next (). Show ();

}});

});

$ (this). Next () is used more than once, so you can define a local variable for it

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

$ (function () {

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

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

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

{

$content. Hide ();

}

Else

{

$content. Show ();

}

});

});

When the same selector is found to appear multiple times in the code, cache it with a variable, and more jquery performance optimizations later chapters will refer to

2. Change the type of the binding event

In the above example, the event type that binds the element is click, when the user clicks on it, it triggers the bound event, then executes the function code of the time, and now converts the event type to MouseOver and mouseout, which triggers the event when the mouse hovers over it.

Wait for the DOM to load, find the element that contains the title, bind the MouseOver event, find the content element, display the content, locate the element that contains the title, bind the Mouseout event, find the content element, hide the content

$ (function () {

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

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

$content. Show ();

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

$content. Hide ();

});

});

Events such as click,mouseover,mouseout are often used in programs, and jquery also provides shorthand methods, similar to the bind () method, with the same effect, with the only difference being the ability to reduce the amount of code

$ (function () {

$ ("#panel h5.head"). MouseOver (function () {$content. Show ()}). mouseout (function ($content. Hide ()));

});

3. Synthetic Events

jquery has two synthetic events--hover () and toggle (), similar to the previous ready (), hover (), and toggle () methods are all part of the jquery customization method

Hover: Used to simulate the mouse cursor hover event, when the cursor moves to the element, the specified first function--enter is triggered, and when the mouse moves out of the element, the specified second function is triggered--leave

$ (function () {

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

$content. Show ();

}). function () {

$content. Hide ();

}

});

The ==> code runs the same effect as the following code

$ (function () {

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

$content. Show ();

}). mouseout (function () {

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

});

});

There are pseudo-class selectors in attention:css, such as ": hover", which changes the appearance of the element when the user cursor hovers over the element, and in most conforming browsers, the pseudo-class selector can be used for any element, whereas in a browser in IE6, Pseudo-class selection is only available for hyperlink elements. For other elements, you can use hover () in jquery, hover () to be exact refers to bind ("MouseEnter") and bind ("MouseLeave"), instead of replacing bind (mouseover) and bind ("Mouseout"), so when you need to trigger the second function of hover (), you need to use trigger ("MouseLeave") instead OF Trigger ("Mouseout")

4, Toggle (FnN): Toggle () is used to simulate the mouse continuous click event, the first time you click on an element, trigger the first specified function, when you click on the same element, the second function is triggered, if there are more functions, then trigger, know the last $ ("#panel H5.head "). Toggle (

function () {$content. Show ();},

function () {$content. Hide ();});

Toggle () has another role in jquery: Toggle the visible state of an element, if the element is visible, then hide after clicking Toggle, if the element is hidden, and then visible after clicking Toggle, the above code can be written as the following jquery code:

$ (function () {

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

$content. Toggle ();

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

}), function () {

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

$content. Toggle ();

}

});

Events and animations in jquery