Knowing these things can start to play the power of jquery _jquery

Because of the current jquery thunderclap piercing, I believe that it is not necessary to introduce what is jquery, the company's code is widely used in jquery, but I look at some of the children's code to find a problem, the children are using only the surface of jquery, only using the ID selector and attr method, There are a few animations, if only so, compared to the cost of it, in fact, rather than the use of the following introduction of several jquery common methods to enable the power of jquery to play out, otherwise only a limited number of methods, relative to the speed of the problem, rather than jquery.

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

With the CSS selector base, it's easy to look at jquery's selector, no longer detailed one by one description of the basic selector   $ (' * ') matching all elements of the page $ (' #id ') ID selector $ ('. class ') class selector $ (' element ') tag Selector &nb Sp   Combination/Hierarchy selector   $ (' e,f ') multi-element selector, use ", separate, and match element E or element F $ (' e F ') descendant selector, separated by spaces, matches all descendants of E element (not just child elements, child elements down recursion) element F $ (E>F) The child element selector, separated by ">", matches all the direct child elements $ (' e+f ') of the E element directly adjacent to the selector, matches the adjacent element F $ (' e~f ') normal adjacent selector (brother selector) after the e element, matching the sibling element F (either directly adjacent or not) after the E element ( '. Class1.class2 ') matches the elements in the class name that contain both Class1 and Class2 basic filter selector   $ ("E:first") the Last $ ("E:last") in all E ("E:not") Selector) "In accordance with selector filter E $ (" E:even ")              All E in index is even $ ("e:odd")               All E index is odd $ ("E:eq (n)")            all elements of index n in E ("E:GT (n)")            $ ("E:ll (N)") in all E with index greater than n              $ (": Header") of index less than n in all E select H1~h7 element $ ("DIV:Animated ") Select Element (' E:has (F) ') in which element content filter   $ (' E:contains (value) ') containing value value in the content of the animation effect $ (' e:empty ') is empty. element with F in child element, $ (' Div:has (A) '): div $ (' e:parent ') containing a tag is an element of E, $ (' td:parent '): The parent element is the element visual selector of TD   $ (' E:hidden ') All hidden e $ (' e:visible ') all visible e-Properties Filter selector   $ (' e[attr] ') contain property attr e $ (' e[attr=value] ') property Attr=value e $ (' E[attr!=value ] Property attr. =value e $ (' e[attr ^=value] ' property attr the E $ (' e[attr $=value] ') property at the beginning of value attr E $ (' e[attr *=value] "at the end of value) Property attr containing the value of E $ (' e[attr][attr *=value] ') can be used with the child element filter   $ (' E:nth-child (n) ') E's nth child node $ (' E:nth-child (3n+1) ') The index of E is in accordance with the 3n+1 of the child node of the expression $ (' e:nth-child (even) ') E of the child node $ (' E:nth-child (Odd) ') with an odd number of sub nodes $ (' E:first-clild ') All E's first child node $ (' E:last-clild ') all E's last child node $ (' E:only-clild ') only the child node of E of the unique child nodes form element selector   $ (' e:type ') a specific type of input $ (': Checked ') selected checkbox or Radio $ (' option:selected ') selected option filtering method

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

Get the Descendants (child node) of each element in the current set of matched elements, filtered by a selector, JQuery object, 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, match the selector or pass the function ' s test.

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

Basic methods

The. Ready (handler) document is executed after the load is completed, different from the window.onload

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

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

. each (function (index,element)) traverses each element in the collection

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

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

Jquery.extend (Target [, Object1] [, objectn]) Merge objects

Merge the contents of two or objects together into the the

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) in reverse order index gets a specific jquery object in the collection of jquery objects

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 of a particular 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 the 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 index from a given collection

Search for a given element from among the matched elements.

1. No parameter returns the first element index

2. Returns the index of the parameter in the collection if the parameter is a DOM object or a jquery object

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

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

. Clone ([withdataandevents][,deepwithdataandevents]) creates a copy of the jquery collection deep copy (the child elements are also replicated), and the Shuju and binding events of the default non-copy object

Create a deep copy of the set of matched elements.

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

. parent ([selector]) gets the parent element that the jquery object conforms to Selector

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 ancestor element of the jquery object conforming to 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 tail of an object

Insert content, specified by the parameter and to the "end of" 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, you can return the DOM object, the HTML string, the jquery object, and the 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 an object at the end of the target element, which can be a selector, Dom object, HTML string, element collection, jquery object;

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

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

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

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 an object into the head of the target element, similar to the prepend

Insert every element in the set of matched elements to 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 in a parallel sibling), and the parameters are similar to the append

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

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

. InsertBefore (target) Inserts an object before target (same as not head, sibling)

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

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

. After ([content][,content])/. After (function (index)) and before, the contents are inserted behind the object (not the tail but outside, and the objects are parallel to each other), and the arguments and append are similar

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

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

. InsertAfter (target) and insertbefore on the contrary, insert an object after target (same is not the tail, is the same sibling)

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

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

Parcel 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 the all 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)) Parcel matching element content, this is not easy to say, 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>
</ Div>

. Unwap () Removes the parent of the DOM element

Remove the parents of the set of matched elements from the DOM, leaving the matched elements at their place.

Ptags = $ ("P"). Unwrap ();

Property methods

. Val () Getting the value value of an element

Get the ' current value ' of the ' the ' of the ' the ' the ' the ' matched elements.

$ ("input:checkbox:checked"). Val ();

The. Val (value)/.val (function (index,value)) sets the value for the element, and index and value also refer to the index and original value of the element when set for each element in the collection

Set the value of each element in the set of matched elements.

$ ("input"). val (' Hello ');
$ ("input"). On (' Blur ', function () {
  $ (this). Val (Function (L, Val) {return
    val.touppercase ();
  });
};

. attr (AttributeName) Gets the value of the element-specific property

Get the ' value of ' an attribute for the ' the ' the ' the ' the ' the set of matched elements.

var title = $ ("em"). attr ("title");

. attr (Attributename,value)/. attr (Attributesjson)/. attr (AttributeName, function (index, attr)) assign values to element attributes

Set one or more attributes for the set of matched elements.

$ ("#greatphoto"). attr ("Alt", "Beijing Brush Seller");

$ ("#greatphoto"). attr ({
  alt: "Beijing Brush Seller",
  title: "Photo by Kelly Clark"
});

$ ("#greatphoto"). attr ("title", function (I, Val) {return
  val + "-Photo by Kelly Clark";
});

. Prop (PropertyName) gets an attribute value of an element

Get is the value of a property for the "the" the "the" in the set of matched elements.

$ (elem). Prop ("checked")

. Prop (Propertyname,value)/. Prop (Propertiesjson)/. Prop (Propertyname,function (index,oldpropertyvalue)) assign values to element attributes

Set one or more properties for the set of matched elements.

$ ("input"). Prop ("checked", true);

$ ("input[type= ' checkbox ']"). Prop ("Checked", function (I, Val) {return
  !val;
});

$ ("input[type= ' checkbox ']"). Prop ({
  disabled:true
});

On the difference between attribute and property, you can see the attr and prop of jquery.

. Key,value/. Value (JSON) adds data to HTML DOM elements, HTML5 elements already have data-* properties

Store arbitrary data associated with the matched elements. The. Data () method allows us to attach data of any type to DOM elements in a way which is safe from circular references and Therefore from memory leaks.

$ ("body"). Data ("foo",);
$ ("body"). Data ("Bar", {myType: "Test", count:40});
$ ("body"). Data ({baz: [1, 2, 3]});