User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With...
Transcript of User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With...
![Page 1: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/1.jpg)
User Interaction: jQuery
Assoc. Professor Donald J. Patterson INF 133 Fall 2014
1
![Page 2: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/2.jpg)
jQuery
• jQuery
• A JavaScript Library
• Cross-browser
• Free (beer & speech)
• It supports
•manipulating HTML elements (DOM)
• animations
• event handling
• AJAX
![Page 3: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/3.jpg)
jQuery
•Getting access to jQuery in our code
• You can’t just write JavaScript that calls jQuery
• You must load it
• From where?
• From your own machine
• http://jquery.com/
• From someone else’s machine
• From Google
•Why would you do this?
• http://code.google.com/apis/libraries/devguide.html
• Shortcut
![Page 4: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/4.jpg)
jQuery
• Loading jQuery is just like loading a remote JavaScript
![Page 5: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/5.jpg)
jQuery
• Loading jQuery is just like loading a remote JavaScript
Step 6
![Page 6: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/6.jpg)
jQuery
•With jQuery you select HTML elements in the DOM and perform actions on them
• Basic syntax is: $(selector).action()
• A dollar sign ($) is used to define jQuery
• $(selector).action() = jQuery(selector).action()
• A selector to "query (or find)" HTML elements
• A jQuery action to apply to the element(s)
w3schools
![Page 7: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/7.jpg)
jQuery
<p class=”foo”>words</p>
<p id=”bar”>more words</p>
<p class=”foo”>even more words</p>
<img class=”foo”/>
• Selection examples:
•multiple results
• $("p").hide()
• $(".foo").hide()
• $("p.foo").hide()
• single result
• $("#bar").hide()
• context dependent
• $(this).hide()
w3schools
![Page 8: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/8.jpg)
jQuery
•Many elaborate selectors possible
•multiple selectors
• $("p,img")
• descendant selector
• $("p a")
• sibling filter (selects the element with .next class)
• $(“.prev + .next”)
• negation
• $(“input:not(:checked)”)
http://api.jquery.com/category/selectors/
![Page 9: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/9.jpg)
jQuery
Possible Actions:
• append content to a DOM element
• wrap content around a DOM element
• toggle the display of a DOM element
• attach a function that is run when you hover over a DOM element
• you can request data via the ajax pattern
w3schools
![Page 10: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/10.jpg)
jQuery
• Loading jQuery is just like loading a remote JavaScript
Step 7
![Page 11: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/11.jpg)
jQuery
• Loading jQuery is just like loading a remote JavaScript
• Step 8
![Page 12: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/12.jpg)
jQuery
• Loading jQuery is just like loading a remote JavaScript
Step 07_02
![Page 13: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/13.jpg)
jQuery
![Page 14: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/14.jpg)
jQuery
![Page 15: User Interaction: jQuerydjp3/classes/2014_09_INF133/Lectures/Lecture_05_02.pdf · jQuery •With jQuery you select HTML elements in the DOM and perform actions on them •Basic syntax](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c3bbd95fb5924f31e6cc5/html5/thumbnails/15.jpg)