1. Front-End
Web Development
Lesson 9
jQuery

2. Agenda
●
●
●
●
●
Review Quizzes
Intro to jQuery
jQuery Documentation
A Few jQuery Functions
Lab: Divided Times

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 2.0.x
Remote hosting:
http://code.jquery.com/jquery-1.10.2.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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. A Few jQuery Functions
●
●
●
●
●
●
●
●
.toggleClass()
.hasClass()
.hide()
.show()
.slideUp()
.siblings()
.addClass()
.removeClass()

11. Lab
Divided Times (teams)
● image
● behaviors
● pseudo code
● apply jQuery to HTML and CSS

12. Homework
●
●
●
●
●
●
Work on Divided Times
Watch Fundamentals of jQuery videos (7)
Read about jQuery.each()
Begin conceptualizing personal project and
bring thoughts to class on Monday
Create index page for your server space
Add some jQuery to index page