jQuery JS library jQuery JS libraryjQuery JS library

Introduction to jQuery
Giuseppe Attardi
Giuseppe Attardi
Università di Pisa
Università di Pisa
Some slides from: BreadFish

JavaScript
JavaScript
A script language interpreted by
A script language interpreted by
browser
browser
OOP (prototype based, not class
OOP (prototype based, not class
based)
based)
Dynamic typing
Dynamic typing
Run-time evaluation
Run-time evaluation

JavaScript
JavaScript
 Cannot access host computer (except
Cannot access host computer (except
cookie)
cookie)
 Same origin policy
Same origin policy
 Non-persistence
Non-persistence
 Cannot access history object
Cannot access history object
 Cannot write the value of file upload field
Cannot write the value of file upload field

JavaScript Libraries
JavaScript Libraries
jQuery
jQuery
Mootools
Mootools
Prototype
Prototype
YUI
YUI

 Developed in 2006 by
Developed in 2006 by John Resig at Rochester
Institute of Technology
 jQuery is a lightweight
jQuery is a lightweight JavaScript library that
emphasizes interaction between JavaScript and
HTML
 jQuery is
jQuery is free, open source software Dual-licensed
under the MIT License and the
GNU General Public License
 Helps web developers to create simple pieces of
Helps web developers to create simple pieces of
interaction without being forced to write long,
interaction without being forced to write long,
complex, book-length pieces of code
complex, book-length pieces of code

 Why do I want it
Why do I want it
 Rich Internet Applications (RIA)
 Dynamic HTML (DHTML)
 How do I get it
How do I get it
 www.jquery.com
 How can I learn it
How can I learn it
 jQuery in Action by Bibeault & Katz, Manning
 jQuery Visual Quickstart Guide by Holzner, Peachpit
 www.jquery.com
 docs.jquery.com
 www.visualjquery.com
 www.Jqueryfordesigners.com
 www.gscottolson.com/weblog/ - cheat sheet
 www.javascripttoolbox.com/jquery
 http://www.w3schools.com/jquery/jquery_examples.asp

Summary
Summary
 Introduction, installation, “Howdy World”,
Introduction, installation, “Howdy World”,
Ready function, DOM, Selecting and
Ready function, DOM, Selecting and
Formatting web page elements
Formatting web page elements
 Events and Animations
Events and Animations
 jQuery Plugin libraries
jQuery Plugin libraries
 AJAX
AJAX

 Installation
Installation
 just download the jquery-2.x.x.js file and put it in
your website folder
 Using jQuery
Using jQuery
 Visual Web Developer Express Edition
 Expression Web

What jQuery Does
What jQuery Does
 “
“Unobtrusive” JavaScript
Unobtrusive” JavaScript
 separation of behavior from structure
 CSS
CSS
 separation of style from structure
 Allows adding JavaScript to your web pages
Allows adding JavaScript to your web pages
 Advantages over
Advantages over just
just JavaScript
JavaScript
 Much easier to use
 Eliminates cross-browser problems

5 Things jQuery Provides
5 Things jQuery Provides
 Select DOM (Document Object Model)
Select DOM (Document Object Model)
elements on a page – one element or a group
elements on a page – one element or a group
of them
of them
 Set properties of DOM elements, in groups
Set properties of DOM elements, in groups
(“Find something, do something with it”)
(“Find something, do something with it”)
 Creates, deletes, shows, hides DOM
Creates, deletes, shows, hides DOM
elements
elements
 Defines event behavior on a page (click,
Defines event behavior on a page (click,
mouse movement, dynamic styles,
mouse movement, dynamic styles,
animations, dynamic content)
animations, dynamic content)
 AJAX calls
AJAX calls

The DOM
The DOM
 Document Object Model
Document Object Model
 jQuery is “DOM scripting”
jQuery is “DOM scripting”
 Heirarchal structure of a web page
Heirarchal structure of a web page
 You can add and subtract DOM elements on
You can add and subtract DOM elements on
the fly
the fly
 You can change the properties and contents
You can change the properties and contents
of DOM elements on the fly
of DOM elements on the fly

