MANIPULATING

DOM USING
JQUERY
DOM TREE

2
DOM TRAVERSAL

parent()
• Direct parent element of the
selected element

$(‘title’).parent();

= will return “head”

parents()
• All ancestor elements of the
selected element

$(‘p’).parents();

= will return “body”, “html”

3
DOM TRAVERSAL

children()
• All direct children of the selected
element

$(‘body’).children();

= will return “p”, “div”, “ul”

siblings()
• All sibling elements of the selected
element

$(‘ul’).siblings();

= will return “p”, “div”

4
DOM TRAVERSAL

next() / nextAll()
• Next or all next sibling element/s

$(‘p’).next();

= will return “div”

prev() / prevAll()
• Previous or all previous sibling
element/s

$(‘ul’).prev();

= will return “div”

5
DOM TRAVERSAL

eq()
• Used to select a specific element
from multiple selected elements
• Uses index number similar to an
array

$(‘.heading’).eq(2);

= will return “h1 (Heading 3)”

6
remove()
• Delete specific elements from
selected elements

$(‘.heading’).eq(0).remove();

= will remove “h1 (Heading 1)”

empty()
• Used to empty out contents of the
selected element

$(‘p’).empty();

= will empty out “p”

7
MANIPULATING
DOM USING
JQUERY
 COMMON EVENT HANDLER FUNCTIONS
click()
• occurs when an element is
clicked.

$(‘button’).click(function()
{ //code
});
dblclick()
• occurs when an element is
double-clicked.

$(‘div’).dblclick(function()
{ //code
});
9
COMMON EVENT HANDLER FUNCTIONS
mouseenter()
• occurs when the mouse pointer is
enters the selected element’s area

$(“button").mouseenter(function(
){$(“button").css("background-
color", “green");});

mouseleave()
• occurs when the mouse pointer
leaves the selected element.

