A .jQuery events
1. Load the DOM
browser-loaded document as an example, after the page is loaded, the browser will add events to DOM elements using JavaScript. In conventional JavaScript code, window.onload method generally used, but in jQuery used is $ (document) .ready () method. But be careful about the difference between the two:
Execution timing: window.onload () method is all the elements in a Web page (including all associated files) is fully loaded into the browser after you have performed. And by the jQuery $ (document) .ready () method to register event handlers when the DOM is fully ready can be called (not all associated files are downloaded). Sometimes when the associated file element has not been downloaded, you can use another method in jQuery -load on page load () method:
$ (window) .load (function () {
// Write code
})
is equivalent to the following code JavaScript:
= function window.onload () {
//
}
multiple use: Suppose there are two pages function, when a plurality of window.onload method can not be programmed simultaneously, so that only the last function executed, while $ (document). ready () method can write more than at the same time, is adding a new behavior on existing behavior, and will execute the order. example:
$(document).ready(function(){
one();
})
$(document).ready(function(){
two();
})
简写方式：
$ (function () {
//
})
2. event bindings
in the document after the completion of the loading, may be bound to a particular event matching elements using bind () method:
bind (type [, data], fn); // event type first parameter, the second optional parameter, the third to bind handler
1
To determine the time and the display cycle is hidden elements appear, may be used in jQuery is () method to complete.
3. synthetic event
jQuery has two synthetic event, belonging custom method:
hover () Method - used to simulate cursor hovering event
// At this point the cursor triggers a first function, the second function when the trigger away; hover (Enter, Leave)
. 1
visible for continuous simulated mouse click event / switching elements can also be - toggle () method
toggle (fn1, fn2, ... fnN ); // first click to trigger the first function, the second click the second trigger, which in turn triggers
1
4. Event bubbling
on the page can have multiple events may be a plurality of elements corresponding to the same event, assuming the page on which a div element, span element nested inside the other, and are bound a click event, while the body elements are also bound to the click event, when when you click inside the span element, span element triggers the click event, but also in response to each element of a nested hierarchical order in accordance with the DOM, called the bubbling order, the order is span-div-body.
Stop event bubbling:
event.stopPropagation ();
1
stop element default behavior:
the event.preventDefault ();
. 1
may be replaced by a shorthand way of the above method:
false return;
1
Event Capture: event capture and event bubbling is exactly the opposite of the two processes, event capture is the outermost layer of the element from the beginning, and then to the innermost element.
The event object property
event.type-- get the type of event
event.preventDefault () - prevent the default behavior
event.stopPropagation () - prevent the event from bubbling
event.target-- get to the triggering event elements
event.relatedTarget-- access the mouseover and mouseout related elements
event.pageX and event.pageY-- to obtain the coordinates of the cursor relative to the x and y coordinates of the page
event.which-- get left in the mouse-click event,, right
event.metaKey-- keyboard events obtaining ctrl key
6. remove the event
in the binding event, not only can bind multiple events for the same element, you can also bind the same event for multiple elements.
Removal event previously registered on the button elements:
<button id = "delAll"> delete all events </ Button>
$ ( '# delAll') the Click (function () {.
$ ( '# BTN') the unbind ( "the Click");.
});
Syntax: unbind ([type], [data] ); // event type first parameter, second parameter function to be removed
to remove the element wherein a event:
$ ( '# delTwo') the Click. (function () {
$ ( 'BTN #') the unbind ( "the Click", myFun2);. myFun2 // First specify a variable as a function of the processing, and then delete the binding function 2
}) ;
one () method can bind handler for the elements after the first trigger is released immediately:
One (type, [Data], Fn);
. 1
7. The simulation operation
using the trigger () method to complete the simulation operation, do not need to click on the page will be loaded output:
$ ( '# btn') trigger ( "click");. // common simulation
$ ( '# btn') trigger ( "click");. // trigger a custom event
trigger (type, [data]) // the first parameter type of event to be triggered, and the second event is passed to the additional data event handler
$ ( "input") trigger ( "focus");. // execute the browser's default operation
$ ( "input"). triggerHandler ( "focus"); // bind only trigger event, the default action does not execute browser
8. other usage
bind multiple event types: $ ( "div") bind ( "mouseover mouseout", function () {. })
add an event namespace, easy to manage: $ ( "div") bind ( "mouseover.plugin", function (.) {})
the same event name, different namespaces execution method
Two .jQuery animation
1. show () method and the hide () method
$ ( "element") hide ( );. // hide
$ ( "element") show ( );. // show
$ ( "element") css ( "display", "none");. // via css methods Hide
show and hide methods ways to make the elements move
$ ( "element") show ( "slow");. // slow display
1
2.fadeIn () method and fadeOut () method - change the element of opacity
3.slideUp () method and slideDown () method - change height of the element
4. the method of custom animations Animate ()
animate (params, speed, callback) ; // contains a style attribute and value map, the speed, the animation function is performed when the completion of
a
5 animation callback
6. Stop and judges whether the animation of the animation state
stopped animation elements:
stop ([clearQueue], [gotoEnd ]); // if not completely emptied animation execution queue, whether the animation is being performed directly jump to the end state
1
determines whether the element is in the animation states:
IF (! $ (Element) .is ( ": Animated")) {
// If there is no animation, add new animation
}
delay Animation: Delay ();
7. The method of other animations
toggle (speed, [callback]) - switching element visible
slideToggle (speed, [easing], [callback]) - visibility of matching elements are switched by a change in height
fadeTo (speed, opacity, [callback ]) - - the opacity of the element by gradually adjusted to the specified value
fadeToggle (speed, [easing], [callback]) - matched elements switched by the change in opacity of visibility
Reproduced in: https: //www.cnblogs.com/ws1149939228/p/11039178.html