rio 6 jquery traversing v1.3

jQuery LEVEL - LEARNER

Session 9 – Traversing in jQuery

C3: Protected

© 2007, Cognizant Technology Solutions Confidential

2

About the Author

Created By: Jeevitha Arumugam, 188913

Credential Information:

.Net 2.0 SQL SERVER2005 - 3 Years

Version and Date:

V1.0- 06/11/2011


3

Icons Used

Questions

Contacts

Reference

Demonstration

Hands on Exercise

Coding Standards

Test Your Understanding

Tools

A Welcome Break


jQuery Traversing – Overview

jQuery traversing provides variety of DOM traversal methods to help us

select elements in a document randomly as well as in sequential method

They are used to filter out elements from a document based on given

conditions.

We can traverse the DOM using the following three building blocks while

selecting elements in a given document

$(‘TagName’)

$(‘#Tag ID’)

$(‘.Tag Class’)

4


5

jQuery : Objectives

Objective: After completing this chapter you will be able to:

Define Traversing.

Describe the functions available in Traversing .


jQuery - Traversing

jQuery provides various traversal methods to select elements randomly or in sequential method.

eq(index) method - Index starts its count from 0.

Example: $("li").eq(2)

<ul>

<li>list item 1</li>

<li>list item 2</li>

</ul>

6


jQuery – Traversing (contd.)

Filter(Selector) method

Example: $("li").filter(".middle").addClass("selected")

<style>

.selected

{

color:red;

}

</style>

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

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

<li class="bottom">list item 5</li>

</ul>

7



Find(selector) method - To locate all the descendent elements of a particular type of elements

Example: $("p").find("span").addClass("selected")

<style>

.selected { color:red; }

</style>

<p>This is 1st paragraph and <span>THIS IS RED</span></p>

<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>

8



Filter(Selector) method

Example: $("li").filter(".middle").addClass("selected")

<style>


</style>

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


<li class="bottom">list item 5</li> </ul>

9



Is(selector) method – Checks the current selected item against asn expression and returns true or false

element.is( selector )

Example:

$("li").click(function ()

{ if ($(this).is(":first-child"))

{ $("p").text("This is list item 1"); }

else if ($(this).is(".middle0,.middle1"))

{ $("p").text("This is middle class list"); }

else if ($(this).is(":contains('item 5')"))

{ $("p").text("It's 5th list"); }

});

10



<ul>

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

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

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

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

<li class="bottom0">list item 5</li>

<li class="bottom1">list item 6</li>

</ul>

<p>FILLER</p>

11



12

map(callback) method – translates a set of elements into another set of value

callback: The function to execute on each element in the set

selector.map( callback )

Example:

var mappedItems = $("li").map(function (index) {

var replacement = $("<li>").text($(this).text()).get(0);

if (index == 0) {

$(replacement).text($(replacement).text().toUpperCase()); }

else if (index == 1 || index == 3) {

replacement = null; }

else if (index == 2) {

$(replacement[0]).append("<b> - A</b>");

$(replacement[1]).append("Extra <b> - B</b>"); }

return replacement; });

$("#results").append(mappedItems);



<ul> <li>First</li>

<li>Second</li>

<li>Third</li>

<li>Fourth</li>

<li>Fifth</li> </ul>

<ul id="results"> </ul>

Not(selector) method – filters out all the elements matching the specified selector from the set of matched elements

Selector – can be multiple to apply multiple filters

selector.not( selector )

13



Example: $("li").not(".middle").addClass("selected“)

<style>


</style>

<ul>

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



</ul>

Result:

<ul>

<li class=“selected">list item 1</li>



</ul>

14



slice( start, end ) method – selects a subset of the matched elements

selector.slice( start, end )

Example: $("li").slice(2,3).addClass("selected")

<style>


</style>

<ul>

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



</ul>

15



Result:

<ul>

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

<li class=“middle">list item 2</li>


</ul>

andSelf( ) method – adds the previous selection to the current selection

selector.andSelf( )

Example: $("div").find("p").andSelf().addClass("border")

16


18

jQuery

Time for a Break !


19

jQuery

Questions from participants


20

Test Your Understanding

What is a Traversing?

What is Filter(Selector) method funtion used for?


21

jQuery :Summary

From this session, we have seen various methods

To traverse DOM elements up or down in random or sequential method

To filter the DOM elements based on some condition

To select subset of the DOM elements


22

<RIO Name>: Source

http://docs.jquery.com/Main_Page

http://www.w3schools.com/jquery/default.asp

http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

Disclaimer: Parts of the content of this course is based on the materials available from the Web sites and books listed above. The materials that can be accessed from linked sites are not maintained by Cognizant Academy and we are not responsible for the contents thereof. All trademarks, service marks, and trade names in this course are the marks of the respective owner(s).

http://docs.jquery.com/Main_Page

http://www.w3schools.com/jquery/default.asp






You have successfully completed

Session 9 of jQuery

Click here to proceed

rio 6 jquery traversing v1.3

Documents