Web Technologies

jQuery Applications
 Today’s Lecture
• jQuery Effects
– Hide and Show
– Toggle
– Fade (fadeIn, fadeOut, fadeToggle, and fadeTo)
– Slide (slideDown, slideUp, and slideToggle)
– Animate
• jQuery Method Chaining
• DOM Manipulation
– Attribute Manipulation
– Style Manipulation
 jQuery Effects
hide() and show()
• With jQuery, we can hide and show HTML elements with hide() and
show() methods.

before clicking any button after clicking Hide button

 jQuery Effects
hide() and show()
• Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
– speed optional parameter specifies speed of hiding/showing,
and can take "slow", "fast", or milliseconds values.
– callback optional parameter is a function to be executed after
hide() or show() method completes.

before clicking Hide button

after clicking Hide button

 jQuery Effects
toggle()
• We can toggle between hiding and showing an element with
toggle() method.

before clicking button

after clicking button
 jQuery Effects
toggle()
• Syntax:
$(selector).toggle(speed,callback);
– speed optional parameter can take "slow", "fast", or
milliseconds values.
– callback optional parameter is a function to be executed after
toggle() completes.
 jQuery Effects
fade
• With jQuery, we can fade elements in and out of visibility.
• jQuery has fade methods: fadeIn(), fadeOut(), fadeToggle(), and fadeTo()
• fadeIn()used to fade in a hidden element.
– Syntax: $(selector).fadeIn(speed,callback);
• speed optional parameter specifies duration of the effect, that can
take values like "slow", "fast", or milliseconds.
• callback optional parameter is a function executed after fading
completes.
before clicking button

after clicking button

 jQuery Effects
fade
• fadeOut() used to fade out a visible element.
– Syntax: $(selector).fadeOut(speed,callback);
• speed optional parameter specifies duration of the effect, that can
take values like "slow", "fast", or milliseconds.
• callback optional parameter is a function executed after fading
completes.
before clicking button

after clicking button

 jQuery Effects
fade
• fadeToggle() toggles between fadeIn() and fadeOut()methods.
– If elements are faded out, fadeToggle() will fade them in.
– If elements are faded in, fadeToggle() will fade them out.
– Syntax: $(selector).fadeToggle(speed,callback);
• speed optional parameter specifies duration of effect that take
"slow", "fast", or milliseconds values.
• callback optional parameter is a function executed after fading
completes.
before clicking button

after clicking button

 jQuery Effects
fade
• fadeTo() allows fading to a given opacity (value between 0 and 1).
– Syntax: $(selector).fadeTo(speed,opacity,callback);
• speed required parameter specifies duration of effect that can
take "slow", "fast", or milliseconds values.
• opacity required parameter in fadeTo() method specifies fading to
a given opacity (value between 0 and 1).
• callback optional parameter is a function executed after function
completes. before clicking button

after clicking button

 jQuery Effects
slide()
• jQuery has slide methods: slideDown(), slideUp(), and slideToggle()
• slideDown() used to slide down an element.
– Syntax: $(selector).slideDown(speed,callback);
• speed optional parameter specifies duration of effect that can take
"slow", "fast", or milliseconds values.
• callback optional parameter is a function executed after sliding
completes.

before clicking button

after clicking button

 jQuery Effects
slide()
• slideUp() used to slide up an element.
– Syntax: $(selector).slideUp(speed,callback);
• speed optional parameter specifies duration of effect that can take
"slow", "fast", or milliseconds values.
• callback optional parameter is a function executed after sliding
completes.

before clicking button

after clicking button

 jQuery Effects
slide()
• slideToggle() toggles between slideDown() and slideUp() methods.
– If elements are slide down, slideToggle() will slide them up.
– If elements are slide up, slideToggle() will slide them down.
– Syntax: $(selector).slideToggle(speed,callback);
• speed optional parameter specifies duration of effect that can take
"slow", "fast", or milliseconds values.
• callback optional parameter is a function executed after sliding
completes.

