Front End Web Development

Topic 8:
jQuery

© NCC Education Limited

 jQuery Topic 8 - 8.2

Scope and Coverage

This topic will cover:
• jQuery introduction
• jQuery Syntax
• jQuery Events
• jQuery Effects
• DOM
• jQuery UI
 jQuery Topic 8 - 8.3

Learning Outcomes
By the end of this topic students will be able to:
• Explain jQuery concepts
• Create animated, interactive web pages using
jQuery library
• Make use of simple jQuery examples
• Explain jQuery Events and Effects
• Describe jQuery UI
 jQuery Topic 8 - 8.4

Unit Roadmap
Week Topic Week Topic
Overview of Web
1 Application 7 JavaScript - II
Architecture
Introduction to
2 HTML5 8 jQuery

Introduction to CSS Responsive CSS Framework:

3 9
Bootstrap - I
HTML and CSS Responsive CSS Framework:
4 10
Bootstrap - II
CSS Flexbox and Code Review and Testing. and
5 Grid Layout 11
Collaboration
6 JavaScript - I 12 Unit Summary
 jQuery Topic 8 - 8.5

jQUERY
 jQuery Topic 8 - 8.6

Introduction to jQuery
• jQuery is a lightweight, feature rich JavaScript library

• jQuery provides easy-to-use APIs to achieve the following:

o Manipulate HTML, CSS and DOM

o Handling HTML events
o Applying effects and animations
o AJAX
o Utilities

• One of the most popularly used OpenSource libraries

• Reduces the number of lines of code when compared with JavaScript

 jQuery Topic 8 - 8.7

Introduction to jQuery
• Most popular and extendable library for websites and mobile single
page app development

• As of June 2022, jQuery is used on 73% of the top 1 million

websites, and by 22.4% of overall number of websites

• Large companies (ex: Google) use jQuery library and host jQuery
CDN (Both Google and Microsoft)

• jQuery simplifies the syntax for finding, selecting, and manipulating

DOM elements

• jQuery is supported by all modern browsers.

 jQuery Topic 8 - 8.8

jQuery Development Principles

P1: Separation of HTML and JS
 Simple syntax for handling DOMs (Ex: Events)
 Avoids need for adding HTML event attributes to call JavaScript
functions
 JavaScript code is separated from HTML

P2: Elimination of cross-browser incompatibilities

 JavaScript incompatibility with different browsers is eliminated
 Makes JavaScript universal across browsers
 jQuery handles all these cross-browser inconsistencies and
provides a consistent interface

P3: Extensibility
 New events, elements, and methods can be easily added and
reused as a plugin
 jQuery Topic 8 - 8.9

jQuery syntax
jQuery syntax is designed to select HTML elements and perform actions
on them.
Syntax: $(selector).action() Selector : this | id | class | element

$(this).action(); // Take action on current element

$(“div”).action(); // Take action on all divisions

$(“.abc”).action(); // Take action on all abc class

Actions can be of varied in nature (ex: DOM manipulation, events

etc..) which will be covered in the subsequent slides

The $ used is a jQuery function

 jQuery Topic 8 - 8.10

jQUERY EVENTS
 jQuery Topic 8 - 8.11

jQuery Ready Event

• Ensure the DOM tree is fully
created before utilising jQuery to
access elements
• DOM tree is created using the
“ready” event
• If it is not created, following
failures may happen:

• Finding an element that is not

created
• Hiding an element that is not
created

• jQuery detects the state of

readiness of document then
perform actions
 jQuery Topic 8 - 8.12

jQuery Load Event

• Load event is used to detect when a specific element has completely
loaded.
• Useful for executing a function when an image, script, or iframe has been
loaded.
 jQuery Topic 8 - 8.13

jQuery Passing Named Functions

Define named functions and then use them as handlers for events
 jQuery Topic 8 - 8.14

jQuery noConflict Mode

• By default, jQuery uses $ as

a shortcut for jQuery

• If another JavaScript library

uses the $ variable, creates
conflicts with jQuery

• To avoid these conflicts, put

jQuery in no-conflict mode
immediately after it is loaded
onto the page and before
attempt to use jQuery in the
page
 jQuery Topic 8 - 8.15

Selectors
• Selectors are the most basic concept of
jQuery

• As the name of jQuery implies - select some

