Common functions and attributes in jquery-js tutorial

This article mainly introduces the commonly used functions and attributes in jquery in detail. If you need them, you can refer to them and hope to help you with Dom:
Attribute: Attribute
$ ("P"). addClass (style type defined in css); add a style to an element
$ ("Img"). attr ({src: "test.jpg", title: "test Image"}); add attributes/values to an element. The parameter is map.
$ ("Input"). attr ({"checked", "checked "});
$ ("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" pai.html (" New stuff"); 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) adds a new set of matching elements 'expr' to the current Matching Element Set to form a new set of matching elements;

Example:

The Code is as follows:

$ (Document). ready (function (){
$ ("P" ).css ("border", "2px solid red ")
. Add ("p") // The P element in the document applies the CSS style with the background color yellow;
. Css ("background", "yellow ");
});

Children (expr) obtains the subset set at the first layer of each element from the current matched element set to form a new element set.
The element set that contains the str variable text in the str ins (str) matching set. The Matching Element Set is returned.
End () is used to return the jQuery object before calling the find () or parents () function (or other traversal function ).

Example
$ ("# P1"). find ("p"). hide (). end (). hide ()
The first hide () is for the p tag and end the reference to the p tag with end () and returns to the # p1 tag
So the second hide () is effective for # p1
If end () is not added, both hide () are effective for p labels.

Filter (expression)
Find (expr)
Differences between filter and find:
Filters are selected in a group of selected elements;
Find will be selected in the child nodes of a group of selected elements;

Test 1

Test 2

If we use the find () method:
Var $ find = $ ("p"). find (". rain ");
Alert (LOGIN find.html ());
Will output: Test 1
If the filter () method is used:
Var $ filter = $ ("p"). filter (". rain ");
Alert (export filter.html ());
Will output: Test 2

The difference is:
Find () searches for elements whose class is rain in the p element.
Filter () is the element that filters p's class as rain.
One is to operate on its subset, and the other is to filter its own set elements.

Is (expr) // determine whether an existing set belongs to a part of the 'expr' set or is equal. If yes, true is returned; otherwise, false is returned.

Next (expr) // obtain a sibling element set next to each element in the matched element set.
Not (el) // The matching set does not meet the filtering requirements.

Example:
$ ("P"). not (". green, # blueone ")
$ ("Input: not (: checked) + span ")
$ ('Tr: not ([th]): odd ')

Parent (expr) obtains an element set that contains the unique parent element of all matching elements.
Parents (expr) // obtain the set of all ancestor elements of each element in the matched element set.
Prev (expr) obtains the first sibling Element Set adjacent to each element in the element set Matching Element.
Siblings (expr) obtains the set of all sibling elements of each element in all matched element sets.

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
$ ("P> p" ).css ("border", "1px solid gray"); find the subnode p of all p and add the style
$ ("Input: radio", document. forms [0]) Search for all radio buttons in the first form on the current page
JQuery provides two methods for development plug-ins:
JQuery. extend (object) adds a new method to the class to extend the jQuery class itself.

Example
JQuery. extend ({
Min: function (a, B) {return a <B? A: B ;},
Max: function (a, B) {return a> B? A: B ;}
});
Reference jQuery:

The Code is as follows:

$. Min (3, 4); // return 3
JQuery. fn. extend (object) adds a method to the jQuery object, which is an extension of jQuery. prototype.

JQuery. fn = jQuery. prototype = {
Init: function (selector, context ){//....
//......
};

Example

The Code is as follows:

$. Fn. extend ({
AlertWhileClick: function (){
$ (This). click (function (){
Alert ($ (this). val ());
});
}
});

Reference jQuery:
$ ("# Input1"). alertWhileClick ();

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

The Code is as follows:

$ ("Span"). click (function ){
$ ("Li"). each (function (){
$ (This). toggleClass ("example ");
});
});

Example: 2

The Code is as follows:

