JQuery method Daquan for easy learning reference

Dom:

Attribute:
$ ("P"). addClass (style type defined in css); add a style to an element
$ ("Img"). attr ({src: "test.jpg", alt: "test Image"}); add attributes/values to an element. The parameter is map.
$ ("Img"). attr ("src", "test.jpg"); add attributes/values to an element
$ ("Img"). attr ("title", function () {return this. src}); add attributes/values to an element
$ ("Element name" ).html (); obtain the content (elements, text, etc.) in the element)
$ ("Element name" ).html ("<B> new stuff </B>"); set content for an element
$ ("Element name"). removeAttr ("attribute name") deletes a specified attribute and its value for an element.
$ ("Element name"). removeClass ("class") deletes a specified style for an element.
$ ("Element name"). text (); get the text of this element
$ ("Element name"). text (value); set the text value of this element to value
$ ("Element name"). toggleClass (class) cancels when the element has a style in the parameter. If it does not exist, set this style.
$ ("Input element name"). val (); get the value of the input element
$ ("Input element name"). val (value); set the value of the input element to value
Manipulation:
$ ("Element name"). after (content); add content after the Matching Element
$ ("Element name"). append (content); insert content as the element content to the end of the element
$ ("Element name"). appendTo (content); Add the element after the content
$ ("Element name"). before (content); opposite to the after Method
$ ("Element name"). clone (Boolean expression) when the Boolean expression is true, the cloned element is treated as true if no parameter exists)
$ ("Element name"). empty () sets the content of this element to null
$ ("Element name"). insertAfter (content); insert the element to the content
$ ("Element name"). insertBefore (content); insert the element before the content
$ ("Element"). prepend (content); Use content as a part of the element and place it at the beginning of the element.
$ ("Element"). prependTo (content); Use this element as a part of content and put it at the beginning of content
$ ("Element"). remove (); Delete all specified elements
$ ("Element"). remove ("exp"); Delete all elements containing exp
$ ("Element"). wrap ("html"); Use html to enclose this element
$ ("Element"). wrap (element); Use element to enclose this element
Traversing:
Add (expr)
Add (html)
Add (elements)
Children (expr)
Contains (str)
End ()
Filter (expression)
Filter)
Find (expr)
Is (expr)
Next (expr)
Not (el)
Not (expr)
Not (elems)
Parent (expr)
Parents (expr)
Prev (expr)
Siblings (expr)

Core:
$ (Html). appendTo ("body") is equivalent to writing an html code in the body.
$ (Elems) gets an element in the DOM
$ (Function (){........}); Execute a function
$ ("Div> p" ).css ("border", "1px solid gray"); find the child node p of all div, add style
$ ("Input: radio", document. forms [0]) Search for all radio buttons in the first form on the current page
$. Extend (prop) prop is a jQuery object,
Example:
JQuery. extend ({
Min: function (a, B) {return a <B? A: B ;},
Max: function (a, B) {return a> B? A: B ;}
});
JQuery (expression, [context]) --- $ (expression, [context]); by default, $ () queries the DOM elements in the current HTML document.