before clicking button

after clicking button

 jQuery Effects
animate
• animate() used to create custom animations.
– Syntax: $(selector).animate({params},speed,callback);
• params required parameter defines CSS properties to be animated.
• speed optional parameter specifies duration of effect that can take
"slow", "fast", or milliseconds values.
• callback optional parameter is a function executed after animation
completes.
<script>
$(document).ready(function(){ before clicking button
$("button").click(function(){
$("div").animate({left: '336px'});});});
</script> </head><body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static
position, and cannot be moved. To manipulate the
after clicking button
position, remember to first set the CSS position
property of the element to relative, fixed, or absolute!
</p>
<div
style="background:lightgreen;height:100px;width:100
px;position:relative;"></div></body>
 jQuery Method Chaining
• Chaining allow us to run multiple jQuery methods (on same
element) within a single statement.

before clicking button

after clicking button

 DOM Manipulation
We can use following methods to create/insert elements/nodes with
JavaScript:
• Creating New Element Nodes
– createElement() create a new element node.
– createTextNode() create a new text node.
• Inserting Element Nodes in DOM
– appendChild() add a node as last child of a parent element.
– insertBefore() insert a node into parent element before a
specified sibling node.
– replaceChild() replace an existing node with a new node.
• Removing Element Nodes from DOM
– removeChild() remove child node.
– remove() remove node.
 DOM Manipulation
We can use following methods to add, edit or delete DOM element(s) with
jQuery:
• DOM Insertion
– append() inserts content as last child of each selected (parent)
element(s).
– prepend() inserts specified content as first child of each selected
(parent) element(s).
– after() inserts specified content after selected element(s).
– before() inserts specified content before selected element(s).
• DOM Removal
– empty() removes child elements of selected (parent) element(s).
– remove() removes selected (parent) element (and its child elements).
• DOM Replacement
– replaceAll() replaces selected element(s) with new HTML elements.
– replaceWith() replaces selected elements with new content.
 DOM Manipulation
JavaScript Attribute Manipulation
• Get/Set Content
– innerText sets or returns text content of specified node, and all
its descendants.
– innerHTML sets or returns HTML content of an element
(including HTML tags).
– value sets or returns content of input controls (value of form
fields).
• Get/Set Attributes
– getAttribute() get the value of an attribute of the element.
– setAttribute() sets a value to an attribute.
 DOM Manipulation
jQuery Attribute Manipulation
• Get/Set Content
– text() sets or returns text content of selected element(s).
– html() sets or returns content of selected element(s) (including
HTML tags).
– val() sets or returns value of form field(s).
• Get/Set Attributes
– attr() sets or returns attributes and values of selected attributes.
 DOM Manipulation
jQuery Attribute Manipulation

before clicking button after clicking button

 DOM Manipulation
jQuery Style Manipulation
• css() sets or returns one or more style properties for selected
elements.
– We can get computed value of an element's CSS property by
passing property name as a parameter to css()method.
• jQuery Add and Remove CSS Classes
– jQuery provides several methods to manipulate CSS classes
assigned to HTML elements.
• addClass() adds one or more classes to selected elements.
• removeClass() removes one or more classes from selected
elements.
• toggleClass() toggles between adding/removing classes from
selected elements.
 Summary of Today’s Lecture
• jQuery Effects
– Hide and Show
– Toggle
– Fade (fadeIn, fadeOut, fadeToggle, and fadeTo)
– Slide (slideDown, slideUp, and slideToggle)
– Animate
• jQuery Method Chaining
• DOM Manipulation
– Attribute Manipulation
– Style Manipulation
 References
• https://api.jquery.com/
• https://learn.shayhowe.com/advanced-html-css/jquery/
• https://www.w3schools.com/jquery/default.asp
• https://www.w3schools.com/jquery/jquery_ref_effects.asp
• https://www.w3schools.com/jquery/jquery_chaining.asp