$ ("Button"). click (function (){
$ ("P"). each (function (index, domEle ){
// DomEle = this
((Domele).css ("backgroundColor", "yellow ");
If ($ (this). is ("# stop ")){
$ ("Span"). text ("Stopped at p index #" + index );
Return false;
}
});
});

JQuery Event: Event

Ready (fn); $ (document). ready () Note that there is no onload event in the body; otherwise, this function cannot be executed. On each page, many functions can be loaded and executed in the order of fn.

Example:
$ (Document). ready (function () {alert ("aa ");}

Bind (type, [data], fn) binds one or more event processor functions for a specific event that matches an element, such as click. Possible event type attributes include: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Example 1:
$ ('# MyBtn'). bind ("click", function (){
Alert ('click ');
});

Example 2:
Function handler (event ){
Alert (event. data. foo );
}
$ ("P"). bind ("click", {foo: "bar"}, handler)

One (type, [data], fn) binds one or more event processor functions for a specific event that matches an element, such as click. On each object, this event processing function is executed only once. Other rules are the same as those of the bind () function.
Type (String): event type.
Data (Object): (optional) additional data Object passed to the event Object as the event. data Attribute Value.
Fn (Function): The processing Function bound to the event of each matching element.

Trigger (type, [data]) triggers an event on each matching element.
$ ("P"). click (function (event, a, B ){
// For a common Click Event, the and B types are undefined.
// If triggered with the following statement, a points to "foo", and B points to "bar"
}). Trigger ("click", ["foo", "bar"]); toggle (fn, fn) triggers the specified first function if a matching element is clicked, when you click the same element again, the specified second function is triggered.
$ ("P"). toggle (function (){
$ (This). addClass ("selected ");
},
Function (){
$ (This). removeClass ("selected ");
}
);

Example:
$ ("P"). bind ("myEvent", function (event, message1, message2 ){
Alert (message1 + ''+ message2 );
});
$ ("P"). trigger ("myEvent", ["Hello", "World! "]);
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

Example:

The Code is as follows:

Var foo = function (){
// Code for processing an event
};
$ ("P"). bind ("click", foo); //... When you click a paragraph, the function foo is triggered.
$ ("P"). unbind ("click", foo); //... it will never be triggered again

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 ");
}
);

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, supporting elements or objects
The focus () element obtains the focus a, input, textarea, button, select, label, map, and area.
Blur () element loses focus a, input, textarea, button, select, label, map, area
$ ("# In"). focus (function (){
If ($ ("# in"). val () = 'keyword '){
$ ("# In"). val ("")};
}). Blur (function (){
If ($ ("# in"). val () = ''){
$ ("# In"). val ("keyword" ).css ("color", "# ccc ")};
});
Change () user changes the field content input, textarea, select
The change event is triggered when the element loses focus, or when its value changes after the element gets focus.
$ ("Input [type = 'text']"). change (function (){
// Here you can write some verification code
});
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
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 to the p 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? 1.1.23 ", {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? 1.1.23 ", 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 ("

Request Complete.

");
});
AjaxError (callback) executes a function when an AJAX request fails. This is an Ajax event
$ ("# Msg"). ajaxError (function (request, settings ){
$ (This). append ("

Error requesting page "+ settings. url +"

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

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 ("

Successful Request!

");
});

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). After the display is complete, a callback function is triggered. 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) and triggers a callback function after the hiding is complete. This animation only adjusts the height of the element, so that the matching element can be hidden in a "slide" way.
SlideToggle (speed, [callback]) switches the visibility of all matching elements through height changes, and triggers a callback function after switching. This animation only adjusts the height of the element, so that the matching element can be hidden or displayed as "slide.
FadeIn (speed, [callback]) realizes the fade-in effect of all matching elements by changing the opacity, and triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, that is, the height and width of all matched elements do not change.
FadeOut (speed, [callback]) fades out all matching elements by changing the opacity, and triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, that is, the height and width of all matched elements do not change.
FadeTo (speed, opacity, [callback]) Incrementally adjusts the opacity of all matching elements to the specified opacity, and triggers a callback function after the animation is complete. This animation only adjusts the opacity of the element, that is, the height and width of all matched elements 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 multiple conditions.
Ilter (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. The optional filter will make this method match only the elements that match (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 text nodes). If the element is iframe, obtain the document elements.
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 to obtain all p elements and p elements, and adds border class attributes. Obtain the p element from all p elements,
Add background class attributes
$ ("P"). find ("p"). andSelf (). addClass ("border ");
$ ("P"). 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 selector method description

Basic Selector
$ ("# MyDiv") matches a unique element with this id value
$ ("P") matches all elements with the specified name
$ (". MyClass") matches all elements with this class style Value
$ ("*") Matches all elements
$ ("P, 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") Click the selector to select the next input element node of all label elements. The test selector returns all input tag elements directly following the label followed by an input tag.

$ ("# Prev ~ P ") compatriot selector. This selector returns all the p tags of the Tag Element whose id is prev that belong to the same parent element.

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
$ ("P: animated") matches all elements of all running animations

Content Filter Selector
$ ("P: contains ('john')") matches all elements containing the specified text
$ ("Td: empty") matches all empty elements (elements containing only text are not empty)
$ ("P: 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)
$ ("P: hidden") matches all hidden elements, including the hidden fields of the form.
$ ("P: visible") matches all visible elements

Attribute filter Selector
$ ("P [id]") matches all elements with the specified attribute
$ ("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 )")

$ ("P span: first-child") matches the 1st child element of the parent Element
$ ("P span: last-child") matches the last child element of the parent Element
$ ("P 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: "rgb (244 )"
}
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 tool for inheritance, this inheritance is implemented by passing values, rather than the prototype chain in JavaScript.
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. The values in the options object are passed to empty instead of the values of the ults object.

The Code is as follows:

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 p element set to an array.
Var arr = jQuery. makeArray (document. getElementsByTagName ("p "));
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.