Each (callback) executes a function using each matching element as the context.
Example: 1
$ ("Span"). click (function ){
$ ("Li"). each (function (){
$ (This). toggleClass ("example ");
});
});
Example: 2
$ ("Button"). click (function (){
$ ("Div"). each (function (index, domEle ){
// DomEle = this
((Domele).css ("backgroundColor", "yellow ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("Stopped at div index #" + index );
Return false;
}
});
});


JQuery Event:

Ready (fn); $ (document). ready () Note that there is no onload event in the body; otherwise, this function cannot be executed. You can
Many functions are loaded and executed in the fn order.
Bind (type, [data], fn) binds one or more event processor functions for a specific event that matches an element, such as click. Possible event attributes include: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
Mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
Keyup, error
One (type, [data], fn) binds one or more event processor functions for a specific event that matches an element, such as click. In each pair
As shown in the preceding figure, the event processing function is executed only once. Other rules are the same as those of the bind () function.

Trigger (type, [data]) triggers an event on each matching element.
TriggerHandler (type, [data]) triggers a specific event on an element (specify an event type), and cancels the default action of the browser on this event.
Unbind ([type], [data]) is unbound from each matching element.
$ ("P"). unbind () Remove all bound events in all paragraphs
$ ("P"). unbind ("click") Remove the click Event on all paragraphs
Hover (over, out) over and out are all methods. When you move the cursor over a matching element, the specified first function is triggered. When you move the cursor out of this element, the specified second function is triggered.
$ ("P"). hover (function (){
$ (This). addClass ("over ");
},
Function (){
$ (This). addClass ("out ");
}
);

Toggle (fn, fn) triggers the specified first function if a matching element is clicked. When you click the same element again, the second function is triggered.
$ ("P"). toggle (function (){
$ (This). addClass ("selected ");
},
Function (){
$ (This). removeClass ("selected ");
}
);




Element event list description
Note: For a function without parameters, the parameter is optional fn. JQuery does not support reset events of form elements.
Event Description supports elements or objects.
Blur () element loses focus a, input, textarea, button, select, label, map, area
Change () user changes the field content input, textarea, select
Click () the mouse clicks almost all elements of an object.
Dblclick () double-click almost all elements of an object
Error () an error occurs when a document or image is loaded. window, img
The focus () element obtains the focus a, input, textarea, button, select, label, map, and area.
Keydown () A keyboard key is pressed by almost all elements
Keypress () A keyboard key is pressed or pressed to almost all elements
Keyup () A keyboard key is released to almost all elements
Load (fn) a page or image is loaded. window, img
Mousedown (fn) a mouse button is pressed by almost all elements
Mousemove (fn) the mouse is moved to almost all elements
Mouseout (fn) move the mouse over an element to remove almost all elements.
Mouseover (fn) move the mouse over a certain element to almost all elements
Mouseup (fn) a mouse button is released to almost all elements
Resize (fn) window or frame size adjusted window, iframe, frame
Window when scroll (fn) is rolling the visible part of the document
Select () text selected document, input, textarea
The submit () submit button is clicked by form
Unload (fn) User exit page window



JQuery Ajax method description:

Load (url, [data], [callback]) loads a remote HTML content to a DOM node.
$ ("# Feeds"). load ("feeds.html"); load the feeds.html file into the div with the id of feeds
$ ("# Feeds"). load ("feeds. php", {limit: 25}, function (){
Alert ("The last 25 entries in the feed have been loaded ");
});

JQuery. get (url, [data], [callback]) uses GET to request a page.
$. Get ("test. cgi", {name: "John", time: "2"}, function (data ){
Alert ("Data Loaded:" + data );
});

JQuery. getJSON (url, [data], [callback]) uses GET to request JSON data.
$. GetJSON ("test. js", {name: "John", time: "2"}, function (json ){
Alert ("JSON Data:" + json. users [3]. name );
});

JQuery. getScript (url, [callback]) uses GET to request and execute JavaScript files.
$. GetScript ("test. js", function (){
Alert ("Script loaded and executed .");
});
JQuery. post (url, [data], [callback], [type]) uses POST to request a page.

AjaxComplete (callback) executes a function after an AJAX request is completed. This is an Ajax event
$ ("# Msg"). ajaxComplete (function (request, settings ){
$ (This). append ("<li> Request Complete. </li> ");
});
AjaxError (callback) executes a function when an AJAX request fails. This is an Ajax event
$ ("# Msg"). ajaxError (function (request, settings ){
$ (This). append ("<li> Error requesting page" + settings. url + "</li> ");
});

AjaxSend (callback) executes a function when an AJAX request is sent. This is an Ajax event
$ ("# Msg"). ajaxSend (function (evt, request, settings ){
$ (This). append ("<li <Starting request at" + settings. url
+ "</Li <");
});

AjaxStart (callback) executes a function when an AJAX request starts but is not activated. This is an Ajax event
The loading information is displayed when the AJAX request starts (and is not activated ).
$ ("# Loading"). ajaxStart (function (){
$ (This). show ();
});

AjaxStop (callback) executes a function when all AJAX operations are stopped. This is an Ajax event
When all AJAX requests are stopped, the loading information is hidden.
$ ("# Loading"). ajaxStop (function (){
$ (This). hide ();
});

AjaxSuccess (callback) executes a function after an AJAX request is successfully completed. This is an Ajax event
When the AJAX request is successfully completed, the information is displayed.
$ ("# Msg"). ajaxSuccess (function (evt, request, settings ){
$ (This). append ("<li> Successful Request! </Li> ");
});

JQuery. ajaxSetup (options) sets global settings for all AJAX requests. View the $. ajax function to obtain all the options.
Set the default global AJAX request option.
$. AjaxSetup ({
Url: "/xmlhttp /",
Global: false,
Type: "POST"
});
$. Ajax ({data: myData });

Serialize () connects a group of input elements by name and value. The correct form element sequence is implemented.
Function showValues (){
Var str = $ ("form"). serialize ();
$ ("# Results"). text (str );
}
$ (": Checkbox,: radio"). click (showValues );
$ ("Select"). change (showValues );
ShowValues ();

SerializeArray () connects all form and form elements (similar to the. serialize () method), but returns a JSON data format.
Obtain a set of values from the form and display them.
Function showValues (){
Var fields = $ (": input"). serializeArray ();
Alert (fields );
$ ("# Results"). empty ();
JQuery. each (fields, function (I, field ){
$ ("# Results"). append (field. value + "");
});
}
$ (": Checkbox,: radio"). click (showValues );
$ ("Select"). change (showValues );
ShowValues ();

JQuery Effects method description

Show () shows hidden matching elements.
Show (speed, [callback]) displays all matching elements in an elegant animation, and triggers a callback function optional after the display is complete.
Hide () hides all matching elements.
Hide (speed, [callback]) hides all matching elements with elegant animations, and triggers a callback function after the display is complete.
Toggle () switches the visible state of the element. If the element is visible, switch to hidden. If the element is hidden,
Switch to visible.
SlideDown (speed, [callback]) dynamically displays all matching elements by changing the height (increasing down). Optional
To trigger a callback function. This animation only adjusts the height of the element, so that the matching element can be
"Slide.
SlideUp (speed, [callback]) dynamically hides all matching elements by changing the height (decreasing upwards). It is optional after hiding.
Triggers a callback function. This animation only adjusts the height of the element, so that the matching element can be "slide"
.
SlideToggle (speed, [callback]) switches the visibility of all matching elements through height changes, and triggers an optional response after switching.
Call a function. This animation only adjusts the height of the element, so that the matching element is hidden in a "slide" way.
Hidden or displayed.
FadeIn (speed, [callback]) realizes the fade-in effect of all matching elements by changing the opacity. After the animation is complete, it can be triggered.
Send a callback function. This animation only adjusts the opacity of the element, that is,
The height and width do not change.
FadeOut (speed, [callback]) fades out all matching elements by changing the opacity. After the animation is complete
Send a callback function. This animation only adjusts the opacity of the element, that is,
The height and width do not change.
FadeTo (speed, opacity, [callback]) Incrementally adjusts the opacity of all matching elements to the specified opacity and completes the animation.
Then, a callback function is triggered. This animation only adjusts the opacity of the element, that is,
The height and width of a matched element do not change.
Stop () stops all animations that match the element that are currently running. If an animation is in the queue, it starts immediately.
Queue () gets the reference of the first animation sequence that matches the element (returns an array whose content is a function)
Queue (callback) adds an executable function at the end of the event sequence of each matching element as the event function of this element.
Queue (queue) replaces the original animation sequence of all matching elements with a new animated sequence
Dequeue () executes and removes the animation at the front end of the animation sequence
Animate (params, [duration], [easing], [callback]) is a function used to create a custom animation.
Animate (params, options) is another way to create a custom animation. Same as above.


JQuery Traversing method description

Eq (index) obtains an element at the specified position from the matched element set, and the index starts from 0.
Filter (expr) returns a set of elements that match the specified expression. You can use the "," sign to separate multiple expr for filtering by multiple conditions.
Filter (fn) uses a special function as a filter condition to remove unmatched elements from the set.
Is (expr) uses an expression to check the selected element set. If at least one element matches the given
Returns true for the expression.
Map (callback) converts a group of elements in the jQuery object using the callback method, and then adds them to a jQuery array.
Not (expr) removes the elements that match the specified expression from the matched element set.
Slice (start, [end]) obtains a subset from the Matching Element Set, which is the same as the slice Method of the built-in array.
Add (expr) adds the elements matching the expression to the jQuery object.
Children ([expr]) obtains a set of elements that contain all child elements of each element in a matched element set. Optional Filters
This method will match only the matching elements (including only the element nodes, not the text nodes ).
Contents () obtains a set of all child nodes of each element in a matched element set (only including element nodes, not
Including text nodes). If the element is iframe, the document element is obtained.
Find (expr) searches for all elements that match the specified expression.
Next ([expr]) gets a set of elements next to each element in the matched element set.
NextAll ([expr]) obtains a set of elements that contain all the following peer elements of each element in the matched element set.
Parent ([expr]) obtains a set of elements that contain the unique parent element of all matching elements.
Parents ([expr]) obtains a set of elements (excluding the root element) that contain the unique ancestor element of all matching elements ).
Prev ([expr]) obtains a set of elements that match the previous generation element next to each element in the element set.
PrevAll ([expr]) obtains a set of elements that contain all the previous peer elements of each element in the matched element set.
Siblings ([expr]) obtains an element set of all peer elements of each element in a matched element set.
AndSelf () adds the previous Matching Element Set to the current set
Obtain all div elements and p elements, and add border class attributes. Obtain the p element of all div elements,
Add background class attributes
$ ("Div"). find ("p"). andSelf (). addClass ("border ");
$ ("Div"). find ("p"). addClass ("background ");
End () ends the current operation and returns to the previous operation of the current operation.
Locate the span element set in all p elements, return the p element set, and add the css attribute.
$ ("P"). find ("span" cmd.end(cmd.css ("border", "2px red solid ");

JQuery Selectors method description

Basic Selector
$ ("# MyDiv") matches a unique element with this id value
$ ("Div") matches all elements of the specified name
$ (". MyClass") matches all elements with this class style Value
$ ("*") Matches all elements
$ ("Div, span, p. myClass") associates with all matching selectors
Cascade Selector
$ ("Form input") descendant selector, select all descendant nodes of ancestor
$ ("# Main> *") Child selector, select all child nodes of the parent
$ ("Label + input") Select the next node of prev
$ ("# Prev ~ Div ") compatriot selector, select all compatriot nodes of prev
Basic filter Selector
$ ("Tr: first") matches the first selected Element
$ ("Tr: last") matches the last selected Element
$ ("Input: not (: checked) + span") filter out all elements matching the selector from the original element set (here there is a temporary selector)
$ ("Tr: even") matches all elements in the even position of the Set (starting from 0)
$ ("Tr: odd") matches all elements at the odd position in the Set (starting from 0)
$ ("Td: eq (2)") matches the elements at the specified position in the Set (starting from 0)
$ ("Td: gt (4)") matches all elements after a specified position in the Set (starting from 0)
$ ("Td: gl (4)") matches all elements before the specified position in the Set (starting from 0)
$ (": Header") matches all titles
$ ("Div: animated") matches all elements of all running animations
Content Filter Selector
$ ("Div: contains ('john')") matches all elements containing the specified text
$ ("Td: empty") matches all empty elements (elements containing only text are not empty)
$ ("Div: has (p)") matches all elements containing at least one selector from the original element set again
$ ("Td: parent") matches all non-null elements (elements containing text are also considered)
$ ("Div: hidden") matches all hidden elements, including the hidden fields of the form.
$ ("Div: visible") matches all visible elements
Attribute filter Selector
$ ("Div [id]") matches all elements with specified attributes
$ ("Input [name = 'newsletter ']") matches all elements with specified attribute values.
$ ("Input [name! = 'Newsletter'] ") matches all elements that do not have the specified attribute value.
$ ("Input [name ^ = 'News']") matches all elements whose specified attribute values start with value.
$ ("Input [name $ = 'Letter ']") matches all elements whose values end with values.
$ ("Input [name * = 'man']") matches all elements whose specified property value contains the value character.
$ ("Input [id] [name $ = 'man']") matches all elements that match multiple selectors at the same time.
Child element filter Selector
$ ("Ul li: nth-child (2 )"),
$ ("Ul li: nth-child (odd)") matches the nth child element of the parent element.
$ ("Ul li: nth-child (3n + 1 )")

$ ("Div span: first-child") matches the 1st child element of the parent Element
$ ("Div span: last-child") matches the last child element of the parent Element
$ ("Div button: only-child") matches the unique child element of the parent element.
Form element Selector
$ (": Input") matches all form input elements, including all types of input, textarea, select, And button
$ (": Text") matches all input elements of the text type.
$ (": Password") matches all input elements of the password type.
$ (": Radio") matches all input elements of the radio type.
$ (": Checkbox") matches all input elements whose types are checkbox.
$ (": Submit") matches all input elements of the submit type.
$ (": Image") matches all input elements of the image type.
$ (": Reset") matches all input elements of the reset type.
$ (": Button") matches all input elements of the button type.
$ (": File") matches all input elements whose types are file.
$ (": Hidden") matches the hidden fields of all input elements or forms of the hidden type.
Form element filter Selector
$ (": Enabled") matches all operable form elements
$ (": Disabled") matches all form elements that cannot be operated
$ (": Checked") matches all selected elements
$ ("Select option: selected") matches all selected elements


JQuery CSS

Css (name) accesses the style attribute of the First Matching Element.
Css (properties) sets a "name/value pair" object as the style attribute of all matching elements.
$ ("P"). hover (function (){
Certificate (this).css ({backgroundColor: "yellow", fontWeight: "bolder "});
}, Function (){
Var cssObj = {
BackgroundColor: "# ddd ",
FontWeight :"",
Color: "#0028f4"
}
Certificate (this).css (cssObj );
});
Css (name, value) sets the value of a style attribute among all matching elements.
Offset () gets the position of the matching first element relative to the current visible window. The returned object has two attributes,
Top and left. The property value is an integer. This function can only be used for visible elements.
Var p = $ ("p: last ");
Var offset = p. offset ();
P.html ("left:" + offset. left + ", top:" + offset. top );
Width () gets the width value of the first matched element,
Width (val) sets the specified width value for each matching element.
Height () gets the height value of the first matched element,
Height (val) sets the specified height value for each matching element.

JQuery Utilities method description
JQuery. browser
. Msie indicates ie
JQuery. browser. version reads the version information of the user's browser.
JQuery. boxModel: checks whether the browser displays the current page based on the W3C CSS box model.
JQuery. isFunction (obj) checks whether the passed parameter is a function
Function stub (){}
Var objs = [
Function (){},
{X: 15, y: 20 },
Null,
Stub,
"Function"
];
JQuery. each (objs, function (I ){
Var isFunc = jQuery. isFunction (objs [I]);
$ ("Span: eq (" + I + ")"). text (isFunc );
});
JQuery. trim (str) clears spaces at both ends of a string and uses regular expressions to clear spaces at both ends of a given character
JQuery. each (object, callback) is a common iterator that can be used to seamlessly iterate objects and arrays.
JQuery. extend (target, object1, [objectN]) extends an object, modifies the original object, and returns it. This is a powerful implementation inherited
Tool, this inheritance is implemented by passing values, rather than in JavaScript
Prototype.
Merge settings and options objects, and return the modified settings object.
Var settings = {validate: false, limit: 5, name: "foo "};
Var options = {validate: true, name: "bar "};
JQuery. extend (settings, options );

Merge the ults and options objects. The defaults object is not modified. Options object Value
The value of the ults object is passed to empty.

Var empty = {}
Var defaults = {validate: false, limit: 5, name: "foo "};
Var options = {validate: true, name: "bar "};
Var settings = $. extend (empty, defaults, options );
JQuery. grep (array, callback, [invert]) removes items in the array using a filter function
$. Grep ([0, 1, 2], function (n, I ){
Return n> 0;
});
JQuery. makeArray (obj) converts an object similar to an array into a real array.
Converts the selected div element set to an array.
Var arr = jQuery. makeArray (document. getElementsByTagName ("div "));
Arr. reverse (); // use an Array method on list of dom elements
$ (Arr). appendTo (document. body );
JQuery. map (array, callback) uses a method to modify the items in an array, and then returns a new array.
JQuery. inArray (value, array) returns the position of value in the array. If no value is found,-1 is returned.
JQuery. unique (array) deletes all repeated elements in the array and returns the sorted array.