To get to the power of jquery.



Since the current jquery is so thunderclap piercing, I believe that there is no need to introduce jquery, the company code is widely used in jquery, but I look at some children's code to find a problem, the children use only the fur of jquery, just use the ID selector and attr method, There are several animations, if only so, compared to the cost of its costs, in fact, it is better not to use, the following describes a few jquery commonly used methods to let the power of jquery to play out, or only with a limited number of methods, relative to the speed of the problem, it is not as good as no jquery.

jquery is so useful, and it has a lot to do with the CSS selector-compatible syntax when it comes to getting objects, after all, CSS selectors are very familiar (about CSS selectors can look at 10 minutes to fix CSS selectors), but its powerful in compatible with the CSS3 selector, and even a lot more. Selector Selector

With the CSS selector base, it's easy to see the jquery selector, no more one by one instructions

Basic Selector
$ (' * ')	Match all elements of a page
$ (' #id ')	ID Selector
$ ('. Class ')	Class Selector
$ (' element ')	Tag Selector
Combination/Hierarchy Selector
$ (' e,f ')	Multi-element selector, with ", delimited, matching element e or element F
$ (' E F ')	Descendant selectors, separated by spaces, to match all descendants of the E element (not just child elements, child elements down recursively) element F
$ (E>F)	child element Selector, delimited with ">", matches all direct child elements of e element
$ (' e+f ')	A direct neighbor selector that matches the adjacent sibling element F after the e element
$ (' e~f ')	Normal neighbor selector (brother selector) that matches the sibling element F after the e element (whether directly adjacent or not)
$ ('. Class1.class2 ')	Matches an element in a class name that contains both Class1 and Class2
Basic Filter Selector
$ ("E:first")	The first of all E
$ ("E:last")	The last one in all E
$ ("E:not (selector)")	Filter E by Selector
$ ("E:even")	All E in index is an even number
$ ("e:odd")	All E in index is odd
$ ("E:eq (n)")	All elements of index n in E
$ ("E:GT (n)")	All elements of index greater than N in E
$ ("E:ll (n)")	All elements of index less than N in E
$ (": Header")	Select H1~h7 Element
$ ("div:animated")	Select the element that is performing the animation effect
Content Filter
$ (' E:contains (value) ')	Elements that contain value values in the content
$ (' E:empty ')	element with empty content
$ (' E:has (F) ')	element with F in child element, $ (' Div:has (A) '): div with a tag
$ (' e:parent ')	The parent element is the element of E, $ (' td:parent '): The parent element is the TD element
Visual Selector
$ (' E:hidden ')	All the Hidden E
$ (' e:visible ')	All the Visible E
Attribute Filter Selector
$ (' e[attr] ')	E with attribute attr
$ (' e[attr=value] ')	Attribute Attr=value of the E
$ (' e[attr!=value] ')	The Attr property. =value's E
$ (' e[attr ^=value] ')	Property attr The E that begins with value
$ (' e[attr $=value] ')	Property attr The E that ends with value
$ (' e[attr *=value] ')	The Attr property contains the value of the E
$ (' e[attr][attr *=value] ')	can be used
Child element Filter
$ (' E:nth-child (n) ')	The nth child node of E
$ (' E:nth-child (3n+1) ')	The index of e conforms to the sub-nodes of the 3n+1 expression
$ (' E:nth-child (even) ')	The index of E is an even child node
$ (' E:nth-child (odd) ')	The index of E is an odd sub-node
$ (' E:first-clild ')	The first child node of all E
$ (' E:last-clild ')	The last child node of all E
$ (' E:only-clild ')	Child nodes of E with only a single child node
Form element Selector
$ (' E:type ')	A specific type of input
$ (': Checked ')	Selected checkbox or Radio
$ (' option:selected ')	The option that is selected

Filter Method

. Find (selector) finds the child nodes of each element of the collection

Get the Descendants (child node) of each element in the current set of matched elements, filtered by a selector, jQuery o Bject, or element.

$ (' li.item-ii '). Find (' Li '). css (' background-color ', ' red ');

. Filter (selector) filters elements in the current collection

reduce (Decrease) the set of matched elements to those that match the selector or pass the function ' s test.

$ (' li '). Filter (': even '). css (' background-color ', ' red ');

Basic Methods

The method that executes when the . Ready (handler) document is loaded, as distinct from the window.onload

Specify a function to execute when the DOM is fully loaded.

$ (document). Ready (function () {
  //Handler for. Ready () called.
});

. Each (function (index,element)) iterates through each element in the collection

Iterate over a JQuery object, executing a function for each matched element.

$ ("Li"). each (the function (index) {
  Console.log (index + ":" + $ (This). text ());
});

jquery.extend (Target [, Object1] [, OBJECTN]) merging objects

Merge the contents of or more objects together into the first object.

var object = $.extend ({}, Object1, object2);

get Element

. EQ (index) gets a specific jquery object in the collection of jquery objects by index

Reduce the set of matched elements to the one at the specified index.

. EQ (-index) gets a specific jquery object in the collection of jquery objects by reverse Index

An integer indicating the position of the element, counting backwards from the last element in the set.

$ ("li"). EQ (2). CSS ("Background-color", "Red");

. Get (Index) gets the DOM object for a specific index in the JQuery collection object (automatically converts the JQuery object to a DOM object)

Retrieve one of the DOM elements matched by the JQuery object.

Console.log ($ ("Li"). Get (-1));

