2. Agenda
● Review JavaScript
● Intro to jQuery
● jQuery Documentation
● jQuery Plugins
● Lab: Divided Times (basic)
● A Few jQuery Functions
● Lab: Divided Times (advanced)
3. What is jQuery
jQuery is a cross-browser JavaScript library
designed to simplify the client-side scripting of
HTML.
“Cross browser” - works the same in all*
browsers.
4. What is jQuery?
Allows for the following:
● Document traversal
● CSS manipulation
● Event handling
● Animation
● and more!
5. Where is jQuery?
Download code at jquery.com
version 1.x versus version 2.x
Remote hosting:
http://code.jquery.com/jquery-1.11.0.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
6. Applying jQuery
$(document).ready()
is a built-in jQuery function that waits until the
HTML for a page loads before it runs your
script.
Shorthand for jQuery Document Ready Event
11. Drop-Down Navigation Plugin
Review basic horizontal navigation template
Access jQuery Drop Down Menu Tutorial &
Demo
Code Along from tutorial
12. Lab
Divided Times (basic)
● access divided_times_starter code
● review visual example
● incorporate basic jquery code
○ six items in each drop down
○ ignore layout (mega menu)
13. Lab
Divided Times (advanced)
● Can you adjust CSS to create mega
menu?
● If not, access a different plugin
○ jQuery Mega Drop Down Menu
15. Lab
Divided Times (advanced with teams)
● image (mockup)
● behaviors
● pseudo code
● apply jQuery to HTML and CSS
16. Homework
● Work on Divided Times
● Watch Fundamentals of jQuery videos (7)
● Begin jQuery Learning Center (Ch. 1-3)
● Read about jQuery.each()
● Begin conceptualizing personal project
● Create index page for your server space
● Add some jQuery to index page