Summary of common methods of jquery

1. References to page elements
The $ () reference element through jquery includes methods such as the ID, class, element name, and the hierarchy of elements and Dom or XPath conditions, and the returned object is a JQuery object (collection Object) and cannot be called directly by the DOM-defined method.
2. The conversion of JQuery objects to DOM objects
Only jquery objects can use the method defined by jquery. Note that DOM objects are different from jquery objects, and you should be aware of whether you are manipulating DOM objects or jquery objects when calling methods.
Ordinary DOM objects can generally be converted to jquery objects by $ ().
such as: $ (document.getElementById ("MSG")) is a jquery object, you can use the method of jquery.
Because the jquery object itself is a collection. So if a jquery object is to be converted to a DOM object, it must take one of these items, which is generally available through the index.
such as: $ ("#msg") [0],$ ("div"). EQ (1) [0],$ ("div"). get () [1],$ ("TD") [5] These are DOM objects, you can use the methods in the DOM, but you can't use the jquery method.
The following are the correct ways to do this:
3. How to get an item of the jquery collection
For a collection of captured elements, getting one of these items (specified by index) can be obtained using the EQ or get (n) method or index number, note that the EQ returns the JQuery object, and the Get (n) and the index return the DOM element object. jquery can only be used for jquery objects, and Dom objects can only use the DOM method, for example, to get a third
The content of the element. There are two ways to do this:
$ ("div"). EQ (2). html (); Methods for invoking jquery objects
$ ("div"). Get (2). InnerHTML; Invoking the Dom's method properties
4. The same function implements set and get
Many of the methods in jquery are the same, mainly including the following:
$ ("#msg"). html (); Returns the HTML content of an element node with an ID of MSG.
The "New content" is written as an HTML string in the element node content with the ID msg, and the page displays a bold new content
$ ("#msg"). Text (); Returns the text content of an element node with an ID of MSG.
Writes "New content" as a plain text string in the element node content with ID msg, and the page displays the new content
$ ("#msg"). Height (); Returns the height of an element with an ID of MSG
$ ("#msg"). Height ("300″"); Set the height of the element with ID msg to 300
$ ("#msg"). width (); Returns the width of an element with an ID of MSG
$ ("#msg"). Width ("300″"); Set the width of the element with ID msg to 300
$ ("input"). Val ("); Returns the value of the form input box
$ ("input"). Val ("Test"); Set the value of the form input box to test
$ ("#msg"). Click (); Trigger Click event for an element with ID msg
$ ("#msg"). Click (FN); Add function for element with ID MSG Click event
The same Blur,focus,select,submit event can have two methods of invocation
5. Set Processing function
For the collection content returned by jquery without our own loop traversal and processing of each object individually, jquery has provided a convenient way for us to handle the collection.
There are two different forms:
Sets a different font color for the P elements indexed by 0,1,2 respectively.
To implement a table's interlaced color change effect
A click event is added for each P element, and a P element pops up its contents
6, expand the functions we need
}); Expanded the Min,max two methods for jquery
To use the extended method (called by the "$. Method Name"):
7. Ligatures of support methods
The so-called ligatures, that is, a jquery object can be continuously called a variety of different methods.
For example:
8. Style of Operation elements
The main methods include the following:
$ ("#msg"). CSS ("background"); Returns the background color of an element
$ ("#msg"). CSS ("Background", "#ccc")//Set element background is gray
$ ("#msg"). Height (300); $ ("#msg"). Width ("200″"); Set width height
$ ("#msg"). CSS ({color: "Red", Background: "Blue"});//Set style in the form of a name value pair
$ ("#msg"). AddClass ("select"); Adds a class with the name select for the element
$ ("#msg"). Removeclass ("select"); Remove the class with the element name of select
$ ("#msg"). Toggleclass ("select"); Delete (Add) class with Name Select if present (not present)
9. Perfect Event Handling function
jquery has provided us with a variety of event handling methods, and we do not need to write events directly on HTML elements, but we can add events directly to the objects acquired through jquery.
Such as:
$ ("#msg"). Click (function () {})//Add an event for the element
Set different processing for three different P-element click events, respectively
A few custom events in jquery:
(1) Hover (FN1,FN2): A method that mimics the hover event (moving the mouse over an object and moving out of the object). The first function that is specified is triggered when the mouse moves over a matching element. When the mouse moves out of this element, the specified second function is triggered.
When the mouse is placed on a row of the table, the class is set to over, leaving the time to be out.
(2) Ready (FN): Binds a function to execute when DOM loading is available for querying and manipulating.
The page loads and prompts "load Success", which is equivalent to the OnLoad event. Equivalent to $ (FN)
(3) Toggle (EVENFN,ODDFN): Toggles the function to be called each time it is clicked. If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered. Each subsequent click repeats the call to the two functions.
Rotate each Click to add and remove class named selected.
(4) Trigger (EventType): Triggers a class of events on each matched element.
For example:
$ ("P"). Trigger ("click"); Trigger Click event for all P elements
(5) Bind (EVENTTYPE,FN), Unbind (EventType): Event bindings and binding
Removes the bound event from each matching element (added).
For example:
$ ("P"). Bind ("click", Function () {. text ());}); Add a click event for each P element
$ ("P"). Unbind (); Delete all events on all P elements
$ ("P"). Unbind ("click")//delete the Click event on all P elements
10. Several practical effect functions
where the toggle () and Slidetoggle () methods provide state switching functionality.
such as the toggle () method includes the Hide () and show () methods.
The Slidetoggle () method includes the Slidedown () and Slideup methods.
11. Several useful jquery methods
$.browser. Browser type: detects browser type. Valid parameters: Safari, Opera, MSIE, Mozilla. If the detection is Ie:$.browser.isie, ie browser returns TRUE.
$.each (obj, fn): A general-purpose iterative function. Can be used to iterate objects and arrays approximately (instead of loops).
Such as
Equivalent to:
You can also work with JSON data, such as
The result is:
$.extend (TARGET,PROP1,PROPN): Extends an object with one or more other objects, returning the extended object. This is how the jquery implementation inherits.
Such as:
Merge settings and options, and return the merge results to settings, equivalent to the options inheritance setting and save the inherited results in setting.
Merges defaults and options, and returns the merge results to setting without overwriting the default content.
can have multiple parameters (merge multiple items and return)
$.map (Array, fn): array mapping. Saves an item in an array (after processing the transform) to another new array, and returns the resulting new array.
Such as:
Temparr content is: [4,5,6]
Temparr content is: [2,3]
$.merge (ARR1,ARR2): Merges two arrays and removes duplicate items.
such as: $.merge ([0,1,2], [2,3,4])//return [0,1,2,3,4]
$.trim (str): Removes whitespace characters at both ends of a string.
such as: $.trim ("Hello, how is You?"); Back to "Hello,how is you?" "
12. Resolving conflicts between custom methods or other class libraries and jquery
Many times we have defined the $ (ID) method to get an element, or some other JS class library such as prototype also defined the $ method, if you put together these elements will cause variable method definition conflict, jquery specifically provides a way to solve this problem.
Use the Jquery.noconflict () method in jquery to pass control of the variable $ to the first library that implements it or to the previously customized $ method. Then when applying jquery, just replace all of the $ with jquery, such as the original Reference object method $ ("#msg") to jquery ("#msg").
Such as:
Get started with jquery
Use $ () for other libraries
A list of common methods for jquery:
Attribute:
$ (P). addclass (style types defined in CSS); Add a style to an element
$ (IMG). attr ({src:test.jpg,alt:test Image}); To add an attribute/value to an element, the parameter is a map
$ (IMG). attr (src,test.jpg); Add an attribute/value to an element
$ (IMG). attr (title, function () {return this.src}); Add an attribute/value to an element
$ (element name). html (); Get the content within the element (elements, text, etc.)
$ (element name). html (new stuff); Set content to an element
$ (element name). Removeattr (property name) deletes the specified property and the value of the property to an element
$ (element name). Removeclass (Class) to delete the specified style for an element
$ (element name). text (); Gets the text of the element
$ (element name). text (value); Sets the text value of this element to value
$ (element name). Toggleclass (Class) is canceled when the element has a style in the argument, and if it does not exist, set the style
$ (INPUT element name). val (); Gets the value of the INPUT element
$ (INPUT element name). val (value); Sets the value of the INPUT element to
Manipulation:
$ (element name). After (content); Add content after a matching element
$ (element name). append (content); Insert content as the element's contents behind the element
$ (element name). appendTo (content); Connect elements after content
$ (element name). before (content); Contrary to After method
$ (element name). Clone (Boolean expression) when the Boolean expression is true, the cloned element (treated as true when no parameters are present)
$ (element name). Empty () sets the content of the element to null
$ (element name). InsertAfter (content); After inserting the element into the content
$ (element name). insertbefore (content); Before inserting the element into the content
$ (Element). prepend (content); Place the content as part of the element, at the front of the element
$ (Element). Prependto (content); Place the element as part of the content and put it in the front of the content
$ (Element). Remove (); Delete all the specified elements
$ (Element). Remove (exp); Delete all elements that contain exp
$ (Element). Wrap (HTML); Surround the element with HTML
$ (elements). Wrap (Element); Enclose the element with an element
Traversing:
Core:
$ (HTML). AppendTo (body) is equivalent to writing an HTML code in the body
$ (Elems) to get an element on the DOM
$ (function () {..}); Execute a function
$ (div > P). css (border, 1px solid gray); Find child nodes p for all Div, add style
$ (Input:radio, document.forms[0]) Find all the radio buttons in the first form on the current page
$.extend (prop) prop is a jquery object,
Example:
JQuery (expression, [context]) $ (expression, [context]); By default, $ () queries the DOM element in the current HTML document.
Each (callback) executes a function with each matching element as the context
Example: 1
Example: 2
Ready (FN); $ (document). Ready () Note there is no onload event in the body, otherwise the function cannot be executed. On each page, you can
There are a number of functions that are loaded and executed in the order of FN.
Bind (type, [data], FN) binds one or more event handler functions to a specific event (like click) for each matching element. Possible event attributes are: Blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove,
single (type, [data], FN) binds one or more event handler functions for a specific event (like click) for each matching element. In each pair
On the image, this event handler function will only be executed once. The other rules are the same as the bind () function.
Trigger (type, [data]) triggers a class of events on each matched element.
Triggerhandler (type, [data]) This particular method triggers a specific event on an element (specifying an event type) while canceling the browser's default action for this event
Unbind ([Type], [data]) is bound to remove the binding event from each matching element.
$ (P). Unbind () removes all bound events from all paragraphs
$ (P). Unbind (click) removes the Click event on all paragraphs
Hover (over, out) Over,out are methods that trigger the first function specified when the mouse moves over a matching element. When the mouse moves out of this element, the specified second function is triggered.
Toggle (FN, fn) if a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered.
Element Event List Description
Note: A function with no parameters, whose argument is optional fn. jquery does not support the reset event for form elements.
Event description Support Element or object
Blur () element loses focus A, input, textarea, button, select, label, map, area
Change () user changes the contents of the domain input, textarea, select
Click () mouse clicks on an object almost all elements
DblClick () mouse double-click an object almost all elements
Error () A bug occurred when loading a document or Image window, img
The focus () element gets the focal point A, input, textarea, button, select, label, map, area
KeyDown () Key of a keyboard is pressed almost all elements
KeyPress () Key of a keyboard is pressed or held down by almost all elements
KeyUp () Key of one keyboard is loosened almost all elements
Load (FN) a page or image is finished loading window, img
MouseDown (FN) a mouse button is pressed for almost all elements
MouseMove (FN) mouse is moved almost all elements
Mouseout (FN) mouse moves almost all elements away from an element
MouseOver (FN) mouse is moved to almost all elements above an element
MouseUp (FN) a mouse button is released almost all elements
Resize (FN) Windows or frames are resized window, IFRAME, frame
Scroll (FN) scrolls the visible part of a document when the window
Select () text selected document, input, textarea
Submit button is clicked form
Unload (FN) User exits the page window
JQuery Ajax Method Description:
Load (URL, [data], [callback]) loads a remote HTML content into a DOM node.
$ (#feeds). Load (feeds.html); Load the feeds.html file into a div with ID feeds
Jquery.get (URL, [data], [callback]) uses get to request a page.
Jquery.getjson (URL, [data], [callback]) uses get to request JSON data.
Jquery.getscript (URL, [callback]) uses get to request JavaScript files and executes them.
Jquery.post (URL, [data], [callback], [type]) uses post to request a page.
Ajaxcomplete (callback) when an AJAX request finishes, a function is executed. This is an AJAX event
Ajaxerror (callback) executes a function when an AJAX request fails. This is an AJAX event

Summary of common methods of jquery