CS-344: WEB ENGINEERING
Dr. Mehdi Hussain mehdi.hussain@seecs.edu.pk
Lecture-9ABC
School of Electrical Engineering and Computer Science (SEECS)
National University of Science and Technology (NUST)
2
Outline
• jQuery
• Downloading and Implementing JQuery
• JQuery Selectors
• JQuery Chain Methods
• JQuery Events
• JQuery Effects
• CSS Implementation
• Callback
• Image Slider
• Traversing
3
jQuery
• A JavaScript library which greatly simplifies JavaScript programming
• jQuery is a fast, small, and feature-rich JavaScript library.
• It makes things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works across a multitude
of browsers.
• Write less, do more!
• Common tasks that require many lines of JavaScript code can be written in few lines.
• Complicated things, like AJAX and DOM manipulation is simplified
• Features
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX and other Utilities
4
Installing jQuery
• Download
• http://jquery.com
• For development, use uncompressed file
• E.g., jquery.js , jquery-3.4.1.js
• For deployment, use compressed file
• E.g., jquery-3.4.1.min.js
• For easier upgrades without changing HTML files
• Rename file to jquery.js (or possibly jquery-3.4.1.js)
• Installation
• Load jquery.js before any JS files that use jQuery
• Online API and tutorials
• http://docs.jquery.com
5
Will jQuery work in all browsers?
• The jQuery team knows all about cross-browser issues,
and they have written this knowledge into the jQuery
library
• jQuery will run exactly the same in all major browsers
6
Who Uses jQuery?
Google Amazon IBM
Microsoft Twitter Dell
7
HTML DOM
• A standard way for accessing and manipulating HTML
documents.
• Presents an HTML document as a tree-structure
8
DOM?
• Long story short, the DOM is your html document code.
From the
• <!DOCTYPE> to the </html>
• The DOM is "ready" when everything on the page has
loaded.
• Images
• Stylesheets
• JavaScripts
• jQuery can modify the DOM, but it cannot do so until
the DOM is ready
9
Loading jQuery
• In order to use jQuery you need to load it
• You can include it locally on your own server:
• <script src="/js/jquery.js">
• What if I don’t want to download and host
jQuery locally?
10
jQuery CDN
• If you don't want to download and host jQuery yourself, you
can include it from a CDN (Content Delivery Network).
• Both Google and Microsoft host jQuery
• To use jQuery from Google or Microsoft, use one of the
following:
• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jque
ry.min.js"></script>
• <script src=https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.3.1.js></script>
Many users already have downloaded jQuery from
Google or Microsoft when visiting another site
11
JQuery Example
• Link to run the code
• Link of odd rows of table
• General Links
12
Wait!!!
• In order to make sure that jQuery can find the element you asked it for,
your browser needs to have loaded it (the DOM needs to be ready)
Q. How can I be sure my code runs at DOM ready?
A. Wrap all your jQuery code with the document ready function:
$(document).ready(function(){
// insert jQuery code here…
});
• Shorthand:
$(function(){
// your jQuery code
});
13
jQuery Syntax
• Tailor made for selecting HTML elements and performing
some action on the element(s)
• With jQuery you select (query) HTML elements and perform "actions" on
them.
• $(selector).action()
• $ sign to define/access jQuery
• (selector) to "query (or find)" HTML elements
• jQuery action() to be performed on the element(s)
14
Lets See an Example!!
Html:
<p>Hello World!</p>
Script:
$(function(){
$("p").addClass("isCool");
});
Resulting html:
<p class="isCool">Hello World!</p>
15
Break It Down Now!
$(function(){// = $(document).ready(function(){
.addClass("isCool
$ ("p")
");
Grabs a DOM element Built in method that adds a
Initiates using a CSS selector. class to the jQuery
the jQuery Collection
function
Selector is in quotes.
Class is in quotes.
Creates a jQuery
$ “Collection”
=
jQuery <p> ends with a semicolon.
16
All Your Basic Selectors Are Belong To Us
• Uses the same syntax you use to style elements in CSS!
$("p") $("div") $("#foo") $(".foo")
id="foo class="
<p> <div>
" foo"
api.jquery.com/category/selectors/
17
Example: Add Class
• jQuery:
$("p").addClass("sophisticated");
• Before:
<p>
• After:
<p class="sophisticated">
18
This <p> Has No Class At All!
• jQuery:
$("p").removeClass("sophisticated");
• Before:
<p class="sophisticated">
• After:
<p class="">
19
<div> Hide and Seek
• jQuery:
$("div").show();
• Before:
<div style="display:none;">
• After:
<div style="display:block;">
20
I’m Not Lame, Am I?
• jQuery:
$("#eric").text("Is Cool");
• Before:
<p id="eric">Is Lame</p>
• After:
<p id="eric">Is Cool</p>
21
JQuery Selectors…
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with
class="test".
• $("#test").hide() -hides the element with
id="test".
Examples
22
You Can Chain Most Methods Together
$("p")
.addClass("sophisticated").text("Hello World!").show();
Before:
<p style="display:none;">I’m a para</p>
After:
<p class=“sophisticated”
style="display:block;">
Hello World!
</p>
23
Some of Basic Methods
.show() • Show a hidden element
.wrap("<a></a>") • wrap an element with <a>
.parent("p") • Select parent <p>
.html() • Get/Set innerHTML
.val() • Get/Set Value
api.jquery.com/
24
Getters & Setters: Dual Purpose Methods
$("#foo").text();
$("#foo").text("foo");
25
Use jQuery To Get
<p>Eric</p>
$("p").text(); • Output: "Eric"
myVar = $ • Output:
("p").text(); myVar === "Eric"
26
Use jQuery To Set
<p>Eric</p>
$
("p").text("BoBeric") • <p>BoBeric</p>
;
myVar = "BoBeric";
$("p").text(myVar); • <p>BoBeric</p>
27
Basic Selectors
28
Activity
Use the correct selector to hide the element with id="test".
29
Activity
Use the correct selector to hide all elements with class="test".
30
Activity
Use the correct selector to hide all elements in the document.
31
Hierarchical Selectors
33
More Functions
34
Outline
• jQuery
• Downloading and Implementing JQuery
• JQuery Selectors
• JQuery Chain Methods
• JQuery Events
• JQuery Effects
• CSS Implementation
• Callback
• Image Slider
• Traversing
35
jQuery Event
• jQuery is tailor-made to respond to events in an HTML page.
• All the different visitor's actions that a web page can respond to are
called events.
• An event represents the precise moment when something happens
• moving a mouse over an element
• selecting a radio button
• clicking on an element
• The term "fires" is often used with events.
• Example: "The keypress event fires the moment you press a
key".
36
jQuery Event Examples
37
Event Handlers
• Syntax
• $("selector").event( someHandler );
• Example
$("p").click(function(){
alert(“Don’t click me!!”);
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
38
Two Ways to Handle Event
$(function() {
$("#alert-button-1").click(showAlert);
});
function showAlert() {
alert("I am live");
}
$(function(){
$("#alert-button-1").click(function() {
alert("I am live");
});
});
39
jQuery Event Examples
• click() // $("p").click(function(){
• dblclick() // $("p").dblclick(function(){
• mouseenter() // $("#p1").mouseenter(function(){
• mouseleave() // $("#p1").mouseleave(function(){
• hover()
/* $("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
}); */
• focus() // $("input").focus(function(){
• on() // $("p").on("click", function(){
• Multiple events
40
Activity
• When we press a keyboard key inside text field element, it
should be hidden. Use the correct event to do so.
41
Outline
• jQuery
• Downloading and Implementing JQuery
• JQuery Selectors
• JQuery Chain Methods
• JQuery Events
• JQuery Effects
• HTML/CSS Implementation
• Callback
• Image Slider
• Traversing
42
jQuery Effects
jQuery has many effects, i.e. Hide, Show, Toggle, Slide,
Fade, and Animate.
Example (How to hide parts of text)
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
• speed= “slow", "fast", or milliseconds
• callback= run after the hide and show executed
• Toggle Example with speed
43
Effect: jQuery Fade
• jQuery has following fade effects, i.e. fadeIn(), fadeOut(),
fadeToggle(), fadeTo().
• Syntax:
$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
• Example
44
Effect: jQuery Sliding
• jQuery has following sliding effects, i.e. slideDown(),
slideUp(), slideToggle()
• Syntax:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
• Example
• https://
www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
45
Effect: jQuery Animate
Syntax:
$(selector).animate({params},speed,callback);
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
});
Example of animate
46
jQuery Stop Effects
Syntax
$(selector).stop(stopAll, goToEnd)
• Example Stop (), Stop with Params
• Other important effects Links
• Chaining Method
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
}
48
Outline
• jQuery
• Downloading and Implementing JQuery
• JQuery Selectors
• JQuery Chain Methods
• JQuery Events
• JQuery Effects
• Callback
• HTML/CSS Implementation
• Traversing
• Image Slider (jQuery Image Slider - Quick & Easy)
49
jQuery HTML: Get Content and Attributes
• Get Content - text(), html(), and val()
• text() - Sets or returns the text content of selected elements
• html() - Sets or returns the content of selected elements (including HTML
markup)
• val() - Sets or returns the value of form fields
• Example
• Get/Set Attributes - attr()
• Used to get/set the attribute values of an element
• Get Example
• Set Example
// Get $("#linkTag").attr("href");
// Set $("#linkTag").attr("href", "https://www.nust.edu/seecs.php");
50
jQuery HTML: Add/Remove Elements
With jQuery, it is easy to add/remove new elements /content.
Add Elements
• append() - Inserts content at the end of the selected elements
• prepend() - Inserts content at the beginning of the selected
elements
• after() - Inserts content after the selected elements
• before() - Inserts content before the selected elements
Remove Elements
• remove() - Removes the selected element (and its child elements)
• empty() - Removes the child elements from the selected element
51
jQuery - Get and Set CSS Classes
jQuery has several methods for CSS manipulation. We will look at the
following methods:
• addClass() - Adds one or more classes to the selected
elements
• removeClass() - Removes one or more classes from the selected
elements
• toggleClass() - Toggles between adding/removing classes from
the selected elements
• css() - The css() method sets or returns one or more
style properties for the selected elements.
// css("propertyname");
// css("propertyname“, “value”);
• set multiple css properties
52
Activity: Generate the Output
<body> // CSS Code
<section id=“days">
.highlighted {
<div class=“day"> background-color: #f00;
<p>“Monday"</p> }
</div>
<div class=" day highlighted">
//jQuery
<p>“Tuesday"</p>
</div> $(document).ready(function(){
<div class="day">
<p>“Wednesday"</p> $('#days').on('click', '.day', function() {
</div> $(this).toggleClass('highlighted');
});
<div class="day">
<p>“Thursday"</p> });
</div>
</section>
</body>
53
Activity: Generate the Output
<body> // CSS Code
<section id=“days">
.highlighted {
<div class=“day"> background-color: #f00;
<p>“Monday"</p> }
</div>
<div class=" day highlighted">
//jQuery
<p>“Tuesday"</p>
</div> $(document).ready(function(){
<div class="day">
<p>“Wednesday"</p> $('#days').on('click', '.day', function() {
</div> $(this).toggleClass('highlighted');
});
<div class="day">
<p>“Thursday"</p> });
</div>
</section>
</body>
54
Example HTML Page
<head>
<link rel="stylesheet" type="text/css" href="c10.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="page">
<h1 id="header"></h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
</body>
55
Example HTML Page
<div id="page">
<h1 id="header"></h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
56
Get HTML Fragment
$(function() {
var $listHTML = $('ul').html();
$('ul').append($listHTML);
});
57
Get Text Fragment
$(function() {
var $listText = $('ul').text();
$('ul').append('<p>'+$listText+'</p>');
});
58
Get HTML Node
$(function() {
var $listItemHTML=$('li').html();
$('li').append(
'<i>'+$listItemHTML+'</i>');
});
If we want to access the 2nd list item?
var $listItemHTML=$('li:nth-child(2)').html();
59
Example HTML Page Again
<head>
<link rel="stylesheet" type="text/css" href="c07.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="page">
<h1 id="header"></h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
</body>
60
Changing Content
$(function() {
$('li#one').remove();
$
('li:contains("pine")').text('almonds');
$('li.hot').html(function() {
return '<em>' + $(this).text() +
'</em>'; });
});
61
Adding New Content
$(function() {
$('ul').before(
'<p class="notice">Just updated</p>');
$('li.hot').prepend('+ ');
var $newListItem =
$('<li><em>gluten-free</em>
soy sauce</li>');
$('li:last').after($newListItem);
});
62
Changing CSS
$(function() {
var backgroundColor =
$('li').css('background-color');
$('ul').append(
'<p>Color was: ' + backgroundColor + '</p>');
$('li').css({
'background-color': '#c5a996',
'border': '1px solid #fff',
'color': '#000',
'text-shadow': 'none',
'font-family': 'Georgia',
'padding-left': '+=75'
});
});
64
Basic Effects
$(function() {
var $li = $('li');
$li.hide().each(function(index) {
$(this).delay(700*index)
.fadeIn(700);
});
$li.on('click', function() {
$(this).fadeOut(700);
});
});
65
Traversing
$(function() {
var $h2 = $('h2');
$('ul').hide();
$h2.append(
'<a class="show">show</a>');
$h2.on('click', function() {
$h2.next('ul').fadeIn(500)
.children('.hot')
.addClass('complete');
$h2.find('a').fadeOut();
});
});
66
Traversing CSS
.complete {
background-color: #999;
background-image: url("icon-trash.png");
background-position: right center;
background-repeat: no-repeat;
border-bottom: 1px solid #b0b0b0;
border-top: 1px solid #666;
color: #fff;
text-shadow: 2px 2px 1px #333;
}
69
Outline
• jQuery
• Downloading and Implementing JQuery
• JQuery Selectors
• JQuery Chain Methods
• JQuery Events
• JQuery Effects
• Callback
• HTML/CSS Implementation
• Traversing
• Image Slider (jQuery Image Slider - Quick & Easy)
• Drag and drop Links
70
Further Reading
• http://api.jquery.com
• http://docs.jquery.com
• http://www.w3schools.com/jquery/default.asp