. Get () converts a jquery collection object to a Dom collection object and returns

Retrieve the DOM elements matched by the JQuery object.

Console.log ($ ("Li"). get ());

. Index () / . Index (selector)/ . Index (Element) finds a specific element from the given collection index

Search for a given element from among the matched elements.

1. No parameter returns the first element of index

2. If the parameter is a DOM object or a jquery object, the index of the parameter in the collection is returned

3. If the parameter is a selector, return the first matching element index, no return-1 found

var ListItem = $ ("#bar");
Alert ("Index:" + $ ("li"). Index (ListItem));

. Clone ([withdataandevents][,deepwithdataandevents]) Create a copy of a deep copy of the jquery collection (the child elements will also be copied), default not to copy the object's Shuju and bound events

Create a deep copy of the set of matched elements.

$ (". Hello"). Clone (). AppendTo (". Goodbye");

. Parent ([selector]) Gets the jquery object that conforms to selector's parent element

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

$ ("Li.item-a"). Parent (' UL '). CSS ("Background-color", "Red");

. Parents ([selector]) Gets the jquery object that matches the ancestor element of the Selector

Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.

$ ("span.selected"). Parents ("div"). CSS ("Border", "2px Red Solid")

inserting elements

. Append (Content[,content])/. Append (function (index,html) ) append content to the end of the object

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

1. You can add multiple content at once, content can be DOM object, HTML string, jquery object

2. If the parameter is Function,function can return DOM object, HTML string, jquery object, parameter is the element position in the collection and the original HTML value

$ (". Inner"). Append ("<p>Test</p>");
$ ("Body"). Append ($newdiv 1, [Newdiv2, Existingdiv1]);
$ ("P"). Append ("<strong>Hello</strong>");
$ ("P"). Append ($ ("strong"));
$ ("P"). Append (document.createTextNode ("Hello"));

. AppendTo (target) inserts the object at the end of the target element, which can be selector, Dom object, HTML string, element collection, jquery object;

Insert every element in the set of matched elements to the end of the target.

$ ("H2"). AppendTo ($ (". container"));
$ ("<p>Test</p>"). AppendTo (". inner");

. prepend (Content[,content])/. Prepend (function (index,html)) appends content to the object header, using and append similar

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$ (". Inner"). Prepend ("<p>Test</p>");

. Prependto (target) inserts objects into the head of the target element, using a similar prepend

Insert every element in the set of matched elements to the beginning of the target.

$ ("<p>Test</p>"). Prependto (". inner");

. Before ([content][,content])/. Before (function) inserts content in front of the object (not the head, but outside, and the object side-by-side), with parameters similar to append

Insert content, specified by the parameter, before each element in the set of matched elements.

$ (". Inner"). Before ("<p>Test</p>");
$ (". Container"). Before ($ ("H2"));
$ ("P"). First (). before (Newdiv1, [Newdiv2, Existingdiv1]);
$ ("P"). Before ("<b>Hello</b>");
$ ("P"). Before (document.createTextNode ("Hello"));

. InsertBefore (target) Insert object before target (same as not header, sibling)

Insert every element in the set of matched elements before the target.

$ ("H2"). InsertBefore ($ (". container"));

. After ([content][,content])/. After (function (index) ) and before, instead, insert content after the object (not the tail, but outside, and the object side-by-side). The parameters are similar to append

Insert content, specified by the parameter, after each element in the set of matched elements.

$ (". Inner"). After ("<p>Test</p>");
$ ("P"). After (document.createTextNode ("Hello"));

. InsertAfter (target) and InsertBefore instead, insert the object after the target (also not the tail, the sibling)

Insert every element in the set of matched elements after the target.

$ ("<p>Test</p>"). InsertAfter (". inner");
$ ("P"). InsertAfter ("#foo");

Package Element

. Wrap (wrappingelement)/. Wrap (function index ) wraps a layer of HTML structure for each object, which can be selector, element, HTML string, JQuery Object

Wrap an HTML structure around each element in the set of matched elements.

<div class= "Container" >
  <div class= "inner" >Hello</div>
  <div class= "inner" >goodbye </div>
</div>

$ (". Inner"). Wrap ("<div class= ' new ' ></div>");

<div class= "Container" >
  <div class= "new" >
    <div class= "inner" >Hello</div>
  < /div>
  <div class= "new" >
    <div class= "inner" >Goodbye</div>
  </div>
< /div>

. Wrapall (wrappingelement) wraps all matching objects in the same HTML structure

Wrap an HTML structure around all elements in the set of matched elements.

<div class= "Container" >
  <div class= "inner" >Hello</div>
  <div class= "inner" >goodbye </div>
</div>

$ (". Inner"). Wrapall ("<div class= ' new '/>");

<div class= "Container" >
  <div class= "new" >
    <div class= "inner" >Hello</div>
    < Div class= "inner" >Goodbye</div>
  </div>
</div>

. Wrapinner (wrappingelement)/. Wrapinner (function (index)) package match element content, this is not good to say, a look at an example to understand

Wrap an HTML structure around the content of each element in the set of matched elements.

<div class= "Container" >
  <div class= "inner" >Hello</div>
  <div class= "inner" > Goodbye</div>
</div>

$ (". Inner"). Wrapinner ("<div class= ' new ' ></div>");

 <div class= "container" > <div class= "inner" > <div class= "new" >Hello</div> </div> <div class= "inner" > <div class= "new" >Goodbye</div> </div> </