For example:
Copy Code code as follows:
<title>jquery wrapper</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("<p>i am a Red line.</p>"). CSS ("Color", "red"). Appendto ("#foo");
});
</script>
<body>
<div id= "foo" >
</div>
</body>
$ creates a package element of P element, which is the same as the element that is check to with the selection mentioned above. You can also call some of the methods of jquery, and finally use Appendto (later) to move this element into the div. The end result is:
The following describes the functions that operate on a wrapper set.
1. HTML (), HTML (text). The first function returns the HTML inside the first element of the wrapper set, and the second function sets the internal HTML for all elements in the wrapper set to text.
2.size (). Returns the elements contained in a wrapper set.
3.get (), Get (n). The first function returns the HTML element in the wrapper collection as a JavaScript array, and the second element returns the nth HTML element.
4.index (Elem). Returns the location of the passed-in HTML element Elem in the wrapper set. Returns-1 if it is not in the packing set.
5.add (s), add (Elem), add (array). The Add function is used to add elements to the wrapper set. If it is a selector, add all the selected elements and, if it is an HTML fragment, create an HTML element based on the fragment and add the element, or add it directly if it is an array of HTML elements or HTML elements.
6. Not (expression), filter (expression). These two functions are used to filter the elements of a wrapper set. Expression can be a string (selector), or an HTML element or an array of elements. The not function drops the element that matches the selector or the element contained in the array. Filter, in contrast, leaves elements that match the selector or elements contained in the array.
7.slice (begin,end) This function returns a new wrapper set, which is the original wrapper set from start to end elements. End ellipsis represents the maximum length.
Let's take a look at a few examples.
Copy Code code as follows:
<title>jquery wrapper</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' span '). HTML ($ (' Li '). Size ());
$ (' Li '). Not (' Li:first '). Add (' P:first '). CSS (' color ', ' Red ');
$ (' Li '). Get (0). InnerHTML = "Special Item";
$ (' p:last '). HTML ($ (' Li '). html ());
});
</script>
<body>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>forth item</li>
<li>fifth item</li>
</ul>
<p>i am a lonely p.</p>
<p>the UL has <span></span> elements.</p>
<span>hello jquery.</span>
<p></p>
</body>
The first line shows the use of HTML and size. As described above, the contents of all two spans should become 5. The second line demonstrates a usage of not and add. The Final Four Li and the first p will turn red. The third line demonstrates the use of get, which, once invoked, is not a wrapper element but an HTML element, so you can set the innerHTML using the method provided by the HTML DOM. The last line shows the use of HTML (), and note that HTML () returns the inner contents of the first element, but HTML (text) sets the contents of all elements to text. The final results are as follows:
9. This is a large class of very useful functions that can filter elements based on positional relationships.
| Children () |
Returns the child elements of the element in the wrapper set (son element, lower layers are not counted) |
| Contents () |
Returns the wrapper set for the contents of the wrapper set, possibly with a text node (this wrapper set is special, described below) |
| Next () |
The next element in the wrapper set element that is not repeated. |
| Nextall () |
The next element in the wrapper set element. |
| Parent () |
Wrapper set for parent elements that do not duplicate elements in a wrapper set |
| Parents () |
Ditto, but goes up to the document root element (excluding the root element) |
| Prev () |
Like Next (), all the previous elements that do not repeat |
| Prevall () |
Type Nextall (), all previous elements |
| Siblings () |
The wrapper concentrates all the sibling elements that are not duplicated. |
First look at the first two functions of the difference, the HTML code or the previous example, the JS script is as follows:
Copy Code code as follows:
$ (function () {
var ul = $ (' Ul:first ');
$ (' P span '). HTML (Ul.children (). Size ());
var content = ul.contents ();
Alert (Content.size ());
});
The number of wrapper sets returned by children () is 6, indicating that the last nested <ul> counts as only one element. However, contents () returns a collection of up to 13 packages. Use the debugger to view its contents:
The difference between it and children is that it contains a large number of text nodes, including just a blank line of textual nodes.
Then look at the next and Nextall methods, still use the above HTML code, JS footsteps as follows:
Copy Code code as follows:
$ (function () {
$ (' span:last '). HTML ($ (' ul '). Next (). html ());
$ (' p:last '). HTML ($ (' ul '). Nextall (). Size ());
The next element of the UL should be I am a lonely p. All the next elements are 4. So the result is:
Other functions use similar, no longer examples.
10.find
The Find method and the filter method are easily confusing and are also passed into an element in a selector filter wrapper set. But find filters the elements in the wrapper set, and filter is the element within the filtered wrapper set. Here is an example.
One clone
The Clone method returns a copy of the wrapper set.
Example:
Copy Code code as follows:
<title>jquery wrapper</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' body '). Children (). Filter (' P:first '). CSS (' color ', ' Red '). Appendto (' #container ');
$ (' body '). Children (). Find (' P '). CSS (' color ', ' Green '). Appendto (' #container ');
$ (' P:last '). Clone (). CSS (' color ', ' Red '). Appendto (' body ');
});
</script>
<body>
<p>i am a lonely p.</p>
<div>the UL has <p>inner p</p> elements.</div>
<p>hello jquery.</p>
<div id= ' container ' ></div>
</body>
This is a more interesting example. The first line filters out the first p and sets it to red and moves to the last div. The second line filters out the p that is contained in the packing set, set to green, and moves to the last Div, notice here, there are two P that is filtered in this sentence, one is inner p, and one is moved to the last div by the first sentence I am a lonely P. Then add these two elements to the last Div, because Innerp itself is in this div, so it's not moving. Finally, make a copy of the last p, set to red, and add to the body last. Therefore, the final page and color are as follows:
Finally, the management of consonant chain is introduced. The so-called consonant chain, the above example is also reflected, that is, each call to a jquery method it returns a wrapper set, the wrapper set as the next method of the caller, forming a chain. In this process, it is possible to generate a new wrapper set (for example, invoke the Clone ()) method. In a consonant chain, if the end method is called, the previous wrapper set is returned, and if the Andself method is invoked, the current and previous wrapper sets are merged into a single wrapper set and returned. It can be thought that jquery internally put these consonant wrapper sets on a stack. The following simple example shows the above principle:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery wrapper</title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' div:eq (0) '). Find (' P:lt (2) '). CSS (' Color ', ' red ');
$ (' Div:eq (1) '). Find (' P:lt (2) '). End (). CSS (' Color ', ' blue ');
$ (' Div:eq (2) '). Find (' P:last '). Prev (). Andself (). CSS (' color ', ' Green ');
});
</script>
<body>
<div>
<p>div1 p1</p>
<p>div1 p2</p>
<p>div1 p3</p>
</div>
<div>
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3</p>
</div>
<div>
<p>div3 p1</p>
<p>div3 p2</p>
<p>div3 p3</p>
</div>
</body>
