Jquery traversing (Part 10.0)


Traversing is one of the important concept in Jquery Library. Using traversing methods
We can move UP ,down and sideways in the family tree or DOM tree from the selected element.

Traversing methods are used to filter out element from a document based on given condition.

There are so many methods in Jquery library for traversing. For example

1.Add
2. Add(Selector)
3. addBack()
4. andSelf()
5. children()
6. closest()
7. contents()
8. each()
9. end()
10. eq()
11. filter()
12. find()
13. first()
14. has()
15. is()
16. last()
17. map()
18. next()
19. nextAll()
20. nextUntil()
21. not()
22. offsetParent()
23. parent()
24.parents()
25. parentsUntil()
26. prev()
27. prevAll()
28. prevUntil()
29. siblings()
30.slice()

I feel very boring to read and write the long article so to make short article i will include only few methods in this post.

1. Add()
>> This method is used to add the elements on whole document or inside the context element.

add

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("h5").add("p").css("background-color", "green");
        });
    </script>
</head>
<body>
    
    <fieldset>
        <legend>
            This is the sample code for add() Method in Jquery
        </legend>
    
    <h5>This is the Header</h5>
    <p>First</p>
    <p> Middle</p>
    <p><strong> last</strong></p>
   </fieldset>
</body>
</html>

Note: In the above code we are selecting all the header(h5) and paragraph(p) and adding the green background color.

2. Add(Selector)
>> This method is used to adds more element match by the given selector in the set of given element

add_selector


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <style>
        .Text_Silver {
            background-color:silver;
        }
        .Text_Blue {
            background-color:blue;
        }
        .Text_Green {
            background-color:green;
        }

        .Text_black {
            background-color:black;
        }
    </style>
    <script>
        $(function () {
            $(".Text_Silver").add(".Text_black").add(".Text_Blue").css("background-color", "red");
        });
    </script>
</head>
<body>
    <fieldset>
       <legend>This is the sample code for add(selector) method in Jquery.</legend>
    
    <h5 class="Text_Silver">This is the Header</h5>
    <p class="Text_Blue ">First</p>
    <p class="Text_Green"> Middle</p>
    <p class="Text_black"><strong> last</strong></p>
    </fieldset>

</body>
</html>

Note: In the above code, we are selecting the css class with Text_Silver ,Text_black, Text_Blue in Dom element and filling the red color as background.

Summary:

Here we have learnt some of the basic methods of Jquery traversing. In next post i will be coming back with other methods of Jquery traversing.

Advertisements
Posted in Jquery. Tags: . 1 Comment »

One Response to “Jquery traversing (Part 10.0)”

  1. Learn Jquery with in 15 hrs | Chandradev's Blog Says:

    […] 10. Jquery traversing (Part 10.0) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: