Upload
sasirekha-perumalvijayan
View
31
Download
0
Embed Size (px)
DESCRIPTION
jquery
Citation preview
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
© 2007, Cognizant Technology Solutions Confidential
3
Icons Used
Questions
Contacts
Reference
Demonstration
Hands on Exercise
Coding Standards
Test Your Understanding
Tools
A Welcome Break
© 2007, Cognizant Technology Solutions Confidential
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
© 2007, Cognizant Technology Solutions Confidential
5
jQuery : Objectives
Objective: After completing this chapter you will be able to:
Define Traversing.
Describe the functions available in Traversing .
© 2007, Cognizant Technology Solutions Confidential
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
© 2007, Cognizant Technology Solutions Confidential
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
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
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
© 2007, Cognizant Technology Solutions Confidential
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>
9
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
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
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
<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
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
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);
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
<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
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
Example: $("li").not(".middle").addClass("selected“)
<style>
.selected { color:red; }
</style>
<ul>
<li class="top">list item 1</li>
<li class="middle">list item 2</li>
<li class="bottom">list item 3</li>
</ul>
Result:
<ul>
<li class=“selected">list item 1</li>
<li class="middle">list item 2</li>
<li class=“selected">list item 3</li>
</ul>
14
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
slice( start, end ) method – selects a subset of the matched elements
selector.slice( start, end )
Example: $("li").slice(2,3).addClass("selected")
<style>
.selected { color:red; }
</style>
<ul>
<li class="top">list item 1</li>
<li class="middle">list item 2</li>
<li class="bottom">list item 3</li>
</ul>
15
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
Result:
<ul>
<li class=“top">list item 1</li>
<li class=“middle">list item 2</li>
<li class=“selected">list item 3</li>
</ul>
andSelf( ) method – adds the previous selection to the current selection
selector.andSelf( )
Example: $("div").find("p").andSelf().addClass("border")
16
© 2007, Cognizant Technology Solutions Confidential
jQuery – Traversing (contd.)
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
</style>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
Result:
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>
17
© 2007, Cognizant Technology Solutions Confidential
18
jQuery
Time for a Break !
© 2007, Cognizant Technology Solutions Confidential
19
jQuery
Questions from participants
© 2007, Cognizant Technology Solutions Confidential
20
Test Your Understanding
What is a Traversing?
What is Filter(Selector) method funtion used for?
© 2007, Cognizant Technology Solutions Confidential
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
© 2007, Cognizant Technology Solutions Confidential
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).
You have successfully completed
Session 9 of jQuery
Click here to proceed