Event handling in jQuery User Manual
Hover (Function, Function)The first function is triggered when the mouse moves over, and the second function is triggered when the mouse moves out.
Style:
Html code:
Sdf
JQuery code and Effects $ ( Function (){
$ ( " # " ). Hover ( Function () {$ ( This ). AddClass ( " Red " );},
Function () {$ ( This ). RemoveClass ( " Red " );
});
})The final result is that when you move the mouse over the layer with id a, a red style is added to the layer and the red style is removed when the layer is left.
Toggle (Function, Function)The first function is triggered when the matching element is clicked for the first time, and the second function is triggered when the element is clicked for the second time.
Style:
Html code:
Sdf
JQuery code and Effects $ ( Function (){
$ ( " # " ). Toggle ( Function () {$ ( This ). AddClass ( " Red " );},
Function () {$ ( This ). RemoveClass ( " Red " );
});
})The final effect is to add a red style to the layer when you click the layer with id a and remove the red style when you leave the layer.
Bind (type, fn)You can bind an event and trigger event to a matching object.
Trigger (type)A type event is triggered by the user. $ ("P"). trigger ("click ")
Also:
Unbind () unbind (type, fn)
Dynamic event (Function) binding and unbinding provides a simple method for Functions
Example: $ ( " # " ). Bind ( " Click " , Function (){
$ ( This ). AddClass ( " Red " );
})You can also write as follows: $ ( " # " ). Click ( Function (){
$ ( This ). AddClass ( " Red " );
});
The final effect is to add a red style to the layer when you click the layer with id,
Functions provided by jQuery
Used for browers events
Error (fn) load (fn) unload (fn) resize (fn) scroll (fn)
Used for form Events
Change (fn) select (fn) submit (fn)
Used for keyboard Events
Keydown(Fn) keypress (fn) keyup (fn)
Used for mouse events
Click (fn) dblclick (fn) mousedown (fn) mousemove (fn)
Mouseout (fn) mouseover (fn) mouseup (fn)
Used for UI events
Blur (fn) focus (fn)
The above events are extended to 5 categories.
For example, click (fn) extended click () unclick () oneclick (fn) unclick (fn)
Click (fn): adds an event that triggers a function when a click is added.
Click (): click events that match objects can be executed in other events.
Unclick (): The click Event of the matching object is not executed.
Oneclick (fn): adds a click event that can be executed once.
Unclick (fn): adds an event that does not trigger a function when a click is added.
The events listed above for browers, form, keyboard, mouse, and UI can all be extended as described above.
VII.: Ajax support
Common method:
$. Ajax (prop) goes back to remote data through an ajax request. prop is a hash table that can transmit the following key/value types:.
(String) type: Data Transmission Method (get or post ).
(String) url: the url of the data request page
(String) data: the parameter String used to pass data. It is only applicable to the post method.
(String) dataType: the format of the data to be returned (for example, "xml", "html", "script", or "json ")
(Boolean) ifModified: returns a successful response only when the last request changes accordingly. The default value is false.
(Number) timeout: Set the request time delay. For more information, see $. ajaxTimeout.
(Boolean) global: whether to trigger ajax global events for the current request. The default value is true.
(Function) error: the Function triggered when the request fails.
(Function) success: triggers a Function when the request is successful.
(Function) complete: the departure Function after the request is complete.
JQuery code and description
$. Ajax ({url: " Ajax.htm " ,
Success: Function (Msg ){
$ (P " # " Pai.html (msg );
}
});Use the content returned by ajax.htm as the p content with id. $. Ajax ({url: " Ajax. aspx " ,
Type: " Get " ,
DataType: " Html " ,
Data: " Name = John & location = Boston " ,
Success: Function (Msg ){
$ ( " # " Pai.html (msg );
}
});
Use the get method to pass Parameters to the ajax. aspx page and send the returned content to the object with id.
$. AjaxTimeout (time) Set Request End Time
$. Ajaxtime out (5000)
Other simplified methods:
$. Get (url, params, callback)The get method is used to pass parameters to the remote page. After the request completes the post-processing function, other parameters except the url are randomly selected.!
$. Get ( " Ajax.htm " , Function (Data) {$ ( " # " Pai.html (data )}) $. Get ( " Ajax. asp " ,
{Name: " Young " , Age: " 25 " },
Function (Data) {alert ( " Data Loaded: " + Data );}
)
$. GetIfModified (url, params, callback)The get method is used to pass parameters to the remote page. After the last request, if the data changes, the callback function is executed.
$. GetJSON (url, params, callback)The get method is used to pass parameters to a remote json object, and the callback function is used after the request is completed.
$. GetScript (url, callback)Load and run a remote javascript file in get mode. The callback function after the request is completed.
$. Post (url, params, callback)Pass parameters to the remote page in post mode, and call back is the post-processing function after the request is completed.
Load (url, params, callback)Load a remote file, load the DOM on the page, and execute the callback function. $ ( " # " ). Load ( " Ajax.htm " , Function () {Alert ( " Load is done " );});Send a request to the ajax.htm page, load the returned result into the content with id a, and then execute the callback function.
LoadIfModified (url, params, callback)The get method is used to pass parameters to the remote page. After the last request, if the data changes, the response is returned and loaded into the DOM of the page, and the callback function is executed.
AjaxStart (callback)When an error occurs in an ajax request, the callback function is executed.
AjaxComplete (callback)Run the callback function when the ajax request is complete.
AjaxError (callback)Run the callback function when an error occurs in an ajax request.
AjaxStop (callback)Call back is executed when an ajax request is stopped.
AjaxSuccess (callback)Run the callback function when the ajax request is successful.
8: JQuery plugin
With the extensive use of jQuery, a large number of jQuery plug-ins have emerged, such as thickbox, iFX, and jQuery-googleMap. These plug-ins can be easily used simply by referencing these source files. Here I will briefly introduce some websites for your reference. These website headers provide a large number of demos, which are easy to use and can be quickly grasped if E is not good!
Http://jquery.com/plugins official recommendations
Http://interface.eyecon.ro/demos effect is superb, use more simple, you must have your favorite!
Http://www.dyve.net/jquery/
Http://bassistance.de/jquery-plugins
There are many other plug-ins, which can be listed below by google. If you find the plug-ins are good, you can leave a message to share the following!
----------------------------------------------
Now jQuery has been introduced and integrated for you to download. For more details, please refer to the official website, next, I would like to recommend some jQuery learning websites to help you better master this tool!
Introduction to http://keel.sike.googlepages.com/jQuery_getting_started.html
Http://jquery.com/api jquery provides all the basic methods of the introduction and demo, easy to query!