$(“button").mouseleave(function(
){$(“button").css("background-
color", "gray");});
10
COMMON EVENT HANDLER FUNCTIONS
mouseover()
• occurs when the mouse pointer
is over the selected element.

$(“button").mouseover(function()
{ //code
});

mouseout()
• occurs when the mouse pointer
is outside the selected element.

$(“button").mouseout(function(){
//code
});
11
COMMON EVENT HANDLER FUNCTIONS

keydown()
• occurs when a keyboard key is
pressed down.

$("input").keydown(function(){
$("input").css("background-
color", "yellow");});

keyup()
• occurs when a keyboard key is
released.

$("input").keyup(function(){
$("input").css("background-
color", “red");});

12
COMMON EVENT HANDLER FUNCTIONS

submit() focus()
• occurs when a form is • occurs when an element gets
submitted. focus.

$("input").submit(function(){ $(“input”).focus(function()
//code { //code
}); });
change() blur()
• occurs when the value of an • occurs when an element loses
element has been changed. focus.

$("input").change(function(){ $(“input”).blur(function(){
//code //code
}); }); 13
 COMMON EVENT HANDLER FUNCTIONS

ready() scroll()
• occurs when the DOM has • occurs when the user scrolls in
been loaded. the specified element.

$(document).ready(function( $(“div”).scroll(function(){
){ //code //code
}); });
resize()
• occurs when the browser
window changes size.

$(window).resize(function()
{ //code
}); 14
on() off()
• An alternative programming • It is the opposite method for
technique that can handle the on() method.
events in jQuery • It is used to remove any event
• It replaces any given event handlers for a selected
listening method with itself. element.
• The event listening
method is written as the $("button").click(function(){
first parameter, while the $("p").off("click");
function becomes the });
second parameter.

$(“p”).on(“click”, function(){
$(this).css("background-color",
"pink");
});
15
THE EVENT OBJECT
• It allows event handling functions to receive objects that contain properties and
methods related to their events.
• Event objects are passed to event handler functions as an argument. This allows for the
event object (including its properties and methods) to be used within the event
handling function.

• Event Object Properties

 The pageX and pageY properties return the mouse position (X & Y coordinates) at
the time the event occurred, relative to the top left of the page.
 The type property returns the type of the event (e.g. "click").
 The which property is specific to keyboard events; it returns the button or key that
was pressed.
 The data property returns any data that was passed in when the event was bound.
 The target property returns the DOM element that initiated the event.
16
event.preventDefault() event.stopPropagation()
• The preventDefault() method • Stops the event from
prevents the default action of propagating up (bubbling) to
an event other elements (parent,
ancestor elements).
<script>
$(document).ready(function(){
$(document).ready(function(){
$("span").click(function(event){
$("a").click(function(event){ event.stopPropagation();
event.preventDefault(); alert("The span element was
clicked."); });
});
$("p").click(function(event){
}); alert("The p element was
</script> clicked."); });
$("div").click(function(){
<a
alert("The div element was
href="https://w3schools.com/"> clicked."); });
Go to W3Schools.com </a>
});
17
trigger()
• Allows the execution of event $(document).ready(function(){
handling functions in jQuery $("input").select(function(){
without any trigger from $("input").after(" Text
events. marked!");
• The method is not without });
limitations, as it cannot be $("button").click(function(){
used to mimic native browser
events, such as clicking on a $("input").trigger("select");
file input box or an anchor tag.
});
• Only events in the jQuery event });
system can be handled.

18
 toggle()
hide()
• Can be used to alternate
• Used to hide selected
between showing and hiding
element/s
elements
$("button").click(function(){
$("p").toggle(
$("p").hide();
}); function(){$("p").css({"color":
"red"});},
show()
function(){$("p").css({"color":
• Used to show selected
element/s "blue"});},

$("button").click(function(){ function(){$("p").css({"color":
$("p").show(); "green"});
});
});
19
20
fadeIn() fadeToggle()
• Gradually fades an element • Can be used to alternate between
until it is visible. fading in and fading out elements.

$(‘p').click(function(){
$(‘p').click(function(){
$('img').fadeToggle();
$('img').fadeIn();
});
});
fadeOut() fadeTo()
• Gradually fades an element • Used to fade an element to a
until it is invisible. given opacity
• It uses floating-point values from
$(‘p').click(function(){ zero (0) and one (1) to denote
$('img').fadeOut(); opacity percentage
});
$(‘p').click(function(){
$('img').fadeTo(.5);
});
21
22
slideUp()
• Produces an upwards sliding
effect to hide the selected
slideToggle()
element.
• produces an sliding effects to
$(‘p').click(function(){ hide and show the selected
$('img').slideUp();}); element.

$(‘p').click(function(){
slideDown() $('img').slideToggle();
• produces an upwards sliding });
effect to show the selected
element.

$(‘p').click(function(){
$('img').slideDown();});

23
24
animate()

❑ It is a jQuery method that allows animations to a set value, or to a value

relative to the current value.
❑ First parameter: CSS property, Second parameter: animation speed.
❑ Multiple properties can be animated simultaneously; this can be done by
separating each CSS property with commas (,).
❑ Relative values can also be defined using addition assignment (+=) or
subtraction assignment (-=) operators.

$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height: “+=100px“,
width: “+=100px”}, 1000);}); });

25
Rules for the animate() method

• Any CSS property can be animated using the method, however, ALL property
names must be camel-cased when used with the animate() method.
 camelCase is the practice of writing compound words or phrases such
that each word or abbreviation begins with a capital letter with the first
word in lowercase.
• Dashes are eliminated from property names

Example:
CSS properties camelCase

text-transform textTransform

border-radius borderRadius

padding-left paddingLeft
26
Animation Queue

• If multiple animate() method calls are declared one after another, jQuery
creates an "internal" queue for these method calls, then it runs the animate
calls one-by-one in sequence.

$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: ‘600px’, width: ‘300px'}, “fast");
div.animate({width: ‘300px', opacity: ‘600px'}, " fast");
div.animate({height: ‘300px', opacity: ‘600px'}, " fast");
div.animate({width: ‘300px', opacity: ‘300px'}, " fast");
});
});
27