Introduction to jQuery Introduction to jQuery

(1)

Introduction to jQuery Introduction to jQuery

Giuseppe Attardi Giuseppe Attardi Università di Pisa Università di Pisa

Some slides from: BreadFish

(2)

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

(3)

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

(4)

JavaScript Libraries JavaScript Libraries

 jQuery jQuery

 Mootools Mootools

 Prototype Prototype

 YUI YUI

(5)

Introduction to jQuery Introduction to jQuery

 Developed in 2006 by John ResigDeveloped in 2006 by John Resig at Rochester at Rochester Institute of Technology

Institute of Technology

 jQuery is a lightweight JavaScript libraryjQuery is a lightweight JavaScript library that that emphasizes interaction between

emphasizes interaction between JavaScriptJavaScript and and HTMLHTML

 jQuery is free, open source softwarejQuery is free, open source software Dual-licensedDual-licensed under the

under the MIT LicenseMIT License and the and the GNU General Public License 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

(6)

Introduction to jQuery Introduction to jQuery

 Why do I want itWhy do I want it

 Rich Internet Applications (RIA)

 Dynamic HTML (DHTML)

 How do I get itHow do I get it

 www.jquery.com

 How can I learn itHow 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

(7)

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

(8)

Introduction to jQuery Introduction to jQuery



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

(9)

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

(10)

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

(11)

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

(12)

The DOM The DOM

““a cross-platforma cross-platform and language and language-independent convention for -independent convention for representing and interacting with

representing and interacting with objectsobjects in HTML in HTML, XHTML, XHTML and XML and XML documents. Aspects of the DOM (such as its "Elements") may be documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming addressed and manipulated within the syntax of the programming language in use.” Wikipedia

language in use.” Wikipedia

(13)

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

(14)

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);

(15)

Selecting Elements - Creating 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 2^nd <p> element (1 based)

 $(‘p’)[1] gets the 2^nd <p> element (0 based)

 $(‘p:nth-child(3)) gets the 3^rd <p> element of its parent.

 $(‘p:nth-child(odd)) gets the odd <p> element of its parent.

 $(‘p:nth-child(5n+1)’) gets the 1^st 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

(16)

Selectors Live Selectors Live



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

electors.htm

(17)

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 <a> elements with an href attribute ending with ‘.pdf’

ending with ‘.pdf’

$(‘a’[href*=ntpcug])

$(‘a’[href*=ntpcug]) <a> elements with an href attribute <a> elements with an href attribute containing ‘ntpcug’

containing ‘ntpcug’

(18)

Useful jQuery Functions Useful jQuery Functions

.each()

.each() iterate over the setiterate over the set .size()

.size() number of elements in setnumber of elements in set .end()

.end() reverts to the previous setreverts 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 elementsgets only nth to (m-1)th elements .not(‘p’)

.not(‘p’) don’t include ‘p’ elements in setdon’t include ‘p’ elements in set .add(‘p’)

.add(‘p’) add <p> elements to setadd <p> elements to set .remove()

.remove() removes all the elements from the page DOMremoves all the elements from the page DOM .empty()

.empty() removes the contents of all the elementsremoves the contents of all the elements .filter(fn/sel)

.filter(fn/sel) selects elements where the func returns true or selselects elements where the func returns true or sel .find(selector)

.find(selector) selects elements meeting the selector criteriaselects elements meeting the selector criteria .parent()

.parent() returns the parent of each element in setreturns the parent of each element in set .children()

.children() returns all the children of each element in setreturns all the children of each element in set .next()

.next() gets next element of each element in setgets next element of each element in set .prev()

.prev() gets previous element of each element in setgets previous element of each element in set .siblings()

.siblings() gets all the siblings of the current elementgets all the siblings of the current element https://www.tutorialspoint.com/jquery/jquery-utilities.htm https://www.tutorialspoint.com/jquery/jquery-utilities.htm

(19)

Formatting Elements Formatting Elements



.css(property, value) .css(property, value)

 https://www.tutorialspoint.com/jquery/jquery-css.h tm



.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’)

(20)

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>’);

(21)

Adding Events Adding Events



Mouseover events – bind, hover, toggle Mouseover events – bind, hover, toggle



Button click events Button click events



Keystrokes Keystrokes

(22)

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”

(23)

Basic Syntax of Event Basic Syntax of Event

Binding 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.hhttps://www.tutorialspoint.com/jquery/jquery-events.h tmtm

(24)

Element Properties – “this”

 thisthis

 this.idthis.id

 this.tagNamethis.tagName

 this.attrthis.attr

 this.srcthis.src

 this.classnamethis.classname

 this.titlethis.title

 this.altthis.alt

 this.valuethis.value (for form elements)(for form elements)

(25)

‘ ‘ Event’ properties Event’ properties



event.target event.target ref to element triggering event ref to element triggering event



Event.target.id Event.target.id id of element triggering event id of element triggering 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

(26)

Event Methods Event Methods

.stopPropagation()

.stopPropagation() no bubblingno bubbling .preventDefault()

.preventDefault() no <a> link, no <form> submitno <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

(27)

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)

(28)

Useful Event Functions Useful Event Functions

.hide()

.hide() display:nonedisplay:none .show()

.show() display:truedisplay: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, mouseoutmouseover, mouseout

https://www.tutorialspoint.com/jquery/jquery-effects.htm https://www.tutorialspoint.com/jquery/jquery-effects.htm