The DOM
The DOM
“
“a
a cross-platform and language-independent convention for
representing and interacting with objects in HTML, XHTML and XML
documents. Aspects of the DOM (such as its "Elements") may be
addressed and manipulated within the syntax of the programming
language in use.” Wikipedia

The jQuery Function
The jQuery Function
 jQuery() = $()
jQuery() = $()
 $(function)
$(function) The “Ready” handler
The “Ready” handler
 $(‘selector’)
$(‘selector’) Element selector expression
Element selector expression
 $(element)
$(element) Specify element(s) directly
Specify element(s) directly
 $(‘HTML’)
$(‘HTML’) HTML creation
HTML creation
 $.function()
$.function() Execute a jQuery function
Execute a jQuery function
 $.fn.myfunc(){}
$.fn.myfunc(){} Create jQuery function
Create jQuery function

The Ready Function
The Ready Function
 Set up a basic HTML page and add jQuery
Set up a basic HTML page and add jQuery
 Create a “ready” function
Create a “ready” function
 Call a function
Call a function
 5 ways to specify the ready function
5 ways to specify the ready function
 jquery(document).ready(function(){…};);
 jquery().ready(function(){…};)
 jquery(function(){…};)
 jquery(dofunc);
 $(dofunc);

Selecting Elements - Creating a “wrapped set”
Selecting Elements - Creating a “wrapped set”
 $(selector)
$(selector)
 selector:
