List of 12 common jquery skills and methods

1. Reference of page elements
The $ () referenced element of jquery includes methods such as ID, class, element name, element hierarchy, Dom or XPath conditions, and the returned object is a jquery object (set object ), you cannot directly call methods defined by the Dom.
2. Conversion between jquery objects and DOM objects
Only jquery objects can use methods defined by jquery. Pay attention to the differences between DOM objects and jquery objects. When calling methods, pay attention to DOM objects or jquery objects.
Common DOM objects can be converted to jquery objects through $.
For example, $ (document. getelementbyid ("MSG") is a jquery object. You can use the jquery method.
Because the jquery object itself is a set. Therefore, if a jquery object is to be converted to a DOM object, You must retrieve one of them. Generally, you can retrieve it through indexes.
For example: $ ("# MSG") [0], $ ("Div "). eq (1) [0], $ ("Div "). get () [1], $ ("TD") [5] are all DOM objects. You can use methods in Dom, but you cannot use jquery methods.
The following statements are correct:
3. How to obtain a certain entry of the jquery set
Pair
To obtain a set of elements (specified by the index), you can use the EQ or get (n) method or index number to obtain one of them. Note that the returned EQ is a jquery object
Get (N) and index return Dom element objects. Jquery objects can only use jquery methods, while DOM objects can only use Dom methods. For example, to obtain the third
Element Content. There are two methods:
$ ("Div" ).eq(2).html (); // call the jquery object Method
$ ("Div"). Get (2). innerhtml; // call the DOM method attribute
4. Implement set and get for the same function
Many methods in jquery are like this, mainly including the following:
$ ("# MSG" ).html (); // return the HTML content of the element node whose ID is MSG.
// Write "new content" as an HTML string to the element node content with the ID of MSG. the bold new content is displayed on the page.
$ ("# MSG"). Text (); // return the text content of the element node whose ID is MSG.
// Write "new content" as a common text string to the element node content with the ID of MSG. The page displays the new content
$ ("# MSG"). Height (); // returns the height of the element whose ID is MSG.
$ ("# MSG"). Height ("300"); // set the height of the element whose ID is MSG to 300
$ ("# MSG"). Width (); // return the width of the element whose ID is msg
$ ("# MSG"). Width ("300"); // set the width of the element whose ID is MSG to 300
$ ("Input"). Val ("); // return the value of the input box of the form.
$ ("Input"). Val ("test"); // set the value of the form input box to test
$ ("# MSG"). Click (); // trigger the click event of an element whose ID is msg
$ ("# MSG"). Click (FN); // click an event to add a function for an element whose ID is msg
Similarly, blur, focus, select, and submit events can all have two call methods.
5. Set Processing
For the set content returned by jquery, we do not need to iterate through it and process each object separately. jquery has provided us with a very convenient way to process the set.
There are two forms:
// Set different font colors for P elements whose indexes are 0, 1 and 2 respectively.
// Implement the Color Changing Effect of the row separation of the table
// Adds a click event for each P element. Click a P element to bring up its content.
6. Expand the functions we need
}); // Added the min and Max methods for jquery.
Use an extended method (called by "$. Method Name ):
7. method-based writing
The so-called continuous writing means that different methods can be called continuously for a jquery object.
For example:
8. Style of operation elements
It mainly includes the following methods:
$ ("# MSG" ).css ("background"); // return the background color of the element.
$ ("# MSG" ).css ("background", "# CCC") // set the element background to Gray.
$ ("# MSG"). Height (300); $ ("# MSG"). Width ("200"); // set the width and height.
$ ("# MSG" ).css ({color: "red", Background: "blue"}); // set the style as a name-Value Pair
$ ("# MSG"). addclass ("select"); // Add a class named select for the element
$ ("# MSG"). removeclass ("select"); // Delete the class whose element name is select
$ ("# MSG"). toggleclass ("select"); // Delete (ADD) the Select class if it exists (does not exist)
9. Complete event handling functions
Jquery already provides various event handling methods. Instead of Directly Writing events on HTML elements, we can directly add events to objects obtained through jquery.
For example:
$ ("# MSG"). Click (function () {}) // added a click event for the element
// Set different processing for three p-element click events
Several custom events in jquery:
(1) hover (fn1, FN2): a method that imitates a hover event (move the mouse over an object and remove it. 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.
// When you place the cursor over a row of the table, set the class to over and the class to out when you leave the table.
(2) Ready (FN): binds a function to be executed when the Dom is loaded and can be queried and manipulated.
// After the page is loaded, the message "load success" is displayed, which is equivalent to an onload event. Equivalent to $ (FN)
(3) Toggle (evenfn, oddfn): switches the function to be called each time you click. If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. The subsequent clicks repeatedly call the two functions.
// Add or delete a class named selected every time you click it.
(4) trigger (eventtype): triggers an event on each matching element.
For example:
$ ("P"). Trigger ("click"); // triggers the click event of all P elements
(5) bind (eventtype, FN) and unbind (eventtype): bind and unbind events
Deletes a bound event from each matching element.
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. Some practical special effects
The toggle () and slidetoggle () methods provide the status switching function.
For example, 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: Check the browser type. Valid parameters: safari, opera, MSIE, and Mozilla. If IE: $. browser. isie is detected, true is returned for IE.
$. Each (OBJ, FN): A common iteration function. It can be used to iterate objects and arrays (instead of loops) in an approximate way ).
For example
It is equivalent:
JSON data can also be processed, such
Result:
$. Extend (target, prop1, propn): expands an object with one or more other objects and returns the extended object. This is an inheritance method implemented by jquery.
For example:
// Merge settings and options, and return the Merged Results to settings, which is equivalent to inheriting setting and saving the inherited results in setting.
// Merge ults and options, and return the merged result to setting without overwriting the default content.
There can be multiple parameters (merging multiple parameters and returning them)
$. Map (array, FN): array ing. Save the items in an array (after conversion) to another new array and return the new array.
For example:
Temparr content: [4, 5, 6]
Temparr content: [2, 3]
$. Merge (arr1, arr2): merges two arrays and deletes repeated items.
For example: $. Merge ([, 2], [, 4]) // return [, 4]
$. Trim (STR): removes spaces at both ends of a string.
For example: $. Trim ("Hello, how are you? "); // Return" Hello, how are you? "
12. Resolve conflicts between custom methods or other class libraries and jquery
Most of the time, we define the $ (ID) method to obtain an element, or some other JS class libraries such as prototype define the $ method, if these contents are put together at the same time, the variable method definition conflict will occur. jquery provides a dedicated method to solve this problem.
Use the jquery. noconflict (); Method in jquery to transfer the control of the variable $ to the first library that implements it or the previously customized $ method. Post-application
When using jquery, you only need to replace all $ with jquery. For example, the original reference object method $ ("# MSG") with jquery ("# MSG ").
For example:
// Start using jquery
// Use $ () for other libraries ()
List of common jquery methods:
Attribute:
$ (P). addclass (style type defined in CSS); add a style to an element
$ (IMG). ATTR ({SRC: test.jpg, alt: test image}); add an attribute/value 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 .html (); obtain the content (elements, text, etc.) in the element)
Metadata (metadata .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 the 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 Matching Element
$ (Element name). append (content); insert content as the element content to the end of the element
$ (Element name). appendto (content); element after content
$ (Element name). 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 there is no parameter)
$ (Element name). Empty () set 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 put 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:
Core:
$ (HTML). appendto (body) is equivalent to writing an html Code
$ (Elems) gets an element in the DOM
$ (Function () {...}); execute a function
$ (Div> p;.css (border, 1px solid gray); find the subnode 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 (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
Example: 2
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 (such as click) matching an element. Possible event attributes include: blur, focus, load, resize,
Scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
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 () removes all bound events in all paragraphs
$ (P). Unbind (click) removes the Click Event on all paragraphs
Hover (over, out) Over and out are both 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.
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.
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 () www.3ppt.com 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
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 and execute JavaScript files.
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
Ajaxerror (callback) executes a function when an Ajax request fails. This is an Ajax event