Scribd
Upload
26 views

DOM Traversing

Uploaded by

kamnachoudhary0512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

DOM Traversing

Uploaded by

kamnachoudhary0512
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

DOM Traversing and

AJAX
By:
Parul Madan(AP)
Computer Science
What is Traversing in jQuery?

jQuery traversing, which means "move


through”.Start with one selection and move
through that selection until you reach the
elements you desire.
Traversing in jQuery
 The <div> element is the parent of <ul>,
and an ancestor of everything inside of it
 The <ul> element is the parent of both <li>
elements, and a child of <div>
 The left <li> element is the parent of
<span>, child of <ul> and a descendant of
<div>
 The <span> element is a child of the left
<li> and a descendant of <ul> and <div>
 The two <li> elements are siblings (they
share the same parent)
 The right <li> element is the parent of
<b>, child of <ul> and a descendant of
<div>
 The <b> element is a child of the right <li>
and a descendant of <ul> and <div>
Traversing Up the DOM Tree
<div class="ancestors">
<div style="width:500px;">div (great-
grandparent)
 parent(): method returns <ul>ul (grandparent)
the direct parent element of <li>li (direct parent)
<span>span</span>
the selected element. </li>
 parents():method returns all </ul>
</div>
ancestor elements of the <div style="width:500px;">div (grandparent)
selected element, all the <p>p (direct parent)
<span>span</span>
way up to the document's </p>
root element (<html>). </div>
</div>
 parentsUntil():The parents <script>
Until() method returns all $(document).ready(function(){
$
ancestor elements between ("span").parentsUntil("div").css({"color": "red"
two given arguments. , "border": "2px solid red"});
});
</script>
Traversing Down the DOM Tree

 children():method <div class="descendants" style="width:50


0px;">div (current element)
returns all direct <p class="first">p (child)
children of the <span>span (grandchild)</span>
selected element. </p>
<p class="second">p (child)
 find(): method
<span>span (grandchild)</span>
returns descendant </p>
elements of the </div>
selected element, all <script>
the way down to the $(document).ready(function(){
$
last descendant. ("div").find("span").css({"color": "red", "bord
er": "2px solid red"});
});
</script>
Traversing Sideways in The DOM Tree

 siblings():method returns all  prev()


sibling elements of the
selected element.
 prevAll()
 next(): method returns the  prevUntil()
next sibling element of the
selected element.
 nextAll():method returns all
next sibling elements of the
selected element.
 nextUntil():method returns
all next sibling elements
between two given
arguments.
jQuery Traversing - Filtering

 first(), last() and eq(),


which allow you to
select a specific
element based on its
position in a group of
elements.
 filter() and not() allow
you to select
elements that match,
or do not match, a
certain criteria.
What is AJAX?
AJAX is about loading data in the background and
display it on the webpage, without reloading the whole
page.
For eg: Gmail, Google Maps, Youtube, and Facebook tabs
etc.
NOTE: With the jQuery AJAX methods, you can request
text, HTML, XML, or JSON from a remote server using
both HTTP Get and HTTP Post - And you can load the
external data directly into the selected HTML elements of
your web page!
jQuery load() Method

The load() method loads data from a server and puts the returned data into the
selected element.
Syntax:
$(selector).load(URL , data ,callback);
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo.txt", function(responseText, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
<div id="div1"><h2>XXXXXXXXXXXXXXXXXX</h2></div>
$get() and $post()
 The $.get() method requests data from the
server with an HTTP GET request.
$.get(URL,callback);
 $.post() method requests data from the

server using an HTTP POST request.


$.post(URL,data,callback);

You might also like