jquery Application of jquery chain usage example _jquery

This example describes the jquery chain usage of jquery applications. Share to everyone for your reference. The specific analysis is as follows:

Many times we can link jquery statements together, which not only shortens the length of the code, but it can often achieve special effects. First look at the following code:

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("div"). addclass ("Css1"). Filter (function (index) {
return index = = 1 | | $ (this). attr ("id") = = "Fourth";
}). addclass ("Css2");
});
</script>

The above code adds style css1 to the entire <div> list, then filters, and then adds the CSS2 style individually for the filtered elements. If you do not use jquery, the above results will be very cumbersome.

In the jquery chain, the following actions are the result of the previous action, and you can use the end () method if you want the action object to be the object of the previous step.

Use the end () method to control the jquery chain.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("P"). FIND ("span"). AddClass ("Css1"). End (). addclass ("Css2");
});
</script>
<p>hello,<span>how</span>are you?</p>
<span>very Nice,</span>thank you.

The above code searches for <span> tags in <p>, and then adds style css1, using the end () method to set the action object back to $ ("P") and add style style css2.

In addition, the previous two objects can be grouped together and processed by Andself ().

Use the Andself () method to control the jquery chain.

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("div"). Find ("P"). addclass ("Css1"). Andself (). addclass ("Css2");
});
</script>
<div>
<p> First paragraph </p>
<p> second paragraph </p>
</div>

The above jquery code first searches <p> tags in <div>, adds Css1, this style only works on <p> tags, and then combines <div> and <p> with the Andself () method. Then add the style css2, which is valid for both <div> and <p>.

Effect:

Copy Code code as follows:

<div class= "CSS2" >
<p class= "Css1 css2" > the first paragraph </p>
<p class= "Css1 css2" > second paragraph </p>
</div>

I hope this article will help you with your jquery programming.