Introduction to jQuery - College Lecture
Download as KEY, PDF0 likes1,954 views
The document provides an overview of jQuery, discussing its functionalities, including how to add it to a page and access its API and plugins. It presents mini labs for practical experience in using jQuery for tasks such as form validation and API practice. Additionally, it outlines homework assignments involving the implementation of jQuery behaviors on personal websites.
Introduction to jQuery - College Lecture
- 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/