First, ready mechanism
$ (document). Ready ( function () {} )
$ (). Ready ( function () {} )
$ ( function () {} )
The Ready function of jquery executes when the DOM is finished and can be used multiple times
$ (selector). Load ( function () {} ) This method is equivalent to the OnLoad method of JS itself
such as $ (window). Load (function () {}) equals Window.onload=function () {}
-----------------------------------------------------------------------------------
Second, event binding
$ (selector). bind ( type[,date],fn )
Event binding function, type without an on prefix, and can also be multiple events, separated by a space, date will be passed as the value of Event.date to the event object, FN is the listener function
Some simplified event-binding functions:
$ (selector). Click ( function () {} )
The time to support this notation is mouseover, mouseout, etc.
Custom events for Juqery:
$ (selector). Hover ( enterfun,leavefun )
Enterfun function that executes when the mouse is moved into an element, leavefun the function that is executed when the mouse leaves the element
$ (selector). Toggle ( fun1,fun2,..., funn )
When you click Selector, the functions in toggle are called sequentially
If the toggle method does not have parameters, the elements that call the toggle method switch between visible and invisible
such as: $ (selector). Toggle ()//Assuming that the initial is visible, then the $ (selector) is hidden. Toggle ()//call again, the element becomes visible
Iii. properties of the event object
Event.type () Get event type
Event.preventdefault () block default event behavior
Event.stoppropagation () block events continue to bubble up
Event.target () Gets the event element
Event.pagex/y () gets the x/y coordinates of the mouse relative to the page and, if there is a scroll bar, the distance of the scrollbar
Event.which () mouse events get the left, middle, and right mouse buttons, left, middle, and right to return 1, 2, 3, keyboard events get keyboard keys
Iv. Removal of events
$ (selector). Unbind ( [type][,date] )
The first parameter is the event type, the second parameter is the listener function to remove, and if there are no parameters, all events of all types are deleted, and only the type event is deleted if there is only the type parameter
$ (selector). One ( type,[date],fn )
The function used to trigger an event, that is, the event can only be triggered once and will not be valid later
V. Automatic triggering of events
$ (selector). Trigger ( Type[,date])
Used to automatically trigger a class of events, especially useful for triggering custom events
$ (selector). Triggerhandler ( type[,date])
The event triggered by the above function executes the browser's default action, and the event that the function fires does not
Vi. animations in jquery
Hide (), show ()
The Hide method changes the display property of the element to none
The Show method changes the display property of an element to block or inline (depending on the Diaplay property of the element before hide)
The Hide () and show () methods can also take a parameter that represents time, so that the fade and fade effects can be achieved, with the parameter being a number, in milliseconds, or "slow", "normal", "fast", and three constants
The Hide () and show () methods reduce the height, width, and transparency of the element at the same time
FadeIn (), FadeOut ()
These two functions are similar to the Hide (), show () method usage, except that the two functions change only the transparency of the element
Slideup (), Slidedown ()
Similar to the Hide (), show () method usage, except that the height of the element is changed
Note: Any animation in jquery can be specified in 3 speed parameters, namely "slow", "normal", "fast", the length of time is 0.4,0.6,0.2 seconds, use the speed keyword to enclose the quotation marks, you can use the number, in milliseconds, then do not add quotation marks
Animate ( Params[,speed][,callback] )
Custom animation functions, parameter descriptions are as follows:
Params: A mapping that contains style attributes and values, such as {property1: "value1", Property2: "value2",...} if + = or-= is present before value, such as {width: ' +=400px '}, is to animate on the basis of its original value.
Speed: Velocity parameters, optional
Callback: Callback function when the animation is complete, optional
When multiple animate (or other animation functions) are applied to the same element, an animation queue is generated, that is, each animate executes sequentially
Stop ( [queue] [, Gotoend] )
Queue: Boolean type, True when empty after the animation queue is emptied
Gotoend: Boolean type, true when jumping to the end state of an animation being performed
When you use the Stop () method, the animation that is being executed is stopped immediately
Toggle ()
The toggle () method is used to toggle the visible state of an element if it is visible when the element is hidden, and if the element is hidden, it is tangent to the visible
FadeTO ( speed,opacity )
You can adjust the transparency of an element to a specified value in a progressive way
jquery Learning Notes-----events and animations