selector:
 $(‘#id’) id of element
 $(‘p’) tag name
 $(‘.class’) CSS class
 $(‘p.class’) <p> elements having the CSS class
 $(‘p:first’) $(‘p:last’) $(‘p:odd’) $(‘p:even’)
 $(‘p:eq(2)’) gets the 2nd
<p> element (1 based)
 $(‘p’)[1] gets the 2nd
<p> element (0 based)
 $(‘p:nth-child(3)) gets the 3rd
<p> element of its parent.
 $(‘p:nth-child(odd)) gets the odd <p> element of its parent.
 $(‘p:nth-child(5n+1)’) gets the 1st
element after every 5th one
 $(‘p a’) <a> elements, descended from a <p>
 $(‘p>a’) <a> elements, direct child of a <p>
 $(‘p+a’) <a> elements, directly following a <p>
 $(‘p, a’) <p> and <a> elements
 $(‘li:has(ul)’) <li> elements that have at least one <ul> descendent
 $(‘:not(p)’) all elements but <p> elements
 $(‘p:hidden’) only <p> elements that are hidden
 $(‘p:empty’) <p> elements that have no child elements

Selectors Live
Selectors Live
 https://www.tutorialspoint.com/jquery/jquery-s
electors.htm

Selecting Elements, cont.
Selecting Elements, cont.
$(‘img’[alt])
$(‘img’[alt]) <img> elements having an alt attribute
<img> elements having an alt attribute
$(‘a’[href^=http://])
$(‘a’[href^=http://]) <a> elements with an href attribute
<a> elements with an href attribute
starting with ‘http://’
starting with ‘http://’
$(‘a’[href$=.pdf])
$(‘a’[href$=.pdf]) <a> elements with an href attribute
ending with ‘.pdf’
ending with ‘.pdf’
$(‘a’[href*=ntpcug])
$(‘a’[href*=ntpcug]) <a> elements with an href attribute
containing ‘ntpcug’
containing ‘ntpcug’

Useful jQuery Functions
Useful jQuery Functions
.each()
.each() iterate over the set
iterate over the set
.size()
.size() number of elements in set
number of elements in set
.end()
.end() reverts to the previous set
reverts to the previous set
.get(n)
.get(n) get just the nth element (0 based)
get just the nth element (0 based)
.eq(n)
.eq(n) get just the nth element (0 based) also .lt(n) & .gt(n)
get just the nth element (0 based) also .lt(n) & .gt(n)
.slice(n,m)
.slice(n,m) gets only nth to (m-1)th elements
gets only nth to (m-1)th elements
.not(‘p’)
.not(‘p’) don’t include ‘p’ elements in set
don’t include ‘p’ elements in set
.add(‘p’)
.add(‘p’) add <p> elements to set
add <p> elements to set
.remove()
.remove() removes all the elements from the page DOM
removes all the elements from the page DOM
.empty()
.empty() removes the contents of all the elements
removes the contents of all the elements
.filter(fn/sel)
.filter(fn/sel) selects elements where the func returns true or sel
selects elements where the func returns true or sel
.find(selector)
.find(selector) selects elements meeting the selector criteria
selects elements meeting the selector criteria
.parent()
.parent() returns the parent of each element in set
returns the parent of each element in set
.children()
.children() returns all the children of each element in set
returns all the children of each element in set
.next()
.next() gets next element of each element in set
gets next element of each element in set
.prev()
.prev() gets previous element of each element in set
gets previous element of each element in set
.siblings()
.siblings() gets all the siblings of the current element
gets all the siblings of the current element
https://www.tutorialspoint.com/jquery/jquery-utilities.htm

Formatting Elements
Formatting Elements
 .css(property, value)
.css(property, value)
https://www.tutorialspoint.com/jquery/jquery-css.ht
m
 .html()
.html()
https://www.tutorialspoint.com/jquery/jquery-dom.
htm
 .val()
.val() (form elements)
(form elements)
 .text()
.text()
 .addClass(‘class’)
.addClass(‘class’)
 .removeClass(‘class’)
.removeClass(‘class’)

Add Page Elements
Add Page Elements
 $(‘#target’).before(‘<p>Inserted before #target</p>’);
$(‘#target’).before(‘<p>Inserted before #target</p>’);
 $(‘#target’).after(‘<p>This is added after #target</p>’);
$(‘#target’).after(‘<p>This is added after #target</p>’);
 $(‘#target’).append(‘<p>Goes inside #target, at end</p>’);
$(‘#target’).append(‘<p>Goes inside #target, at end</p>’);
 $(‘#target’).wrap(‘<div></div>’);
$(‘#target’).wrap(‘<div></div>’);

Adding Events
Adding Events
 Mouseover events – bind, hover, toggle
Mouseover events – bind, hover, toggle
 Button click events
Button click events
 Keystrokes
Keystrokes

Event Background
Event Background
 DOM Level 2 Event Model
DOM Level 2 Event Model
 Multiple event handlers, or listeners, can be
established on an element
 These handlers cannot be relied upon to run an
any particular order
 When triggered, the event propagates from the top
down (capture phase) or bottom up (bubble
phase)
 IE doesn’t support the “capture phase”

Basic Syntax of Event Binding
Basic Syntax of Event Binding
 $(‘img’).bind(‘click’, function(event){alert(‘Howdy’;});
$(‘img’).bind(‘click’, function(event){alert(‘Howdy’;});
 $(‘img’).bind(‘click’, imgclick(event));
$(‘img’).bind(‘click’, imgclick(event));
 Allows unbinding the function
 $(‘img’).unbind(‘click’, imgclick());
$(‘img’).unbind(‘click’, imgclick());
 $(‘img’).unbind(‘click’);
$(‘img’).unbind(‘click’);
 $(‘img’).one(‘click’, imgclick(event));
$(‘img’).one(‘click’, imgclick(event));
 Only works once
 $(‘img’).click(imgclick);
$(‘img’).click(imgclick);
 $(‘img’).toggle(click1, click2);
$(‘img’).toggle(click1, click2);
 $(‘img’).hover(mouseover, mouseout);
$(‘img’).hover(mouseover, mouseout);
 https://www.tutorialspoint.com/jquery/jquery-events.ht
m

Element Properties – “this”
Element Properties – “this”
 this
this
 this.id
this.id
 this.tagName
this.tagName
 this.attr
this.attr
 this.src
this.src
 this.classname
this.classname
 this.title
this.title
 this.alt
this.alt
 this.value
this.value (for form elements)
(for form elements)

‘
‘Event’ properties
Event’ properties
 event.target
event.target ref to element triggering
ref to element triggering
event
event
 Event.target.id
Event.target.id id of element triggering
id of element triggering
event
event
 event.currentTarget
event.currentTarget
 event.type
event.type type of event triggered
type of event triggered
 event.data
event.data second parm in the bind() func
second parm in the bind() func
 Various mouse coordinate properties
Various mouse coordinate properties
 Various keystroke related properties
Various keystroke related properties

Event Methods
Event Methods
.stopPropagation()
.stopPropagation() no bubbling
no bubbling
.preventDefault()
.preventDefault() no <a> link, no <form> submit
no <a> link, no <form> submit
.trigger(eventType)
.trigger(eventType) does not actually trigger the event,
does not actually trigger the event,
but calls the appropriate function
but calls the appropriate function
specified as the one tied to the
specified as the one tied to the
eventType
eventType
.click(), blur(), focus(), select(), submit()
.click(), blur(), focus(), select(), submit()
With no parameter, invokes the event handlers, like trigger
does, for all the elements in the wrapped set

Shortcut Event Binding
Shortcut Event Binding
 .click(func)
.click(func)
 .submit(func)
.submit(func)
 .dblclick(func)
.dblclick(func)
 .mouseover(func)
.mouseover(func)
 .mouseout(func)
.mouseout(func)
 .select(func)
.select(func)

Useful Event Functions
Useful Event Functions
.hide()
.hide() display:none
display:none
.show()
.show() display:true
display:true
.toggle(func1, func2)
.toggle(func1, func2) first click calls func1, next click
first click calls func1, next click
executes func2
executes func2
.hover(over, out)
.hover(over, out) mouseover, mouseout
mouseover, mouseout
https://www.tutorialspoint.com/jquery/jquery-effects.htm

Examples of Events
Examples of Events
 Toggle.html
Toggle.html Opacity of picture
Opacity of picture
 Hover1.html
Hover1.html Hover using .bind
Hover using .bind
 Events.html
Events.html Expanding a DIV
Expanding a DIV
 TableStripes.html
TableStripes.html Table highlighting
Table highlighting
 Collapsible.list.html
Collapsible.list.html Expandable List
Expandable List
 Custom.effects.html
Custom.effects.html Animations
Animations

Other examples
Other examples
 Table stripes
Table stripes
 Animations
Animations
 Expanding Lists
Expanding Lists
 ASP.NET Gridview
ASP.NET Gridview

Extending jQuery
Extending jQuery
 Creating a jQuery function
Creating a jQuery function
 https://www.tutorialspoint.com/jquery/jquery-p
lugins.htm

jQuery Plugins (UI Library)
jQuery Plugins (UI Library)
 Tab example
Tab example
 Slider example
Slider example
https://www.tutorialspoint.com/jquery/jquery-slideb
ar.htm
 Carousel example
Carousel example
https://www.tutorialspoint.com/jquery/jquery-slides
how.htm
 Photomatic example
Photomatic example
http://www.isquery.com/devel/jqueryinaction/secon
d/chapter7/photomatic/photomatic.html

Widgets
Widgets
 Accordion
 Enable to collapse the content, that is broken into
logical sections.
 Autocomplete
 Enable to provides the suggestions while you type into
the field.
 Datepicker
 It is to open an interactive calendar in a small overlay.
 Progressbar
 It shows the progress information.
 Tabs
 It is used to swap between content that is broken into
logical sections.

jQuery Core
jQuery Core
 jQuery(selector, [ context ])
jQuery(selector, [ context ]): Accepts a
: Accepts a
string containing a CSS selector which is then
string containing a CSS selector which is then
used to match a set of elements and returns a
used to match a set of elements and returns a
jQuery object.
jQuery object.
 jQuery(element)
 jQuery(elementArray)
 jQuery(jQuery object)
 jQuery()
 can be written as $()
can be written as $()

jQuery Events
jQuery Events
 .ready(handler) : execute handler when the DOM is fully
.ready(handler) : execute handler when the DOM is fully
loaded.
loaded.
js
function printhello(){
$(“#hello”).html(“Hello, jQuery!”);
}
$(document).ready(printhello());
 Same as window.onload???
js
$(document).ready(function(){
$(“#hello”).html(“Hello, jQuery!”);
});

jQuery Events
jQuery Events
 .bind()
.bind()
 .blur()
.blur()
 .change()
.change()
 .click()
.click()
 .focus()
.focus()
 .hover()
.hover()
 .select()
.select()
 .toggle()
.toggle()
 .trigger()
.trigger()
 .submit()
.submit()
 .mousedown()
.mousedown()
 .mouseenter()
.mouseenter()
 .mouseleave()
.mouseleave()
 .keypress()
.keypress()
 .keyup()
.keyup()

jQuery Events
jQuery Events
$(document).keyup(function(event) {
$(document).keyup(function(event) {
switch(event.which) {
switch(event.which) {
case 32:
case 32:
alert(“32 pressed”);
alert(“32 pressed”);
break;
break;
}
}
});
});
 event.preventDefault()
 event.stopPropagation()

jQuery Selectors
jQuery Selectors
 follows CSS1~3 Selectors
follows CSS1~3 Selectors
http://www.w3.org/TR/css3-selectors
http://www.w3.org/TR/css3-selectors
 :animated
:animated
 :has()
:has()
 :gt()
:gt()

jQuery Attributes
jQuery Attributes
 .addClass()
.addClass()
 .removeClass()
.removeClass()
 .hasClass()
.hasClass()
 .toggleClass()
.toggleClass()
 .attr()
.attr()
 .removeattr()
.removeattr()
 .val()
.val()
 .html()
.html()

jQuery Each
jQuery Each
 .each() : Iterate over a jQuery object, executing a function for
.each() : Iterate over a jQuery object, executing a function for
each matched element.
each matched element.
html
<ul>
<li>garbage</li>
<li>food</li>
<li>abroad</li>
</ul>
js
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
});

jQuery Traversing
jQuery Traversing
 .add()
.add()
 .children()
.children()
 .contents()
.contents()
 .filter()
.filter()
 .find()
.find()
 .next()
.next()
 .not()
.not()
 .prev()
.prev()

jQuery Manipulations
jQuery Manipulations
 .append()
.append()
 .appendTo()
.appendTo()
 .clone()
.clone()
 .detach()
.detach()
 .insertAfter()
.insertAfter()
 .insertBefore()
.insertBefore()
 .remove()
.remove()

jQuery CSS
jQuery CSS
 .css()
.css()
 .height()
.height()
 .width()
.width()
 .position()
.position()
 .offset()
.offset()
 .scrollTop()
.scrollTop()
 .scrollLeft()
.scrollLeft()

jQuery Effect
jQuery Effect
 .animate()
.animate()
html
<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>
js
$(".block").css({
'position': 'absolute',
'backgroundColor': "#abc",
'left': '100px',
'width': '90px',
'height': '90px',
'margin': '5px' });
$("#left").click(function(){
$(".block").animate({left: "-=50px"}, "slow");
});
$("#right").click(function(){
$(".block").animate({left: "+=50px"}, "slow");
});
});

jQuery Effect
jQuery Effect
 .fadeIn()
.fadeIn()
 .hide()
.hide()
 .show()
.show()
 .toggle()
.toggle()

AJAX
AJAX
 Asynchronous JavaScript And XML
Asynchronous JavaScript And XML
 The basic AJAX function – XMLHttpRequest
The basic AJAX function – XMLHttpRequest
 Initiating a request
Initiating a request
 Getting the response
Getting the response

jQuery AJAX
jQuery AJAX
 jQuery.get(url, [data], [callback(data, textStatus,
jQuery.get(url, [data], [callback(data, textStatus,
XMLHttpRequest)], [dataType])
XMLHttpRequest)], [dataType])
Returns:
Returns: XMLHttpRequest
XMLHttpRequest
 jQuery.post()
jQuery.post()
 jQuery.getJSON()
jQuery.getJSON()
 jQuery.load()
jQuery.load()
 jQuery.getScript()
jQuery.getScript()

AJAX Example
AJAX Example
jQuery
HTML
server
username
Does ‘username’ exist?
yes/no
check…
print

jQuery AJAX
jQuery AJAX
html
<div id="user_check">
<input id="username" type="text"></input>
<input id="username_submit" type="button"
value="submit"></input>
<p id="check_result"></p>
</div>
js
$("#username_submit").click(function(){
$.get('jqtest.cgi', {"username" : $("#username").val()},
function(data){
$('#check_result').html(data);
});
});
});
#! /usr/bin/python
import cgi
import os
form = cgi.FieldStorage()
print "Content-Type: text/htmlnn“
name = form.getvalue('username', '1')
if os.path.exists("/home/“ + name + "/"):
print "exists"
else:
print "not exists"
CGI

JSONP
JSONP
 Avoids limitation of same origin requests
Avoids limitation of same origin requests
 Trick: <script> elements are not constrained
Trick: <script> elements are not constrained
 Use <script> to retrieve JavaScript code that
Use <script> to retrieve JavaScript code that
operates on dynamically generated JSON-
operates on dynamically generated JSON-
formatted data from other origins
formatted data from other origins

JSONP Mechanism
JSONP Mechanism
Suppose a request to
Suppose a request to http://server/User?Id=1234
http://server/User?Id=1234
returns
returns
{"Name": “Pippo", "Id" : 1234, "Rank": 7}
{"Name": “Pippo", "Id" : 1234, "Rank": 7}
Add parameter to request
Add parameter to request
<script type="text/javascript"
<script type="text/javascript"
src="http://server/User?
src="http://server/User?
UserId=1234&jsonp=parseResponse
UserId=1234&jsonp=parseResponse"> </script>
"> </script>
So that the answer becomes:
So that the answer becomes:
parseResponse({"Name": "Foo", "Id" : 1234,
parseResponse({"Name": "Foo", "Id" : 1234,
"Rank": 7})
"Rank": 7})

JSONP Example
JSONP Example
jQuery.getJSON("http://search.twitter.com/search.json?
jQuery.getJSON("http://search.twitter.com/search.json?
callback=?",
callback=?",
{ q: "Arsenal“ },
{ q: "Arsenal“ },
function(tweets) {
function(tweets) {
// Handle response here
// Handle response here
console.info("Twitter returned: ", tweets);
console.info("Twitter returned: ", tweets);
});
});

CORS
CORS
 Cross-Origin Resource Sharing
Cross-Origin Resource Sharing
 W3C specification
W3C specification
 Allows cross-domain communication from the
Allows cross-domain communication from the
browser
browser
 Uses XMLHttpRequest
Uses XMLHttpRequest
 Supported by some browsers
Supported by some browsers

CORS Example
CORS Example
// Create the XHR object.
// Create the XHR object.
function createCORSRequest(method, url) {
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
if ("withCredentials" in xhr) {
// XHR for Chrome/Safari/Firefox.
// XHR for Chrome/Safari/Firefox.
xhr.open(method, url, true);
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr = new XDomainRequest();
xhr.open(method, url);
xhr.open(method, url);
} else // CORS not supported.
} else // CORS not supported.
xhr = null;
xhr = null;
return xhr; }
return xhr; }

Embedding a Map
Embedding a Map
<iframe width="425" height="350" frameborder="0"
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.com/maps?
src="http://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&
f=q&source=s_q&hl=en&geocode=&
amp;q=largo+pontecorvo+3,+pisa,
amp;q=largo+pontecorvo+3,+pisa,
+italy&aq=&sll=37.0625,-
+italy&aq=&sll=37.0625,-
95.677068&sspn=33.901528,36.474609&
95.677068&sspn=33.901528,36.474609&
vpsrc=0&ie=UTF8&hq=&hnear=Via+
vpsrc=0&ie=UTF8&hq=&hnear=Via+
Pellegrino+Pontecorvo,+3,+56121+Pisa,+Toscana,
Pellegrino+Pontecorvo,+3,+56121+Pisa,+Toscana,
+Italy&t=m&z=14&ll=43.682725,10.4
+Italy&t=m&z=14&ll=43.682725,10.4
28894&output=embed">
28894&output=embed">
</iframe>
</iframe>
https://www.tutorialspoint.com/jquery/src/
https://www.tutorialspoint.com/jquery/src/
whatsnearby/index.htm
whatsnearby/index.htm

jQuery JS library jQuery JS libraryjQuery JS library

More Related Content

Similar to jQuery JS library jQuery JS libraryjQuery JS library

Recently uploaded

jQuery JS library jQuery JS libraryjQuery JS library