JQUERY common methods

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 an attribute/value to an element $ ("img "). attr ("title", function () {return this. src}); add a property/value 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 content of the element to the end of the element $ ("element name "). appendTo (content); element $ ("element name") after content "). before (content); opposite to the after method $ ("element name "). clone (Boolean expression) when the Boolean expression is true, the cloned element (treated as true if no parameter exists) $ ("element name "). empty () sets the content of this element to null $ ("element name "). insertAfter (content); insert this element into content $ ("element name "). insertBefore (content); insert this element before content $ ("element "). prepend (content); Put content as a part of the element 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"); uses 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 (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 $ (elems) in the body to obtain an element on the DOM $ (function (){........}); Execute a function $ ("div> p" ).css ("border", "1px solid gray"); find the subnode p of all div, and add the style $ ("input: radio ", document. forms [0]) Find all radio buttons in the first form on the current page $. extend (prop) prop is a jQuery object, for 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, $ () query the DOM elements in the current HTML document. Each (callback) uses each matching element as the context to execute a function example: 1 $ ("span "). click (function) {$ ("li "). each (function () {$ (this ). toggleClass ("example ");});

});

Example: 2 $ ("button "). click (function () {$ ("div "). each (function (index, domEle) {// domEle = this variable (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. On each page, many functions can be loaded and executed in the order of fn. 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 each event that matches an element (such as click. On each object, the event handler 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 ), at the same time, cancel the default unbind ([type], [data]) unbinding action of the browser to this event, and delete the Bound event from each matching element. $ ("P "). unbind () removes all bound events in all paragraphs $ ("p "). unbind ("click") removes the click Event hover (over, out) over in all paragraphs. out is a method. When you move the cursor over a matched 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) If a matching element is clicked, the specified first function is triggered. 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: Optional fn is a function without parameters. JQuery does not support reset events of form elements. Event Description supports element or object blur () element loss of focus a, input, textarea, button, select, label, map, area change () user changes the content of the field input, textarea, select click () mouse click an object almost all elements dblclick () mouse double-click an object almost all elements error () when loading a document or image an error window occurs, img focus () element obtains focus a, input, textarea, button, select, label, map, area keydown (). Keys of a keyboard are pressed by almost all elements keypress () A keyboard key is pressed or held down by almost all elements keyup () A keyboard key is released 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 by almost all elements mouseout (fn) the mouse removes almost all elements from a certain element mouseover (fn) move the mouse over an element. Almost all elements: mouseup (fn) a mouse button is released. Almost all elements: resize (fn) window or frame: adjusted size: window, iframe, frame scroll (fn) when you scroll through the visible part of a document, the window select () text is selected and the document, input, textarea submit () submit button is clicked. The form unload (fn) User exits the window JQuery Ajax method description on the page: load (url, [data], [callback]) loads a remote HTML content to a DO M 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. When the AJAX request starts (and is not activated yet), the loading information is displayed $ ("# 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 that displays information when the AJAX request is successfully completed. $ ("# 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. Function showValues () {var str = $ ("form") is implemented in the correct form element sequence "). serialize (); $ ("# results "). text (str) ;}$ (": checkbox,: radio "). click (showValues); $ ("select "). change (showValues); showValues (); serializeArray () connects all form and form elements (similar. serialize () method), but returns a JSON data format. Obtain a set of values from the form. function showValues () {var fields = $ (": input") is displayed "). 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 an elegant animation, and triggers a callback function toggle () to switch the visible state of the element after the display is complete. 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 is displayed as "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 a "slide. FadeIn (speed, [callback]) fades in all matching elements by changing 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 the 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) add an executable function at the end of the event sequence of each matching element as the event function queue (queue) of this element) use a new animation sequence instead of the original animation sequence dequeue () of all matching elements to execute and remove the animation Animations (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. The JQuery Traversing method indicates that the eq (index) gets an element at the specified position from the matched element set. The index starts from 0 and filters (expr) returns the element set that matches the specified expression, you can use the "," number 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 expression, true is returned. 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 element find (expr) to search for all elements matching the specified expression. Next ([expr]) gets a set of elements next to each element in the matched element set. NextAll ([expr]) obtains a parent ([expr]) set of elements of all later siblings of each element in a matched element set. 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 matched element set to the current set to obtain all div elements and p elements, and adds border class attributes. Obtain the p element of all div elements and add the background class attribute $ ("div "). find ("p "). andSelf (). addClass ("border"); $ ("div "). find ("p "). addClass ("background"); end () ends the current operation. Return to the previous operation of the current operation, locate the span element set in all p elements, and return the p element set, add the css attribute $ ("p "). find ("span" ).end().css ("border", "2px red solid"); JQuery Selectors method description basic selector $ ("# myDiv ") match a unique element with this id value $ ("div") match all elements with the specified name $ (". myClass ") matches all elements with this class style value $ (" * ") matches all elements $ (" div, span, p. myClass ") joins all matched Selector cascade selector $ ("form input") descendant selector, select all descendant nodes of ancestor $ ("# main> *") Child selector, select all child nodes of the parent $ ("label + input") tab selector and select the next child node of the prev $ ("# prev ~ Div ") compatriot selector, select the basic filter selector for all compatriot nodes of prev $ (" tr: first ") match the first selected element $ (" tr: last ") match the last selected element $ ("input: not (: checked) + span") to filter out all elements matching the selector from the original element set (here there is a temporary selector) $ ("tr: even") matches all elements in an even position in the Set (starting from 0) $ ("tr: odd ") match all elements in the odd number position of the Set (starting from 0) $ ("td: eq (2)") match the elements in 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 )") match All elements before the specified position in the Set (starting from 0) $ (": header") match all titles $ ("div: animated ") filter selector that matches all element content of all running animations $ ("div: cont Ains ('john') ") match all elements containing the specified text $ (" td: empty ") match all empty elements (only elements containing the text are not empty) $ ("div: has (p)") matches all elements containing at least one selector from the original element set again $ ("td: parent ") match all non-empty elements (the elements containing text are also considered) $ ("div: hidden") match all hidden elements, including the form's hidden fields $ ("div: visible ") match all visible element attributes filter selector $ (" div [id] ") match all elements with specified attributes $ (" input [name = 'newsletter '] ") match All elements with the specified property value $ ("input [name! = 'Newsletter'] ") match 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 ']") match All elements whose values end with values $ ("input [name * = 'man']") match All elements whose specified property value contains the value character $ ("input [id] [name $ = 'man ']") match all the element child elements that match multiple selectors at the same time filter selector $ ("ul li: nth-child (2)"), $ ("ul li: nth-child (odd) "), match the nth child element of the parent element $ (" ul li: nth-child (3n + 1) ") $ (" div span: first-child ") match the 1st child element of the parent element $ ("div span: last-child") match 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") match all types of text input elements $ (": password") match all types of password input elements $ (": text (": radio ") matches all input elements whose types are radio $ (": checkbox ") matches all input elements whose types are checkbox $ (": submit ") match All input elements whose types are submit $ (": image") match all input elements whose types are image $ (": reset ") match All input elements whose types are reset $ (": button") match all input elements whose types are buttons $ (": file ") Match All input elements whose types are file $ (": hidden") match all input elements whose types are hidden or the hidden field form element filter selector of the Form $ (": enabled ") match All operable form elements $ (": disabled") match all unoperable form elements $ (": checked") match all selected elements $ ("select option: select ") match all selected elements. The JQuery CSS method indicates that 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 () {callback (this).css ({backgroundColor: "yellow", fontWeight: "bolder"}) ;}, function () {var cssObj = {backgroundColor: "# ddd ", fontWeight: "", color: "#0028f4"} $(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 attribute values are integers. 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 Matching Element. width (val) sets the specified width value for each matching element. Height () gets the height value of the First Matching Element. height (val) sets the specified height value for each matching element. JQuery Utilities method description jQuery. browser. indicates ie jQuery. browser. the version reads the version information of your browser. 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 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 the spaces at both ends of the string, and uses a regular expression to clear the spaces at both ends of the given character jQuery. each (object, callback) is a common iterator that can be used to seamlessly iterate objects and arrays of 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); merges the defaults 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. 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 array-like object into a real array and converts the selected div Element Set into 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 jQuery is returned. unique (array) deletes all repeated elements in the array and returns the sorted array.