In this presentation we introduce JavaScript libraries and jQuery, show how to add jQuery to a page, and go over the entire jQuery API.

1. jQuery
$(document).getJiggy();

2. Overview
• Print Buttons - Gallery Walk
Lecture
• What is a (JavaScript) Library?
• jQuery verse
• How to add jQuery to a page
• jQuery API
• jQuery plugins
Lab
Simple jQuery Form Validation
09 - jQuery Advanced Web Design http://dabrook.org/

3. What’s a Libary?
09 - jQuery Advanced Web Design http://dabrook.org/

4. What’s a Libary?
• Library of code
09 - jQuery Advanced Web Design http://dabrook.org/

5. What’s a Libary?
• Library of code
• Writes out common code
09 - jQuery Advanced Web Design http://dabrook.org/

6. What’s a Libary?
• Library of code
• Writes out common code
• Solves difficult problems
09 - jQuery Advanced Web Design http://dabrook.org/

7. What’s a Libary?
• Library of code
• Writes out common code
• Solves difficult problems
• Makes complex easier
09 - jQuery Advanced Web Design http://dabrook.org/

8. JavaScript Libraries
09 - jQuery Advanced Web Design http://dabrook.org/

9. How to Add jQuery
09 - jQuery Advanced Web Design http://dabrook.org/

10. How to Add jQuery
1. Locally
09 - jQuery Advanced Web Design http://dabrook.org/

11. How to Add jQuery
1. Locally
2. jQuery
09 - jQuery Advanced Web Design http://dabrook.org/

12. How to Add jQuery
1. Locally
2. jQuery
3. Other Content Delivery Networks (CDN)
09 - jQuery Advanced Web Design http://dabrook.org/

13. Mini Lab
• Create a new document: how-to-add-jquery.html
• Function to test if jQuery is running
• Try adding jQuery from jQuery
• Try adding jQuery locally
09 - jQuery Advanced Web Design http://dabrook.org/

14. jQuery API
• AJAX • Date •Events • Selectors
• Attributes • Dimensions • Forms • Traversing
•CSS •Effects • Manipulations • Utilities
09 - jQuery Advanced Web Design http://dabrook.org/

15. Mini Lab
• Create a new document: jquery-api-practice.html
• Practice using the following from the jQuery API:
• Selectors
• Effects
• CSS
• Events
09 - jQuery Advanced Web Design http://dabrook.org/

16. jQuery Plugins
09 - jQuery Advanced Web Design http://dabrook.org/

17. jQuery Plugins
• Built with/on jQuery
09 - jQuery Advanced Web Design http://dabrook.org/

18. jQuery Plugins
• Built with/on jQuery
• Link to Plugin js file
09 - jQuery Advanced Web Design http://dabrook.org/

19. jQuery Plugins
• Built with/on jQuery
• Link to Plugin js file
• Solve specific solution
09 - jQuery Advanced Web Design http://dabrook.org/

20. jQuery Plugins
• Built with/on jQuery
• Link to Plugin js file
• Solve specific solution
• Use jQuery syntax
09 - jQuery Advanced Web Design http://dabrook.org/

21. jQuery Plugins
• Built with/on jQuery
• Link to Plugin js file
• Solve specific solution
• Use jQuery syntax
• Range of ease of use
09 - jQuery Advanced Web Design http://dabrook.org/

22. jQuery Plugins
• Built with/on jQuery
• Link to Plugin js file
• Solve specific solution
• Use jQuery syntax
• Range of ease of use
• Examples
09 - jQuery Advanced Web Design http://dabrook.org/

23. Lab
• Create a new document: form-validation-js.html
• Add HTML and CSS for a basic page
contact form
• Link to the validation plugin
09 - jQuery Advanced Web Design http://dabrook.org/

24. Homework
Add jQuery form validation to your web site as well as one
other jQuery behavior (or plugin) of your choice. Make sure
that it works properly and you can explain why you chose
that behavior.
Upload to:
username.welovewebdesign.com/hw/09/
09 - jQuery Advanced Web Design http://dabrook.org/