Basic tutorials on JQuery common methods

SuccessfulRequest !);}); 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}); serializ

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

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). 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 and allows the Matching Element to 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 can be hidden in a sliding manner.

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 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 p elements and p elements, and add 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.

Vertex (fig fig ("border", "2px red solid ");

JQuery Selectors method description

Basic Selector

$ ("# MyDiv") matches a unique element with this id value

$ ("P") matches all elements of 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 child nodes of ancestor

$ ("# Main> *") Child selector, select all child nodes of the parent

$ ("Label + input") Select the next node of prev

$ ("# Prev ~ P ") 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") filters 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 whose types are reset.

$ (": 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 type "hidden ".

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 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 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.