JQuery is a very great tool which provides a many types of DOM traversal methods which help us select elements in a document randomly as well as in sequential method.

Find Elements by index:

Below every item has its own index and we can located direct with the help of eq(index) method.

Script:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

   <script type="text/javascript">

      $(document).ready(function() {

      $("li").eq(2).addClass("selected");

        });

   </script>

Style:

<style>

      .selected { color:red; }

      .highlight { background:yellow; }

  </style>

HTML Code:

<ul>

     <li> item 1</li>

     <li> item 2</li>

     <li> item 3</li>/*This item is second index of this list*/

     <li>item 4</li>

</ul>

Output:

Find Elements by its class name:

Below is filtering the element via class name and set the style of those elements.

Script:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

   <script type="text/javascript">

      $(document).ready(function() {

      $("li").filter(".top").addClass("selected");

      $("li").filter(".middle").addClass("highlight");

        });

   </script>

 HTML Code:

   <ul>

     <li class="top">list item 1</li>

     <li class="top">list item 2</li>

     <li class="middle">list item 3</li>

     <li class="middle">list item 4</li>

</ul>

Output:

Locating Tag:

Below find and filter the tag and apply the style those elements.

Script:

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

   <script type="text/javascript">

      $(document).ready(function() {

           $("p").find("span").addClass("selected");

           $("p").filter(".paragraph").addClass("highlight");

   });

HTML Code:

<p class="paragraph">This is <span>Mindstick</span></p>

Output: