JavaScript events and animations

First, events commonly used events

Click (function () {...})    Click event Hover (function () {...})  Mouse over event   blur (function () {...})    Lose cursor focus (function () {...})  Get cursor change (function () {...})//Modify Event KeyUp (function () {...})  Release keyboard KeyDown (function () {...})  Press the keyboard

Event Bindings

Grammar:

. On (events [, selector],function () {})

• Events: Event
• Selector: selector (optional)
• Function: Event handler

removing events

Grammar:

. Off (events [, selector][,function () {}])

• Events: Event
• Selector: selector (optional)
• Function: Event handler

Prevent subsequent events from executing

return false; Common block form submissions, etc.

Page loading

Binds a function to execute when DOM loading is ready to be queried and manipulated. This is the most important function in the event module, because it can greatly improve the responsiveness of the Web application.

Two types of notation:

$ (document). Ready (function () {//write your JS code here ...})

Shorthand:

$ (function () {///You write your code here})

Event delegate

Event delegation is the principle of event bubbling, which uses the parent tag to capture the child tag's events.

Example:

The Edit and delete buttons for each row in the table can trigger the corresponding event.

$ ("table"). On ("click", ". Delete", function () {  //delete button-bound events})

　　

Second, the animation effect

Basic show ([S,[E],[FN]) Hide ([S,[E],[FN]]) toggle ([S],[E],[FN])//Sliding Slidedown ([S],[E],[FN]) slideup ([S,[E],[FN]]) Slidetoggle ([S],[E],[FN])//Fade Fadein ([S],[E],[FN]) FadeOut ([S],[E],[FN]) FadeTo ([[S],O,[E],[FN]]) fadetoggle ([s, [E],[FN]]//Customize (Understand) animate (P,[S],[E],[FN])

　　

Iii. other Knowledge supplements each

Jquery.each (collection, Callback (Indexinarray, valueofelement)):

Description: A general-purpose iterative function that can be used to iterate objects and arrays seamlessly. Arrays and array-like objects iterate through a numeric index, from 0 to length-1, through a length attribute, such as a function's parameter object. Other objects iterate through their property names.

Li =[10,20,30,40]$.each (li,function (i, v) {  Console.log (i, v);//index is an index, and ele is the specific element of each loop. })

　　

Output:

010120230340

　　

. each (function (index, Element)):

Description: Iterates through a jquery object and executes a function for each matching element.

.each()method is used to iterate through each DOM element in a jquery object. Each time the callback function executes, the current number of cycles is passed as a parameter (counting from 0). Because the callback function is triggered in the context of the current DOM element, the keyword this always points to that element.

Add foo$ ("Li") to each of the LI tags. each (function () {  $ (this). AddClass ("C1");});

　　

Note: The jquery method returns a JQuery object that iterates through the elements in the jquery collection-the process called implicit iterations . When this happens, it usually does not require an explicit loop .each() method:

That is, the above example is not necessary to use the each () method, directly as follows:

$ ("Li"). addclass ("C1");  Uniform operation of all labels

　　

Attention:

You can use to end each loop early in the traversal process return false .

Terminate Each loop

return false;

　　

. Date ()

Stores any related data on all elements in the matching element collection or returns the value of the data store for the given name of the first element in the matching element collection.

. Data (key, value):

Description: Stores any related data on a matching element.

$ ("div"). Data ("K", 100);//Save a value of 100 for all div tags named k

　　

. Data (Key):

Description: Returns the value of the data store for the given name of the first element in the matching element collection-passed .data(name, value) or HTML5 data-* property set.

$ ("div"). Data ("K");//Returns the value of "K" saved in the first div tag

　　

. Removedata (Key):

Description: Removes the data stored on the element without the key parameter indicating that all saved data is removed.

$ ("div"). Removedata ("K");  Remove the data from the element that holds K

　　

Plug - ins

Jquery.extend (object)

Add new features under JQuery's namespace. Used by plug-in developers when adding new functions to jQuery.

Example:

<script>jquery.extend ({  min:function (A, b) {return a < b? a:b;},  max:function (A, b) {return a > B? a : b;}}); Jquery.min (2,3);//= 2jquery.max (4,5);//= 5</script>

　　

JQuery.fn.extend (object)

The contents of an object are merged into the jquery prototype to provide a new jquery instance method.

<script>  jQuery.fn.extend ({    check:function () {      return This.each (function () {this.checked =true;});    } ,    uncheck:function () {      return This.each (function () {this.checked =false;});    }  ); /jquery objects can use the newly added check () method. $ ("input[type= ' checkbox ']"). Check ();</script>

　　

Extensions that are written separately in the file:

(function (JQ) {  jq.extend ({    funcname:function () {    ...}}  );}) (JQuery);

　　

JavaScript events and animations