jquery introduction
TRANSCRIPT
![Page 1: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/1.jpg)
jQueryjQueryThe Way to JavaScript and The Way to JavaScript and Rich Internet ApplicationsRich Internet Applications
![Page 2: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/2.jpg)
Introduction to jQueryIntroduction to jQuery• Developed by John Resig at Rochester Institute of Developed by John Resig at Rochester Institute of
TechnologyTechnology• ““jQueryjQuery is a lightweight is a lightweight JavaScript libraryJavaScript library that emphasizes that emphasizes
interaction between interaction between JavaScriptJavaScript and and HTMLHTML. It was released in . It was released in January 2006 at January 2006 at BarCampBarCamp NYC by NYC by John ResigJohn Resig.”.”
• ““jQuery is jQuery is free, open source softwarefree, open source software Dual-licensedDual-licensed under under the the MIT LicenseMIT License and the and the GNU General Public LicenseGNU General Public License.”.”
• ““It’s all about simplicity. Why should web developers be It’s all about simplicity. Why should web developers be forced to write long, complex, book-length pieces of code forced to write long, complex, book-length pieces of code when they want to create simple pieces of interaction?”when they want to 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.
![Page 3: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/3.jpg)
John ResigJohn Resig• John Resig is a JavaScript Tool John Resig is a JavaScript Tool
Developer for the Developer for the Mozilla CorporationMozilla Corporation and the author of the book and the author of the book Pro JavaScript TechniquesPro JavaScript Techniques. He's also the . He's also the creator and lead developer of the creator and lead developer of the 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 and and NokiaNokia have announced have announced plans to bundle jQuery on their plans to bundle jQuery on their platforms,platforms,[1][1] Microsoft adopting it Microsoft adopting it initially within initially within Visual StudioVisual Studio[2][2] for use for use within Microsoft's within Microsoft's ASP.NET AJAXASP.NET AJAX framework and framework and ASP.NET MVC FrameworkASP.NET MVC Framework whilst Nokia whilst Nokia will integrate it into their Web Run-Time will integrate it into their Web Run-Time platform.platform.
![Page 4: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/4.jpg)
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, Manning by Bibeault & Katz, Manning– jQuery Visual Quickstart GuidejQuery Visual Quickstart Guide by Holzner, Peachpit by 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
![Page 5: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/5.jpg)
Plan for the 4 sessionsPlan for the 4 sessions• Class I – Introduction, installation, Class I – Introduction, installation,
“Howdy World”, Ready function, “Howdy World”, Ready function, DOM, Selecting and Formatting web DOM, Selecting and Formatting web page elementspage 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
![Page 6: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/6.jpg)
Introduction to jQueryIntroduction to jQuery• Installation – You just download the Installation – You just download the
jquery-1.3.2.js file and put it in your jquery-1.3.2.js file and put it in your website folderwebsite folder– Can access via URLCan access via URL
![Page 7: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/7.jpg)
What jQuery DoesWhat jQuery Does• ““Unobtrusive” JavaScript – separation of Unobtrusive” JavaScript – separation of
behaviorbehavior from structure from structure• CSS – separation of CSS – separation of stylestyle from structure from structure• Allows adding JavaScript to your web pagesAllows adding JavaScript to your web pages• Advantages over Advantages over justjust JavaScript JavaScript
– Much easier to useMuch easier to use– Eliminates cross-browser problemsEliminates cross-browser problems
• HTML to CSS to DHTMLHTML to CSS to DHTML
![Page 8: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/8.jpg)
5 Things jQuery Provides5 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 themof 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 elementsCreates, deletes, shows, hides DOM 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 callsAJAX calls
![Page 9: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/9.jpg)
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 You can add and subtract DOM
elements on the flyelements on the fly• You can change the properties and You can change the properties and
contents of DOM elements on the flycontents of DOM elements on the fly
![Page 10: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/10.jpg)
The DOMThe DOM• ““The The Document Object ModelDocument Object Model ( (DOMDOM) is a cross-platform and ) is a cross-platform and
language-independent convention for representing and interacting language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated DOM (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
![Page 11: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/11.jpg)
The jQuery FunctionThe jQuery Function• jQuery() = $()jQuery() = $()• $(function)$(function) The “Ready” handlerThe “Ready” handler• $(‘selector’)$(‘selector’) Element selector Element selector
expressionexpression• $(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
![Page 12: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/12.jpg)
Tutorial 1 – The Ready Tutorial 1 – The Ready FunctionFunction• 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);
![Page 13: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/13.jpg)
Tutorial 2 – Selecting ElementsTutorial 2 – Selecting ElementsCreating 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 <p> element of the parent. n=even, odd
too.too.– $(‘p:nth-child(5n+1)’)$(‘p:nth-child(5n+1)’) gets the 1gets the 1stst element after every 5th one element 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
![Page 14: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/14.jpg)
Selecting Elements, cont.Selecting Elements, cont.• $(‘img’[alt])$(‘img’[alt]) <img> elements having an alt <img> elements having an alt
attributeattribute• $(‘a’[href^=http://])$(‘a’[href^=http://]) <a> elements with an href <a> elements with an href
attribute starting with ‘http://’attribute starting with ‘http://’• $(‘a’[href$=.pdf])$(‘a’[href$=.pdf]) <a> elements with an href <a> elements with an href
attribute ending with ‘.pdf’attribute ending with ‘.pdf’• $(‘a’[href*=ntpcug])$(‘a’[href*=ntpcug]) <a> elements with an href <a> elements with an href
attriute containing ‘ntpcug’attriute containing ‘ntpcug’
![Page 15: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/15.jpg)
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 selects elements where the func returns true or
selsel• .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
![Page 16: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/16.jpg)
Tutorial 3 – Formatting Tutorial 3 – Formatting ElementsElements• .css(property, value).css(property, value)• .html().html()• .val().val() (form elements)(form elements)• .text().text()• .addClass(‘class’).addClass(‘class’)• .removeClass(‘class’).removeClass(‘class’)
![Page 17: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/17.jpg)
Tutorial 4 – Add Page Tutorial 4 – Add Page ElementsElements
• $(‘#target’).before(‘<p>Inserted before $(‘#target’).before(‘<p>Inserted before #target</p>’);#target</p>’);
• $(‘#target’).after(‘<p>This is added after $(‘#target’).after(‘<p>This is added after #target</p>’);#target</p>’);
• $(‘#target’).append(‘<p>Goes inside #target, at $(‘#target’).append(‘<p>Goes inside #target, at end</p>’);end</p>’);
• $(‘#target’).wrap(‘<div></div>’);$(‘#target’).wrap(‘<div></div>’);
![Page 18: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/18.jpg)
Adding EventsAdding Events• Mouseover events – bind, hover, Mouseover events – bind, hover,
toggletoggle• Button click eventsButton click events• KeystrokesKeystrokes
![Page 19: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/19.jpg)
Event BackgroundEvent Background• DOM Level 2 Event ModelDOM Level 2 Event Model
– Multiple event handlers, or listeners, can Multiple event handlers, or listeners, can be established on an elementbe established on an element
– These handlers cannot be relied upon to These handlers cannot be relied upon to run an any particular orderrun an any particular order
– When triggered, the event propagates When triggered, the event propagates from the top down (capture phase) or from the top down (capture phase) or bottom up (bubble phase)bottom up (bubble phase)
– IE doesn’t support the “capture phase”IE doesn’t support the “capture phase”
![Page 20: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/20.jpg)
Basic Syntax of Event Basic Syntax of Event BindingBinding• $(‘img’).bind(‘click’,function(event)$(‘img’).bind(‘click’,function(event)
{alert(‘Howdy’;});{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);
![Page 21: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/21.jpg)
Element Properties – “this”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)
![Page 22: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/22.jpg)
‘‘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
![Page 23: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/23.jpg)
Event MethodsEvent Methods• .stopPropagation().stopPropagation() no bubblingno bubbling• .preventDefault().preventDefault() no <a> link, no <form> no <a> link, no <form>
submitsubmit• .trigger(eventType).trigger(eventType) does not actually trigger does not actually trigger
the event, but calls the appropriate function the event, but calls the appropriate function specified as the one tied to the eventTypespecified as the one tied to the eventType
• .click(), blur(), focus(), select(), submit().click(), blur(), focus(), select(), submit()– With no parameter, invokes the event With no parameter, invokes the event
handlers, like trigger does, for all the elements handlers, like trigger does, for all the elements in the wrapped setin the wrapped set
![Page 24: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/24.jpg)
Shortcut Event BindingShortcut 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)
![Page 25: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/25.jpg)
Useful Event FunctionsUseful Event Functions• .hide().hide() display:truedisplay:true• .show().show() display:nonedisplay:none• .toggle(func1, func2) first click calls func1, .toggle(func1, func2) first click calls func1,
next click executes func2next click executes func2• .hover(over, out).hover(over, out) mouseover, mouseoutmouseover, mouseout
![Page 26: JQuery introduction](https://reader035.vdocument.in/reader035/viewer/2022070509/58a421f81a28abec1a8b6137/html5/thumbnails/26.jpg)
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