{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

jQueryTutorial

jQueryTutorial - jQuery Tutorial Copyright Ellis Horowitz...

Info icon This preview shows pages 1–8. Sign up to view the full content.

View Full Document Right Arrow Icon
jQuery’Tutorial’ Copyright’Ellis’Horowitz’2013’ 1’
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
What’is’jQuery?’ A’framework’for’client-side’JavaScript.’ Frameworks’provide’useful’alterna±ves’for’ common’programming’tasks.’ An’open’source’project’at’ jquery.com It’simpli²es’ HTML’document’traversing’ Event’Handling’ Anima±ng’ AJAX’interac±ons’ Copyright’Ellis’Horowitz’2013’ 2’
Image of page 2
What’is’available’with’jQuery?’ Cross’browser’support’ and’detecJon’ A±AX’funcJons’ CSS’funcJons’ DOM’manipulaJon’ DOM’transversal’ ATribute’manipulaJon’ Event’detecJon’and’ handling’ ±avaScript’animaJon’ Hundreds’of’plugins’for’ pre-built’user’ interfaces,’advanced’ animaJons,’form’ validaJon,’etc’ Expandable’ funcJonality’using’ custom’plugins’ Small’foot’print’ Copyright’Ellis’Horowitz’2013’ 3’
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Downloading’jQuery’ InstallaJon’–’You’just’download’the’latest’ jquery-x.y.z.js’fle’and’put’it’in’your’website’ Folder’ hTp://jquery.com/download jQuery’provides’cross’browser’support’ jQuery’is’lightweight:’14’KB’(Minifed’and’ Gzipped)‏’ Copyright’Ellis’Horowitz’2013’ 4’
Image of page 4
So’How’Does’jQuery’Change’How’ You’Write’JavaScript?’ jQuery’adds’a’JavaScript’object’called’ $ ’or’ jQuery to’your’JavaScript’code.’ Through’manipula±on’of’this’JavaScript’code,’it’ abstracts’away’commonly’used’JavaScript’objects’into’ $’and’jQuery,’such’as’the’DOM’(document),’ XMLHTTPRequest,’and’JSON’ Example:’Instead’of’ var myButton = document . getElementById ( "myButton" ); In’jQuery,’it²s’just’ $ ( "#myButton" ); Copyright’Ellis’Horowitz’2013’ 5’
Image of page 5

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
jQuery’Selector’Categories’ JQuery’borrows’from’CSS1-3’“selectors”,’a’tool’to’match’a’set’of’elements’ in’a’document.’See’:’ hTp://www.w3.org/±R/CSS21/selector.html ATribute:’ selects’elements’that’have’the’speciFed’aTribute $("input[value='Hot Fuzz'] ").next().text( "Hot Fuzz" ) ; Basic:’selectors’based’on’CSS1’speciFca²on’ $(".myClass").css("border", "3px solid red"); Basic’³ilter’ $(":header").css({ background: "#ccc", color: "blue" }); Child’³ilter’ $("div span:first-child").css( "text-decoration", "underline" ) Content’³ilter’ $("div:contains('John’)").css( "text-decoration", "underline" ); ³orm’ var input = $(":button").addClass( "marked" ); Hierarchy’ $("form input").css( "border", "2px dotted blue" ); See:’ hTp://api.jquery.com/category/selectors Copyright’Ellis’Horowitz’2013’ 6’
Image of page 6
jQuery’Basic’Selectors’ These’are’examples’of’“Basic”’selectors,’based’on’CSS1:’ All’Selector’(“*”):’selects’all’elements’ var elementCount = $("*").css("border", "3px solid red" ).length;
Image of page 7

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Image of page 8
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}