jQueryTutorial

jQueryTutorial - jQuery Tutorial Copyright Ellis Horowitz...

Info iconThis 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’
Background image of page 1

Info iconThis 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’
Background 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’
Background image of page 3

Info iconThis 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’
Background 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’
Background image of page 5

Info iconThis 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’
Background 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;
Background image of page 7

Info iconThis 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 ]}

Page1 / 36

jQueryTutorial - jQuery Tutorial Copyright Ellis Horowitz...

This preview shows document pages 1 - 8. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online