elements and do something with them

• jQuery supports most CSS3 selectors, as well

as some non-standard selectors

• Combination of selectors provides an easy

way to modify / manipulate HTML elements

• All selectors in jQuery start with the dollar

sign and parentheses $() followed by action
 jQuery Topic 8 - 8.16

Selectors - Example
 jQuery Topic 8 - 8.17

Element Selectors
Selector Descriptio
$("*") n
Selects all elements
$("#id") Selects an element having identifier as id
$(".class-name") Selects element with class as class-name
$("p:first") Selects first element in a paragraph
$("ul li:first") Selects the first <li> element of the first <ul>
$("[href]") Selects all elements with an href attribute
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
$("div:gt(2)") All div elements except the first three
 jQuery Topic 8 - 8.18

Quiz -1
1. How do you select all elements with the class 'example' using jQuery?
A) $("example")
B) $(".example")
C) $("#example")

2. Which jQuery selector is used to select an element with the ID 'unique'?

A) $(".unique")
B) $("unique")
C) $("#unique")

3. How do you select all <p> elements inside a <div>?

A) $("div p")
B) $("div + p")
C) $("div > p")
 jQuery Topic 8 - 8.19

jQUERY EVENTS AND

EFFECTS
 jQuery Topic 8 - 8.20

Event Handling Using jQuery

• Events bring interactivity with users

• Many peripherals (ex: mouse) can be

the source of events

• Upon events appropriate is done

called as Event Handling

• In JavaScript event handling was

done by implementing methods in
HTML element itself

• jQuery provides better facility to

handle them by de-coupling from
HTML

• Selectors are combined with actions

on a particular event
 jQuery Topic 8 - 8.21

Example Events
Selector Description
Mouse click | dbclick | hover | mouseenter | mouseleave
Keyboard keypress | keyup | keydown
Form focus | blur | submit
Window (BOM) load | resize
 jQuery Topic 8 - 8.22

Introduction to Effects
• Effects provide more options to operate on an HTML element

• jQuery offers multiple options, e.g. showing / hiding

• It enables animation-oriented application

• Effects provide easier way to deal with HTML elements

• Fewer lines of code is needed

• Multiple effects can be combined as well using jQuery

effects chaining
 jQuery Topic 8 - 8.23

Hide and Show Effects

Selector Description
$(selector).hide(speed,callback); Hide the selected element

Speed - slow | fast | milliseconds

Callback - will study in later topic
$(selector).show(speed,callback); Show the selected element
$(selector).toggle(speed,callback); Toggle between hide and show of the selected element
 jQuery Topic 8 - 8.24

Hide and Show Effects Example

 jQuery Topic 8 - 8.25

Fading Effects
Selector Description
$(selector).fadeIn(speed,callback); It is used to fade in a hidden elements
$(selector).fadeOut(speed,callback); It is used to fade out a visible element
$(selector).fadeToggle(speed,callback); Toggles between the fadeIn() and fadeOut()
methods
$(selector).fadeTo(speed,opacity,callback); Allows fading to a given opacity (value between 0
and 1)
 jQuery Topic 8 - 8.26

Fading Effects - Example

 jQuery Topic 8 - 8.27

Sliding Effects

Selector Description
$(selector).slideDown(speed,callback); Slide down an element
$(selector).slideUp(speed,callback); Slide up an element
$(selector).slideToggle(speed,callback); Toggles between the slideDown() and slideUp()
methods
 jQuery Topic 8 - 8.28

Sliding Effects
 jQuery Topic 8 - 8.29

Animation Effects

Selector & Description

$(selector).animate({params},speed,callback);
 jQuery Topic 8 - 8.30

Callback usage in jQuery

• JavaScript is an interpreted
language, where statements are
executed line by line

• In case of effects, the next line of

code can be run even though the
current effect is not finished

• This will create issue in getting the

correct output

• In order to prevent this call-back

functions are provided in jQuery

• Callback function is executed after

the current effect is finished
 jQuery Topic 8 - 8.31

Chaining in jQuery

• Multiple jQuery
actions/methods can be
combined together
• It helps to execute multiple
actions using single statement
 jQuery Topic 8 - 8.32

Quiz - 2
1. Which method is used to hide an element with a sliding motion in jQuery?
A) slideHide()
B) slideUp()
C) hideSlide()

