Home > Developer > JavaScript
For example:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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>" Colors .css ("color", "Red"). appendTo ("# foo ");
});
</Script>
</Head>
<Body>
<Div id = "foo">
</Div>
</Body>
</Html>
$ Creates a packaging element for the p element, which is the same as the selected element with the aforementioned selector. You can also call some jQuery methods, and finally use appendTo (described later) to move this element to the div. The final result is:
The following describes the functions used to operate the package set.
1. html (), html (text). The first function returns the package set.FirstThe html in the element. The second function will encapsulateAllThe internal html of the element is set to text.
2. size (). Returns the elements contained in the package.
3. get (), get (n ). The first function returns the HTML elements in the encapsulated set in the form of a javascript array, and the second returns the nth HTML element.
4. index (elem). Return the location of the incoming HTML element elem in the package set. -1 is returned if it is not in the packaging set.
5. The add (s), add (elem), and add (array). add functions are used to add elements to the packaging set. If it is a selector, add all selected elements. If it is an HTML clip, create an HTML element and add it. If it is an array of HTML elements or HTML elements, then, add it directly.
6. not (expression), filter (expression). These two functions are used to filter elements of the package set. Expression can be a string (selector), an html element, or an array of elements. The not function removes the elements that match the selector or that are contained in the array. Filter, on the contrary, leaves elements that match the selector or elements contained in the array.
7. The slice (begin, end) function returns a new package set whose content is the elements from the begin to the end. If end is omitted, it indicates the maximum length.
Let's look at several examples.
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> jQuery Wrapper </title>
<Script type = "text/javascript" src = "jquery-1.3.2.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Certificate ('span'0000.html ($ ('lil'). size ());
$ ('Lil'). not ('li: first '). add ('P: first'example .css ('color', 'red ');
$ ('Lil'). get (0). innerHTML = "First Special Item ";
$ ('P: last'0000.html(('li'0000.html ());
});
</Script>
</Head>
<Body>
<Ul>
<Li> First Item </li>
<Li> Second Item </li>
<Li> Third Item </li>
<Li> Forth Item </li>
<Li> th 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>
</Html>
The first line demonstrates the use of html and size. As described above, the content in both spans should be changed to 5. The second line demonstrates the usage of not and add. The last four li and the first p will become red. The third line demonstrates the get usage. Once get is called, the returned value is not a packaging element but an HTML element. Therefore, you can use the method provided by html dom to set innerHTML. The last line demonstrates the use of html (). Note that html () returns the internal content of the first element, but html (text) sets the content of all elements to text. The final result is as follows:
9. This is a very useful function for filtering elements based on location relationships.
| Children () | Returns the child element of the element in the package set (the child element is not counted as the number of layers below) |
| Contents () | Return the package set of the content of the package set. There may be text nodes (this package set is somewhat special, which is described below) |
| Next () | The next element that is not repeated in the package element. |
| NextAll () | All the next elements in the package set element. |
| Parent () | Package set of parent elements that are not repeated in a set |
| Parents () | Same as above, but always goes up to the root element of the document (excluding the root element) |
| Prev () | Similar to next (), all the previous elements that do not repeat |
| PrevAll () | Type nextAll (), all the previous elements |
| Siblings () | Package all the sibling elements in the set that are not repeated. |
Let's first look at the difference between the first two functions. The HTML code uses the previous example. The js script is as follows:
Copy codeThe Code is as follows:
$ (Function (){
Var ul = $ ('ul: first ');
$ ('P span'{.html (ul. children (). size ());
Var content = ul. contents ();
Alert (content. size ());
});
The number of packages returned by children () is 6, indicating that the last nested <ul> is counted as only one element. However, contents () returns up to 13 packages. Use the debugger to view its content:
It differs from children in that it contains a large number of Text nodes, including Text nodes that are just empty rows.
Let's look at the next and nextAll methods again and still use the above HTML code. js steps are as follows:
Copy codeThe Code is as follows:
$ (Function (){
$ ('Span: last'0000.html(('ul'0000.next().html ());
$ ('P: last'{.html ($ ('ul '). nextAll (). size ());
}); The next element of ul should be I am a lonely p. There are 4 of all the next elements. The result is:
Other functions are similar and are not used as an example.
10. find
The find method and the filter method are easy to confuse. It is also used to pass in a selector to filter elements in the packaging set. However, find filters the child elements of the elements in the package set, while filter filters the elements in the package set. The following is an example.
11 clone
The clone method returns a copy of the package set.
Example:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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'0000.css ('color', 'red'). appendTo ('# iner ');
Certificate ('body'0000.children().find('p'0000.css ('color', 'green'). appendTo ('# iner ');
$ ('P: last'mirror.clone().css ('color', 'red'). appendTo ('body ');
});
</Script>
</Head>
<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>
</Html>
This is an interesting example. The first row filters out the first p and sets it to red, and then moves it to the last div. The second row filters out the p contained in the packaging set, sets it to green, and moves it to the last div. Note that here, there are two p filtered by this sentence, one is Inner P, another one is to move the first sentence to I am a lonely p in the last div. add these two elements to the final div. Since InnerP itself is in this div, it is equivalent to not moving. Finally, copy the last p, set it to red, and add it to the end of the body. Therefore, the final page and color are as follows:
Finally, we will introduce how to manage the link. The above example also shows that each call to a jQuery method returns a package set, which acts as the caller of the next method to form a chain. In this process, a new packaging set (for example, the clone () method is called) may be generated. In a concatenation chain, if the end method is called, the previous packaging set is returned. If the andSelf method is called, the current and previous packaging sets are combined into a packaging set and returned. It can be imagined that jQuery stores these nested packages in a stack. The following simple example demonstrates the above principles:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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}'0000.css ('color', 'red ');
$ ('Div: eq (1) '). find ('P: lt(2)'end().css ('color', 'blue ');
$ ('Div: eq (2) '). find ('P: last'0000.prev().andself().css ('color', 'green ');
});
</Script>
</Head>
<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>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
