ICT role in 21st century education and its challenges
JQuery introduction
1. jQueryjQuery
The Way to JavaScript and RichThe Way to JavaScript and Rich
Internet ApplicationsInternet Applications
2. Introduction to jQueryIntroduction to jQuery
• Developed by John Resig at Rochester Institute of TechnologyDeveloped by John Resig at Rochester Institute of Technology
• ““jQueryjQuery is a lightweightis a lightweight JavaScript libraryJavaScript library that emphasizesthat emphasizes
interaction betweeninteraction between JavaScriptJavaScript andand HTMLHTML. It was released in. It was released in
January 2006 atJanuary 2006 at BarCampBarCamp NYC byNYC by John ResigJohn Resig.”.”
• ““jQuery isjQuery is free, open source softwarefree, open source software Dual-licensedDual-licensed under theunder the
MIT LicenseMIT License and theand the GNU General Public LicenseGNU General Public License.”.”
• ““It’s all about simplicity. Why should web developers be forced toIt’s all about simplicity. Why should web developers be forced to
write long, complex, book-length pieces of code when they want towrite long, complex, book-length pieces of code when they want to
create simple pieces of interaction?”create simple pieces of interaction?”
• Current version is 1.3.2.Current version is 1.3.2.
• Version 1.4 due out soon.Version 1.4 due out soon.
3. John ResigJohn Resig
• John Resig is a JavaScript Tool DeveloperJohn Resig is a JavaScript Tool Developer
for thefor the Mozilla CorporationMozilla Corporation and the authorand the author
of the bookof the book Pro JavaScript TechniquesPro JavaScript Techniques..
He's also the creator and lead developer ofHe's also the creator and lead developer of
thethe jQuery JavaScript libraryjQuery JavaScript library..
• Currently, John is located in Boston, MA.Currently, John is located in Boston, MA.
He's hard at work on his second book,He's hard at work on his second book,
Secrets of the JavaScript NinjaSecrets of the JavaScript Ninja, due in, due in
bookstores in 2009.bookstores in 2009.
• MicrosoftMicrosoft andand NokiaNokia have announcedhave announced
plans to bundle jQuery on their platforms,plans to bundle jQuery on their platforms,
[1][1] Microsoft adopting it initially withinMicrosoft adopting it initially within
Visual StudioVisual Studio[2][2] for use within Microsoft'sfor use within Microsoft's
ASP.NET AJAXASP.NET AJAX framework andframework and
ASP.NET MVC FrameworkASP.NET MVC Framework whilst Nokiawhilst Nokia
will integrate it into their Web Run-Timewill integrate it into their Web Run-Time
platform.platform.
4. Introduction to jQueryIntroduction to jQuery
• Why do I want itWhy do I want it
– Rich Internet Applications (RIA)Rich Internet Applications (RIA)
– Dynamic HTML (DHTML)Dynamic HTML (DHTML)
• How do I get itHow do I get it
– www.jquery.comwww.jquery.com
• How can I learn itHow can I learn it
– jQuery in ActionjQuery in Action by Bibeault & Katz, Manningby Bibeault & Katz, Manning
– jQuery Visual Quickstart GuidejQuery Visual Quickstart Guide by Holzner, Peachpitby Holzner, Peachpit
– www.jquery.comwww.jquery.com
– docs.jquery.comdocs.jquery.com
– www.visualjquery.comwww.visualjquery.com
– www.Jqueryfordesigners.comwww.Jqueryfordesigners.com
– www.gscottolson.com/weblog/ - cheat sheetwww.gscottolson.com/weblog/ - cheat sheet
– www.javascripttoolbox.com/jquerywww.javascripttoolbox.com/jquery
5. Plan for the 4 sessionsPlan for the 4 sessions
• Class I – Introduction, installation, “HowdyClass I – Introduction, installation, “Howdy
World”, Ready function, DOM, SelectingWorld”, Ready function, DOM, Selecting
and Formatting web page elementsand Formatting web page elements
• Class II – Events and AnimationsClass II – Events and Animations
• Class III – jQuery Plugin librariesClass III – jQuery Plugin libraries
• Class IV – AJAX with PHP and ASP.NETClass IV – AJAX with PHP and ASP.NET
6. Introduction to jQueryIntroduction to jQuery
• Installation – You just download theInstallation – You just download the
jquery-1.3.2.js file and put it in yourjquery-1.3.2.js file and put it in your
website folderwebsite folder
– Can access via URLCan access via URL
7. What jQuery DoesWhat jQuery Does
• ““Unobtrusive” JavaScript – separation ofUnobtrusive” JavaScript – separation of
behaviorbehavior from structurefrom structure
• CSS – separation ofCSS – separation of stylestyle from structurefrom structure
• Allows adding JavaScript to your web pagesAllows adding JavaScript to your web pages
• Advantages overAdvantages over justjust JavaScriptJavaScript
– Much easier to useMuch easier to use
– Eliminates cross-browser problemsEliminates cross-browser problems
• HTML to CSS to DHTMLHTML to CSS to DHTML
8. 5 Things jQuery Provides5 Things jQuery Provides
• Select DOM (Document Object Model) elementsSelect DOM (Document Object Model) elements
on a page – one element or a group of themon a page – one element or a group of them
• Set properties of DOM elements, in groupsSet properties of DOM elements, in groups
(“Find something, do something with it”)(“Find something, do something with it”)
• Creates, deletes, shows, hides DOM elementsCreates, deletes, shows, hides DOM elements
• Defines event behavior on a page (click, mouseDefines event behavior on a page (click, mouse
movement, dynamic styles, animations, dynamicmovement, dynamic styles, animations, dynamic
content)content)
• AJAX callsAJAX calls
9. The DOMThe DOM
• Document Object ModelDocument Object Model
• jQuery is “DOM scripting”jQuery is “DOM scripting”
• Heirarchal structure of a web pageHeirarchal structure of a web page
• You can add and subtract DOM elementsYou can add and subtract DOM elements
on the flyon the fly
• You can change the properties andYou can change the properties and
contents of DOM elements on the flycontents of DOM elements on the fly
10. The DOMThe DOM
• ““TheThe Document Object ModelDocument Object Model ((DOMDOM) is a cross-platform and) is a cross-platform and
language-independent convention for representing and interactinglanguage-independent convention for representing and interacting
with objects in HTML, XHTML and XML documents. Aspects of thewith objects in HTML, XHTML and XML documents. Aspects of the
DOM (such as its "Elements") may be addressed and manipulatedDOM (such as its "Elements") may be addressed and manipulated
within the syntax of the programming language in use.” Wikipediawithin the syntax of the programming language in use.” Wikipedia
11. The jQuery FunctionThe jQuery Function
• jQuery() = $()jQuery() = $()
• $(function)$(function) The “Ready” handlerThe “Ready” handler
• $(‘selector’)$(‘selector’) Element selector expressionElement selector expression
• $(element)$(element) Specify element(s) directlySpecify element(s) directly
• $(‘HTML’)$(‘HTML’) HTML creationHTML creation
• $.function()$.function() Execute a jQuery functionExecute a jQuery function
• $.fn.myfunc(){}$.fn.myfunc(){} Create jQuery functionCreate jQuery function
12. Tutorial 1 – The Ready FunctionTutorial 1 – The Ready Function
• Set up a basic HTML page and add jQuerySet up a basic HTML page and add jQuery
• Create a “ready” functionCreate a “ready” function
• Call a functionCall a function
• 5 ways to specify the ready function5 ways to specify the ready function
– jquery(document).ready(function(){…};);jquery(document).ready(function(){…};);
– jquery().ready(function(){…};)jquery().ready(function(){…};)
– jquery(function(){…};)jquery(function(){…};)
– jquery(dofunc);jquery(dofunc);
– $(dofunc);$(dofunc);
13. Tutorial 2 – Selecting ElementsTutorial 2 – Selecting Elements
Creating a “wrapped set”Creating a “wrapped set”
• $(selector)$(selector)
• selector:selector:
– $(‘#id’)$(‘#id’) id of elementid of element
– $(‘p’)$(‘p’) tag nametag name
– $(‘.class’)$(‘.class’) CSS classCSS class
– $(‘p.class’)$(‘p.class’) <p> elements having the CSS class<p> elements having the CSS class
– $(‘p:first’)$(‘p:first’) $(‘p:last’)$(‘p:last’) $(‘p:odd’)$(‘p:odd’) $(‘p:even’)$(‘p:even’)
– $(‘p:eq(2)’)$(‘p:eq(2)’) gets the 2gets the 2ndnd
<p> element (1 based)<p> element (1 based)
– $(‘p’)[1]$(‘p’)[1] gets the 2gets the 2ndnd
<p> element (0 based)<p> element (0 based)
– $(‘p:nth-child(3))$(‘p:nth-child(3)) gets the 3gets the 3rdrd
<p> element of the parent. n=even, odd too.<p> element of the parent. n=even, odd too.
– $(‘p:nth-child(5n+1)’)$(‘p:nth-child(5n+1)’) gets the 1gets the 1stst
element after every 5th oneelement after every 5th one
– $(‘p a’)$(‘p a’) <a> elements, descended from a <p><a> elements, descended from a <p>
– $(‘p>a’)$(‘p>a’) <a> elements, direct child of a <p><a> elements, direct child of a <p>
– $(‘p+a’)$(‘p+a’) <a> elements, directly following a <p><a> elements, directly following a <p>
– $(‘p, a’)$(‘p, a’) <p> and <a> elements<p> and <a> elements
– $(‘li:has(ul)’)$(‘li:has(ul)’) <li> elements that have at least one <ul> descendent<li> elements that have at least one <ul> descendent
– $(‘:not(p)’)$(‘:not(p)’) all elements but <p> elementsall elements but <p> elements
– $(‘p:hidden’)$(‘p:hidden’) only <p> elements that are hiddenonly <p> elements that are hidden
– $(‘p:empty’)$(‘p:empty’) <p> elements that have no child elements<p> elements that have no child elements
14. 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<a> elements with an href attribute
ending with ‘.pdf’ending with ‘.pdf’
• $(‘a’[href*=ntpcug])$(‘a’[href*=ntpcug]) <a> elements with an href attriute<a> elements with an href attriute
containing ‘ntpcug’containing ‘ntpcug’
15. Useful jQuery FunctionsUseful 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
17. Tutorial 4 – Add Page ElementsTutorial 4 – 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>’);
19. Event BackgroundEvent Background
• DOM Level 2 Event ModelDOM Level 2 Event Model
– Multiple event handlers, or listeners, can beMultiple event handlers, or listeners, can be
established on an elementestablished on an element
– These handlers cannot be relied upon to runThese handlers cannot be relied upon to run
an any particular orderan any particular order
– When triggered, the event propagates fromWhen triggered, the event propagates from
the top down (capture phase) or bottom upthe top down (capture phase) or bottom up
(bubble phase)(bubble phase)
– IE doesn’t support the “capture phase”IE doesn’t support the “capture phase”
20. Basic Syntax of Event BindingBasic 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 functionAllows 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 onceOnly works once
• $(‘img’).click(imgclick);$(‘img’).click(imgclick);
• $(‘img’).toggle(click1, click2);$(‘img’).toggle(click1, click2);
• $(‘img’).hover(mouseover, mouseout);$(‘img’).hover(mouseover, mouseout);
22. ‘‘Event’ propertiesEvent’ properties
• event.targetevent.target ref to element triggering eventref to element triggering event
• Event.target.idEvent.target.id id of element triggering eventid of element triggering event
• event.currentTargetevent.currentTarget
• event.typeevent.type type of event triggeredtype of event triggered
• event.dataevent.data second parm in the bind() funcsecond parm in the bind() func
• Various mouse coordinate propertiesVarious mouse coordinate properties
• Various keystroke related propertiesVarious keystroke related properties
23. Event MethodsEvent 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 thedoes not actually trigger the
event, but calls the appropriate function specified as theevent, but calls the appropriate function specified as the
one tied to the eventTypeone tied to the eventType
• .click(), blur(), focus(), select(), submit().click(), blur(), focus(), select(), submit()
– With no parameter, invokes the event handlers, likeWith no parameter, invokes the event handlers, like
trigger does, for all the elements in the wrapped settrigger does, for all the elements in the wrapped set
26. AJAXAJAX
• What is AJAXWhat is AJAX
• The basic AJAX function –The basic AJAX function –
XMLHttpRequestXMLHttpRequest
• Initiating a requestInitiating a request
• Getting the responseGetting the response