2. How do you apply a fading out effect to an element with jQuery?

A) fadeOut()
B) fadeAway()
C) opacityOut()

3. Which jQuery method is used to animate the custom properties of an

element?
A) animate()
B) customAnimate()
C) motion()
 jQuery Topic 8 - 8.33

jQUERY DOM
 jQuery Topic 8 - 8.34

Document Object Model (DOM)

• Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and
scripts to dynamically access and update the content,
structure, and style of a document.

• jQuery provides multiple methods to manipulate DOM.

• Using these methods it is easy to access and manipulate

elements and attributes.

• It also provides methods to change browser window

dimensions.
 jQuery Topic 8 - 8.35

DOM APIs
Selector Description
$(selector).text(); Sets or returns the text content of selected elements
$(selector).html(); Sets or returns the content of selected elements (including HTML mark-up)
$(selector).val(); Sets or returns the value of form fields
 jQuery Topic 8 - 8.36

Setting values using DOM APIs

 jQuery Topic 8 - 8.37

DOM APIs – Insert and Remove

Selector Description
$(selector).append(); Inserts content at the end of the selected elements
$(selector).prepend(); Inserts content at the beginning of the selected elements
$(selector).after(); Inserts content after the selected elements
$(selector).before() Inserts content before the selected elements
$(selector).remove(); Removes the selected element (and its child elements)
$(selector).empty(); Removes the child elements from the selected element
 jQuery Topic 8 - 8.38

DOM APIs – Insert and Remove

Example
 jQuery Topic 8 - 8.39

jQuery – Dimension APIs

Selector Description
$(selector).width(); Sets or returns the width of an element (excludes padding, border and
margin)
$(selector).height(); Sets or returns the height of an element (excludes padding, border and
margin).
$(selector).innerWidth(); Returns the width of an element (includes padding)
$(selector).innerHeight(); Returns the height of an element (includes padding)
$(selector).outerWidth(); Returns the width of an element (includes padding and border)
$(selector).outerHeight(); Returns the height of an element (includes padding and border)
 jQuery Topic 8 - 8.40

jQuery – Dimension APIs

 jQuery Topic 8 - 8.41

Example – Dimensions API

 jQuery Topic 8 - 8.42

jQUERY UI
 jQuery Topic 8 - 8.43

jQuery UI – draggable()
The jQuery UI draggable() method
makes any DOM element
draggable after which you can drag
it anywhere within the HTML page.

Syntax: $(selector).draggable();
 jQuery Topic 8 - 8.44

jQuery UI – droppable()
The jQuery UI droppable() method
makes any DOM element droppable
that can be dropped at a specified
target area on the HTML page.

Syntax: $(selector).droppable();
 jQuery Topic 8 - 8.45

jQuery UI – DatePicker
• The jQuery UI datepicker facilitates user to enter dates easily and visually
with an aid of calendar widget

• More options in the jQuery UI Datepicker API documentation

Syntax:
$(selector).datepicker();
 jQuery Topic 8 - 8.46

jQuery UI – DatePicker Example

 jQuery Topic 8 - 8.47

References
Books:
• jQuery Introduction & Syntax
• Chaffer, J., & Swedberg, K. (2013). jQuery in Action. Manning Publications.
• jQuery Events & Effects
• Bibeault, B., & Katz, Y. (2015). Learning jQuery, 3rd Edition. Packt Publishing.
• DOM
• Duckett, J. (2014). JavaScript and JQuery: Interactive Front-End Web Development. John Wiley & Sons.
• jQuery UI
• Libby, A. (2014). jQuery UI in Action. Manning Publications. Web Resources
• jQuery Introduction
• jQuery.com. jQuery Introduction. Available at: jQuery Introduction
• jQuery Syntax
• W3Schools. jQuery Syntax. Available at: W3Schools jQuery Syntax
• jQuery Events
• Mozilla Developer Network (MDN). Introduction to events. Available at: MDN Events
• jQuery Effects
• jQuery.com. jQuery Effects. Available at: jQuery Effects
• DOM
• Mozilla Developer Network (MDN). Introduction to the DOM. Available at: MDN DOM Introduction
• jQuery UI
• jQueryUI.com. jQuery UI. Available at: jQuery UI
Topic 8 – jQuery

Any Questions?