(29)

Examples of Events Examples of Events

 Toggle.htmlToggle.html Opacity of pictureOpacity of picture

 Hover1.htmlHover1.html Hover using .bindHover using .bind

 Events.htmlEvents.html Expanding a DIVExpanding a DIV

 TableStripes.htmlTableStripes.html Table highlightingTable highlighting

 Collapsible.list.htmlCollapsible.list.html Expandable ListExpandable List

 Custom.effects.htmlCustom.effects.html AnimationsAnimations

(30)

Other examples Other examples



Table stripes Table stripes



Animations Animations



Expanding Lists Expanding Lists



ASP.NET Gridview ASP.NET Gridview

(31)

Extending jQuery Extending jQuery



Creating a jQuery function Creating a jQuery function



https://www.tutorialspoint.com/jquery/jquery-p https://www.tutorialspoint.com/jquery/jquery-p lugins.htm

lugins.htm

(32)

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-slide show.htm



Photomatic example Photomatic example

 http://www.isquery.com/devel/jqueryinaction/seco nd/chapter7/photomatic/photomatic.html

(33)

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.

(34)

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 $()

(35)

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!”);

});

(36)

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()

(37)

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”);

break;

}} });});

 event.preventDefault()

 event.stopPropagation()

(38)

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()

(39)

jQuery Attributes jQuery Attributes



.addClass() .addClass()



.removeClass() .removeClass()



.hasClass() .hasClass()



.toggleClass() .toggleClass()



.attr() .attr()



.removeattr() .removeattr()



.val() .val()



.html() .html()

(40)

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>abroad</li>

</ul>

js

$('li').each(function(index) {

alert(index + ': ' + $(this).text());

});

(41)

jQuery Traversing jQuery Traversing



.add() .add()



.children() .children()



.contents() .contents()



.filter() .filter()



.find() .find()



.next() .next()



.not() .not()



.prev() .prev()

(42)

jQuery Manipulations jQuery Manipulations



.append() .append()



.appendTo() .appendTo()



.clone() .clone()



.detach() .detach()



.insertAfter() .insertAfter()



.insertBefore() .insertBefore()



.remove() .remove()

(43)

jQuery CSS jQuery CSS



.css() .css()



.height() .height()



.width() .width()



.position() .position()



.offset() .offset()



.scrollTop() .scrollTop()



.scrollLeft() .scrollLeft()

(44)

jQuery Effect jQuery Effect



.animate() .animate()

html

<button id="right">right</button>

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");

});

(45)

jQuery Effect jQuery Effect



.fadeIn() .fadeIn()



.hide() .hide()



.show() .show()



.toggle() .toggle()

(46)

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

(47)

jQuery AJAX jQuery AJAX

 jQuery.get(url, [data], [callback(data, textStatus, jQuery.get(url, [data], [callback(data, textStatus, XMLHttpRequest)], [dataType])

XMLHttpRequest)], [dataType]) Returns:

Returns: XMLHttpRequestXMLHttpRequest

 jQuery.post()jQuery.post()

 jQuery.getJSON()jQuery.getJSON()

 jQuery.load()jQuery.load()

 jQuery.getScript()jQuery.getScript()

(48)

AJAX Example AJAX Example

jQuery HTML

server username

Does ‘username’ exist?

yes/no

check…

print

(49)

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/html\n\n“

name = form.getvalue('username', '1') if os.path.exists("/home/“ + name + "/"):

print "exists"

else:

print "not exists"

CGI

(50)

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

(51)

JSONP Mechanism JSONP Mechanism

Suppose a request to

http://server/User?Id=1234http://server/User?Id=1234

returns returns

{"Name": “Pippo", "Id" : 1234, "Rank": 7}

Add parameter to request Add parameter to request

src="http://server/User?

UserId=1234&jsonp=parseResponse

"> ">

</script>

So that the answer becomes:

parseResponse({"Name": "Foo", "Id" : 1234, parseResponse({"Name": "Foo", "Id" : 1234,

"Rank": 7})

(52)

JSONP Example JSONP Example

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);

});});

(53)

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

(54)

CORS Example CORS Example

// Create the XHR object.

function createCORSRequest(method, url) { function createCORSRequest(method, url) {

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; }

(55)

var xhr = createCORSRequest('GET', url);

if (!xhr) { throw new Error('CORS not supported'); } if (!xhr) { throw new Error('CORS not supported'); }

xhr.onload = function() { xhr.onload = function() {

var responseText = xhr.responseText;

console.log(responseText);

// process the response.

}; };

xhr.onerror = function() { xhr.onerror = function() {

console.log('There was an error!');

}; };

(56)

Embedding a Map Embedding a Map

scrolling="no" marginheight="0" marginwidth="0"

src="http://maps.google.com/maps?

f=q&source=s_q&hl=en&geocode=&a f=q&source=s_q&hl=en&geocode=&a

mp;q=largo+pontecorvo+3,+pisa, mp;q=largo+pontecorvo+3,+pisa,

+italy&aq=&sll=37.0625,- +italy&aq=&sll=37.0625,-

95.677068&sspn=33.901528,36.474609&

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">

</iframe>

https://www.tutorialspoint.com/jquery/src/whatsnearby/i https://www.tutorialspoint.com/jquery/src/whatsnearby/i

ndex.htm ndex.htm