jquery chain-Type Operation Example Analysis _jquery

This example describes the jquery chain operation. Share to everyone for your reference, specific as follows:

From past examples, we know that jquery statements can be linked together, not only to shorten the length of the code, but also to achieve special effects in many cases.

<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.

<script type= "Text/javascript" >
  $ (function () {
    $ ("P"). FIND ("span"). AddClass ("Css1"). 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.

<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>.

The operation effect is as follows:

<div class= "Css2" >
  <p class= "Css1 css2" > First paragraph </p>
  <p class= "Css1 css2" > second paragraph </p >
</div>

I hope this article will help you with the jquery program design.