hover (function, function) triggers the first function when the mouse move is over, triggering the second function when the mouse move is out
Style: <style>.red{color: #FF0000}</style>
HTML code: <div id= "a" >sdf</div>
jquery Code and effects
$ (function() {
$ ("#a"). Hover (function() {$ (this). addclass ("red");
function() {$ (this). Removeclass ("red");
});
})
The final effect is to add a red style to the layer when the mouse is moved over the layer with ID A, and remove the red style when leaving the layer
Toggle (function, function) triggers the first function when the matching element is clicked for the first time, triggering the second function when clicked the second time.
Style: <style>.red{color: #FF0000}</style>
HTML code: <div id= "a" >sdf</div>
jquery Code and effects
$ (function() {
$ ("#a"). Toggle (function() {$ (this). addclass ("red");
function() {$ (this). Removeclass ("red");
});
})
The end result is that when the mouse clicks on the layer with ID A, the layer adds a red style and moves the red style away from the layer.
Bind (Type, fn) user binds an event and triggers the event to a matching object.
The trigger (type) user triggers an event of type form. $ ("P"). Trigger ("click")
And also:
unbind () unbind (type) unbind (type, fn)
Dynamic Event (function) binding and Unbind provides a simple way to function
Cases:
$ ("#a"). Bind ("click",function() {
$ (this). addclass ("red");
})
You can also write this:
$ ("#a"). Click (function() {
$ (this). addclass ("red");
});
The end result is that when the mouse clicks on the layer with ID A, the layer adds a red style,
jquery-supplied functions
For browers Events
Error (FN) load (FN) unload (FN) resize (FN) Scroll (FN)
For form Events
Change (FN) Select (FN) Submit (FN)
For keyboard events
KeyDown(FN) keypress (FN) KeyUp (FN)
For mouse events
Click (FN) DblClick (FN) MouseDown (FN) MouseMove (FN)
Mouseout (FN) mouseover (FN) MouseUp (FN)
for UI Events
Blur (FN) focus (FN)
The expansion of the above events is extended to 5 classes
For example, click (FN) extension click () Unclick () OneClick (FN) Unclick (FN)
Click (FN): Adds an event that triggers a function when clicked
Click (): You can perform the click event of a matching object in another event.
Unclick (): Does not perform the Click event of the matching object.
OneClick (FN): Adds only Click events that can be performed once.
Unclick (FN): Adds an event that does not trigger a function when clicked.
Events listed above for browers, form, keyboard, mouse, and UI can be extended in the above way.
Seven : Ajax support
Common way:
$.ajax (prop) through an AJAX request, go back to the remote data, prop is a hash table, it can be passed Key/value have the following several。
(String) Type: Data delivery method (get or post).
((String) URL: The URL of a data request page
((String) Data: A parameter string that is passed on to the Post method only
((String) DataType: A data format that expects data to be returned (for example, "XML", "HTML", "script", or "JSON")
((Boolean) ifmodified: The default value is False when the corresponding change in the last request is returned successfully
((number) Timeout: Sets the time of the time delay request. can refer to $.ajaxtimeout
((Boolean) Global: Whether to trigger an AJAX global event for the current request, which defaults to True
((function) Error: A function that fires when a request fails.
((function) SUCCESS: triggers a function when a request succeeds
(function) Complete: When the request is complete, start the functions
jquery Code and description
$.ajax ({url: "ajax.htm",
Success:function(msg) {
$ (Div"#a"). HTML (msg);
}
});
The content returned by Ajax.htm as the DIV content with ID a
$.ajax ({URL:"Ajax.aspx",
Type"Get",
DataType:"html",
Data: "Name=john&location=boston",
Success:function(msg) {
$ ("#a"). HTML (msg);
}
});
Passes the argument to the Ajax.aspx page in Get, and the returned content is negative to the object with ID a.
$.ajaxtimeout (Time) Set request End time
$.ajaxtimeout (5000)
Other simplified ways:
$.get (URL, params, callback) use get way to pass the parameter to the remote page, the request completes the processing function, except the URL, other parameters optional!
$.get ( "ajax.htm" , function(data) {$ ("#a"). HTML (data)})
$.get ( " ajax.asp " ,
{ name: young , age: ,
function (data) { alert ( " data loaded: " + data); &NBSP
)
$.getifmodified (URL, params, callback) passes parameters to the remote page in Get mode, and responds with changes to the data after the last request, and executes the function callback
$.getjson (URL, params, callback) passes arguments to a remote JSON object in a get way, and the request completes the processing function callback.
$.getscript (URL, callback) loads and runs a remote JavaScript file in Get mode. Processing function callback after request completes.
$.post (URL, params, callback) passes the arguments to the remote page by post, and the request completes the processing function callback
Load (URL, params, callback) loads a remote file and loads it into the page DOM and executes the function callback
$ ("#a"). Load ("ajax.htm", function() {alert ("load is done "); } );
Make a request to the Ajax.htm page, load the return result into the content with ID A, and then execute the function callback.
Loadifmodified (URL, params, callback) passes parameters to the remote page in Get mode, responds with changes to the data after the last request, loads the results into the page DOM, and executes the function callback
Ajaxstart (callback) executes a function when an AJAX request error occurs callback
Ajaxcomplete (callback) executes functions when AJAX requests complete callback
Ajaxerror (callback) executes a function when an AJAX request has an error callback
Ajaxstop (callback) executes functions when AJAX requests stop callback
Ajaxsuccess (callback) executes functions when AJAX requests succeed callback
eight : jquery plugin
With the wide use of jquery, there have been a large number of jquery plug-ins, such as Thickbox,ifx,jquery-googlemap, simple reference to these source files can easily use these plug-ins. Here I briefly introduce some Web sites for your reference, these sites provide a large number of demo, and the use of simple, timely e-wen is not good, can quickly grasp!
http://jquery.com/plugins official recommendation
http:// interface.eyecon.ro/demos effect is super, use more simple, must have you like!
http://www.dyve.net/jquery/
http://bassistance.de/jquery-plugins
There are many other plug-ins, we can Google below, if you find a good, you can share the following message!
——————————————————————————————————————————————
At this point jquery has been introduced, and consolidated to provide everyone to download, more detailed use please refer to the official website, I would recommend some jquery learning site to facilitate everyone better grasp this tool!
http://keel.sike.googlepages.com/jquery_getting_started.html Introduction to the introduction of Chinese, keel translation
http://jquery.com/api jquery provides all the basic methods of introduction and demo, Convenient for everyone to inquire!
