jquery Events and animations

I. How to bind events1. Shortcut to Event bindingCons: Bound events, cannot be canceled

$ ("button"). EQ (0). Click (function () {    alert (1);})      

2. Use on () to bind events① Single Event binding using on

                $ ("button:eq (0)"). On ("click", function () {alert (1);});     

② use on: Add multiple events to the same node at once, execute the same function, and separate the spaces between multiple events

                $ ("button:eq (0)"). On ("click mouseover dblclick", function () {                    console.log (" event triggered ");                });

③ use on: Add multiple events to the same node at once and execute different functions, respectively * /

$("button:eq (0)"). On ({"Click": Function () {Console.log ("The Click event was executed"); },                    "mouseover": Function () {Console.log ("performed the MouseOver event"); }                });

④ When a function is called, it also passes the specified argument to the function

                $ ("button:eq (0)"). On ("click", {name:"jredu  ", Age:},function (EVN) {                    console.log (EVN);                    Console.log (evn.data.name);                    Console.log (evn.data.age);                });

⑤ using on: For event delegation:>>> to bind to an ancestor node or even the root node instead of the events that would otherwise have been bound to this element.then delegate to the current node to take effect eg:$ ("P"). On ("click", Function () {}); ↓ (Event delegation)$ (document). On ("click", "P", function () {});>>> Role:do not use event delegation binding method, can only be bound to the page when the initialization of the label, when the page added a similartags, these new tags, can not be bound on the event;However, if you use event delegation, these new tags will also be able to bind to existing pages when the same type label is added to the page.the event.

$("button:eq (0)"). On ("Click", Function () {$ ( This). After ("<p> This is the new P tag </p>");                                }); $("P"). On ("Click", function () {alert ("No Event delegation");                                }); $ (document). On ("Click","P", function () {alert ("This is the event delegation"); });

off () cancels the on event binding$ ("P"). Off ("click"); Cancel Single Event binding $ ("P"). Off ("click MouseOver DblClick"); canceling multi-event binding $ (document). Off ("click", "P"); Canceling event delegation bindings $ ("P"). Off (); cancels all the event bindings events that are bound with. One () can only be performed once;

                $ ("button"). One ("click", Function () {                    alert (  " I can only see one side of you ");                });

3.. trigger (): an event that automatically triggers an element. first parameter: The type of event to be triggered;the second parameter: (optional) An array format that represents the arguments passed to the corresponding event function. >>> Pass in parameters, you can define parameter acquisition in the event function (the first must beevent, starting with the second argument passed. )>>> can also read parameters directly in the function, using an array of arguments objects. . Triggerhandler (): function Ibid., the difference is as follows:①triggerhandler can not trigger browser default HTML events, such as submit, etc.;trigger can trigger any event;②trigger can trigger events for all matching elements in the page;Triggerhandler can only trigger events of the first matching element;The return value of the ③trigger, which returns the object that invokes the current function, conforms to the jquery-linked syntax;Triggerhandler Returns the return value of the event function, if the event function does not have a return value, the rangeUndefined;

$("P"). On ("Click", function (EVN,N1,N2) {for (var i=1;i<arguments.length;i++) {Console.log (arguments[i]);}//Alert ("This is the click event of the P tag, you pass the parameters" +n1+ "and" +n2 ");}); $ ( "p"). Trigger ( "click", [  "jredu", 12]); SetTimeout (function () {alert ( " time cutoff, auto-handing " ); $ ( "form"). Trigger ( "submit" 5000)             

Second, jquery animation1. Show () let the hidden elements display. The effect is: simultaneously modify width, height, opacity genus sex. ①: Direct display, no animation;② The parameter time in milliseconds, which indicates how many milliseconds to complete the function;③ Incoming (time, function) indicates that after the animation is complete, the callback function is executed;. Hide () to hide the displayed elements, contrary to show . Slidedown () Let the hidden elements display, the effect is from top to bottom, increase the height; the. Slideup () lets the displayed elements be hidden, with the effect of lowering the height from bottom to top; The . Slidetoggle () lets the displayed elements be hidden, allowing hidden elements to be displayed; . FadeOut () let the displayed elements fade out of hiding, modify the transparency; . FadeIn () lets hidden elements fade in and out of the display; The . Fadetoggle () lets the displayed elements be hidden, allowing hidden elements to be displayed; . FadeTo (time, final transparency, function) with Fadetoggle, receives the second parameter, which represents the final transparency of the arrival.

$("#p"). Show ( -, Function () {$ ("#p"). Hide ( -);                }); SetInterval (function () {$ ("#p"). Show ( -, Function () {$ ("#p"). Hide ( -);                }); },4000); $("#p"). Slidedown ( -, Function () {$ ("#p"). Slideup ( -);                }); SetInterval (function () {$ ("#p"). Slidetoggle ( +); }, -); $("#p"). FadeIn ( -, Function () {$ ("#p"). FadeOut ( -);                }); $("#p"). FadeTo ( -,0.5, function () {});

2. Custom Animations. Animate ({Final Style property, key-value pair object},animation time,animated effects ("linear", "Swing"),the callback function after the animation execution is complete)Custom Animation considerations:in an object ① parameter one, the key must use the Camel name method. {fontSize: "18px"}② only properties of numeric types can use animations, non-numeric type properties cannot be animated.

                $ ("#p"). Animate ({                    width:"300px",                    Opacity:"0.5"                },+,"Linear  ", Function () {                    alert (" animation completed ");                });

jquery events and animations