1. Front-End
Web Development
Lesson 9
jQuery

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

7. Applying jQuery
Standard version:
<script type=”text/javascript”>
$(document).ready(function() {
// your code goes here
}); // end ready
</script>

8. Applying jQuery
Shorthand version:
<script type=”text/javascript”>
$(function() {
// your code goes here
}); // end ready
</script>

9. Where to Place Scripts
Top or Bottom of the Page?

10. Drop-Down Navigation Plugin
Access The jQuery Plugin Registry
Search “drop down menu”
Downsides:
● lack of demo
● lack of a tutorial

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

14. A Few jQuery Functions
● .toggleClass()
● .hasClass()
● .hide()
● .show()
● .slideUp()
● .siblings()
● .addClass()
● .removeClass()

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