JQuery DOM common operation
1, JQuery object basic methods:
(1) get (); get all the matching elements
(2) get (index); get one of the matched elements $ (this). Get (0) is equivalent to $ (this) [0]
(3) Number index (jqueryObj); search for child objects
(4) each (callback); similar to the foreach, but traverse the elements of an array
Such as:
$ ("Img". Each (function (index) (
this.src = "test" + index + ". jpg";
));
Use return false; return true; on behalf of break, continue to function
(5) length, size (); is the total value of returned element
(6) jQuery.noConflict (true); reset default symbol jquery
Such as:
var dom = ();
dom.query = jQuery.noConflict (true);
At this time will be used instead of $ dom.query
2,, JQuery selector
(1) Basic:
* Matches all DOM elements
. Classname matching the DOM element with the specified classname
element (DOM tag name) matches the specified name of all the DOM elements
# Id matches the ID of the DOM element specified
Used to separate multiple selection criteria that match a
(2) level:
Select a [space] to select two that complies with the election of a second condition in all the elements
Select a [>] to select two that complies with the election of a second condition within the first element
Select a [+] select two that immediately following the election of a second condition element of next symbol
Select a [~] to select the second one after the election that all elements meet condition two siblings
(3) operator
: Animated animation elements
: Eq (index) index location, such as: $ ("div: eq (1)"
: Even even elements
dd odd element
: First first
: Gt (index) is greater than the index of all elements
: Lt (index) less than the index of all elements
: Header H1, H2 ... the title element
: Last last
: Not (Selector) exclusion
: Contains (string) Select the object that contains the content in
: Empty the contents of the selected object is empty
: Has (Selector) containing
: Parent and empty the opposite
: First-child
: Last-child
: Nth-child (index) the first few
nly-child only child elements
Form
: Text: checkbox: radio: image: file: submit: reset: password: button
Form state
: Checked: disabled: enabled: selected
Visibility
: Hidden: visible
Property and its operator
[Attribute name] matches the element that contains the given attributes
[Att = value] equivalent to the above
[Att *= value] fuzzy match
[Att! = Value] This value can not be
[Att $ = value] at the end of this value
[Att ^ = value] at the beginning of this value
[Att1] [att2] [att3] ... matching conditions in a number of properties
3, JQuery DOM common operation
(That is screened through the DOM selector can be common after the operation, that is JQuery object instance method)
1, property operation (Note: attr (name), html (), val () is only the first matching element method of operation, the other is on the whole operation)
attr (name); was the first element matching element attribute specified
attr (key, fn), attr (key, value) of all matched elements to set a property value, the former second parameter is a function, the value is the return value of this function
attr (properties) with the key elements of the set of all matched set of one or more property values, such as: $ ("img". attr ((src: "test.jpg", alt: "Test Image"));
removeAttr (name) Remove the specified attribute value matches the element
addClass (classname) to increase the class name, that is to increase the class attribute
removeClass (classname)
toggleClass (classname) to switch the class name (there are deleted, there is no increase)
html ()
html (setvalue)
text ()
text (setvalue)
val ()
val (val) for common elements, using the method should be the object. val (set value); for select, radio and other values that are used to select the value of the object, such as:
$ ("# Multiple". Val (["value1", "value3"]);
$ ("Input". Val (["checkvalue1", "checkvalue2"]);
2, filter
In fact many ways to filter through the selector can be implemented operator, so Here are just some special method of operation.
eq (index), filter (expr), hasClass (class), is (expr), not (expr),
filter (fn) function returns the selected value matches the specified collection of elements (within the function will be calculated once for each object
(Like '$. Each'). If you call the function returns false then the element is deleted, otherwise you will keep. )
slice (start, [end]) select a subset of matching
map (callback) to a group of other array elements into (whether or not that element array)
andSelf () to the selected element to the current focus
end () to restore the previous state of choice after failed
3, document processing
append (content) to each element of the content of additional content, content that: String, Element, jQuery one of the following with.
appendTo (content) to the contrary above, the above is additional to the selected object, this is to select the object to the additional content choices on the mid-
prepend (content), prependTo (content), after (content), before (content)
replaceWith (content) to select the element with content replacement
replaceAll (selector) to select the object replaced with the current object
empty ()
remove ([expr])
clone ()
clone (true) when the incident with cloning cloning
4, CSS handling
css (name) to access the first element matching the style attribute
css (name, value) in all matched elements, to set a style property value
css (properties) with a key to the value on its
offset () was selected elements of the displacement, the return value is an object Object (top, left)
height (), height (val), width (), width (val)
4, JQuery's event handling object
1, global operations
(1) ready (fn) DOM ready event when, for document events can be abbreviated as $ (function () (...));
(2) bind (type, [data], fn) binding on the match as an event data passed to the function of the additional object of this event
Such as:
$ ("P". Bind ("click", function () (
alert ($ (this). text ());
));
function handler (event) (
alert (event.data.foo);
)
$ ("P". Bind ("click", (foo: "bar"), handler)
(3) one (type, [data], fn) to the above difference is that this incident is only one response
(4) trigger (type, [data]) in each element to trigger a certain event
(5) triggerHandler (type, [data]) only the trigger event function, but does not trigger the same event browser
(6) unbind ([type], [data]) Remove the event binding
(7) hover (overFn, outFn) to respond to mouse events after
(8) toggle (fn1, fn2 ...) after each click of the mouse to respond to the different functions in turn
2, fixed event
In the case of no arguments that the implementation of an event, an event with a parameter was set
The following events can trigger can also be set:
blur (), change (), click (), dblclick (), error (), focus (), keydown (), keypress (), keyup (), select (), submit ()
The following events can only be set, can not be used to trigger JS:
load (fn), mousedown (fn), mousemove (fn), mouseout (fn), mouseover (fn), mouseup (fn), resize (fn), scroll (fn), unload (fn)
5, the effect
hide ()
hide (speed, [callback]) hide with animation, callback is executed when the function finished animation
show ()
show (speed, [callback])
toggle () switch state
slideDown (speed, [callback]) by a high degree of change (increasing down) to dynamically display all the matching elements, after the show and firing an optional callback function.
slideUp (speed, [callback]) by a high degree of change (decreasing upward) to dynamically hide all matching elements, in hiding after the completion of firing an optional callback function.
slideToggle (speed, [callback]) by a high degree of change to switch the visibility of all matched elements, and after the completion of the switch and firing an optional callback function.
fadeIn (speed, [callback]) by changes in the opacity of all matched elements to achieve the fade effect, and after the completion of the animation and firing an optional callback function.
fadeOut (speed, [callback]) by changes in the opacity of all matched elements to achieve the fade, and after the completion of the animation and firing an optional callback function.
fadeTo (speed, opacity, [callback]) to the opacity of all matched elements by gradually adjusting to the specified opacity, and after the completion of the animation and firing an optional callback function.
animate (params, options) is used to create custom animation function.
params (Options): a group containing as the animation style properties and the final value of the set of attributes and their values
options (Options): a set of values that contains a collection of animation options.
animate (params [, duration [, easing [, callback]]])
duration, easing the animation is the default action
duration (String, Number): (optional), one of three scheduled rate string ("slow", "normal", or "fast" or that animation long milliseconds value (eg: 1000)
easing (String): (optional) to erase the effects of the use of the name (requires plug-in support). default jQuery provides "linear" and "swing".
dequeue () removes a queue from the animation queue function
queue () returns the first matching element pointing to the queue (will be a function of the array)
queue (callback) matching elements in the queue to add a function animation
queue (queue) to match the elements of the animation queue with a queue instead of the new (function array)
stop ()
6, AJAX
1, jQuery.ajax (options) load remote data through HTTP requests.
Parameter list:
(1) async (Boolean): (default: true) default, all requests are asynchronous request. If you need to send a synchronous request, this option is set to false.
(2) beforeSend (Function): send a request to modify the XMLHttpRequest object before the function, such as adding custom HTTP headers. XMLHttpRequest is the only parameter Function
(3) cache (Boolean): (default: true, dataType for the script when the default is false) jQuery 1.2 new features, is set to false will not be loaded from the browser cache request information.
(4) complete (Function): request completed callback function (success or failure of the request are called).
(5) contentType (String): (default: "application / x-www-form-urlencoded" send a message to the server, the content encoding type.
(6) data (Object, String): the data sent to the server. Request will automatically be converted to string format. GET requests will be added after the URL. See description processData option to disable this automatic conversion. Must
Key / Value format. If an array, jQuery will automatically correspond to different values of the same name. If (foo: ["bar1", "bar2"]) converted to '& foo = bar1 & foo = bar2'.
(7) dataFilter (Function): Ajax returned to pre-process the raw data of the function.
(8) dataType (String): expected data type returned by the server, "xml", "html", "script", "json", "jsonp", "text".
(9) error (Function): (default: automatically determine (xml or html)) call to the time when the request fails.
(10) global (Boolean): (default: true) whether the trigger global AJAX event. Set to false will not trigger global AJAX event
(11) ifModified (Boolean): (default: false) only when data changes on the server for new data. Use of HTTP Last-Modified header packet to judge.
(12) jsonp (String): rewrite the request in a jsonp callback function name.
(13) password (String): used to respond to HTTP requests to access the password authentication
(20) username (String): HTTP access authentication request in response to user name
(14) processData (Boolean): (default: true) by default, send the data will be converted to an object (technically not a string) to meet the default content type "application / x-www-form-urlencoded". As
DOM tree fruit to send messages or other do not want to change, please set to false.
(15) scriptCharset (String): Only when the request dataType to "jsonp" or "script", and the type is "GET" will force changes for charset. Usually local and remote content encoding is not the same time.
(16) success (Function): Request success callback function. Parameters: server returns data, data format. Ajax event.
(17) timeout (Number): Set the request timeout (ms), this setting will override the global setting.
(18) type (String): (default: "GET" request method ("POST" or "GET"), default is "GET".
(19) url (String): (default: current page address) to send the requested address.
Parameters used: separate, such as:
$. Ajax ((
url: "test.html",
cache: false,
success: function (html) (
$ ("# Results"). Append (html);
)
));
2, packaged easy way (callback function is successful implementation of the parameter is the return of data)
jQuery.get (url, [data], [callback])
jQuery.getJSON (url, [data], [callback])
jQuery.getScript (url, [callback]) load and execute remote JS
jQuery.post (url, [data], [callback])
load (url, [data], [callback]) to load the remote HTML DOM of the currently selected
3, the event (Event parameter for the event, XMLHttpRequest, ajaxOptions, thrownError)
ajaxError (callback) AJAX request function to be executed when an error occurs.
ajaxSend (callback) AJAX request is sent before the implementation of the function
ajaxComplete (callback) AJAX request completes execution function
ajaxStart (callback) AJAX request for the beginning of the implementation of function
ajaxStop (callback) AJAX request function to be executed at the end of
ajaxSuccess (callback) AJAX request is successful implementation of the function
jQuery.ajaxSetup (options) set the global default values Ajax
serialize () the contents of a string sequence form
serializeArray () sequence of the form elements (like '. serialize ()' method) to return JSON data structure data
7, used the static method
jQuery.boxModel the current page in the browser is rendering the page using the standard box model
jQuery.browser browser core identity. Based navigator.userAgent judge.
Possible values: safari opera msie mozilla
jQuery.browser.version browser rendering engine version.
jQuery.each (obj, callback) method over the general cases, can be used for patients over the objects and arrays.
jQuery.inArray (value, array) the first parameter to determine the location in the array (if not found returns -1).
jQuery.map (array, callback) to an array of objects into an array of class objects, the return value is data, callback can be processed on the old array of individual
jQuery.unique (array) delete array elements are repeated.