0
Front-End
Web Development
Lesson 9
jQuery
Agenda
● Review JavaScript
● Intro to jQuery
● jQuery Documentation
● jQuery Plugins
● Lab: Divided Times (basic)
● A Few ...
What is jQuery
jQuery is a cross-browser JavaScript library
designed to simplify the client-side scripting of
HTML.
“Cross...
What is jQuery?
Allows for the following:
● Document traversal
● CSS manipulation
● Event handling
● Animation
● and more!
Where is jQuery?
Download code at jquery.com
version 1.x versus version 2.x
Remote hosting:
http://code.jquery.com/jquery-...
Applying jQuery
$(document).ready()
is a built-in jQuery function that waits until the
HTML for a page loads before it run...
Applying jQuery
Standard version:
<script type=”text/javascript”>
$(document).ready(function() {
// your code goes here
})...
Applying jQuery
Shorthand version:
<script type=”text/javascript”>
$(function() {
// your code goes here
}); // end ready
...
Where to Place Scripts
Top or Bottom of the Page?
Drop-Down Navigation Plugin
Access The jQuery Plugin Registry
Search “drop down menu”
Downsides:
● lack of demo
● lack of ...
Drop-Down Navigation Plugin
Review basic horizontal navigation template
Access jQuery Drop Down Menu Tutorial &
Demo
Code ...
Lab
Divided Times (basic)
● access divided_times_starter code
● review visual example
● incorporate basic jquery code
○ si...
Lab
Divided Times (advanced)
● Can you adjust CSS to create mega
menu?
● If not, access a different plugin
○ jQuery Mega D...
A Few jQuery Functions
● .toggleClass()
● .hasClass()
● .hide()
● .show()
● .slideUp()
● .siblings()
● .addClass()
● .remo...
Lab
Divided Times (advanced with teams)
● image (mockup)
● behaviors
● pseudo code
● apply jQuery to HTML and CSS
Homework
● Work on Divided Times
● Watch Fundamentals of jQuery videos (7)
● Begin jQuery Learning Center (Ch. 1-3)
● Read...
Upcoming SlideShare
Loading in...5
×

Lesson 09

167

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
167
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 09"

  1. 1. Front-End Web Development Lesson 9 jQuery
  2. 2. Agenda ● Review JavaScript ● Intro to jQuery ● jQuery Documentation ● jQuery Plugins ● Lab: Divided Times (basic) ● A Few jQuery Functions ● Lab: Divided Times (advanced)
  3. 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. 4. What is jQuery? Allows for the following: ● Document traversal ● CSS manipulation ● Event handling ● Animation ● and more!
  5. 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. 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. 7. Applying jQuery Standard version: <script type=”text/javascript”> $(document).ready(function() { // your code goes here }); // end ready </script>
  8. 8. Applying jQuery Shorthand version: <script type=”text/javascript”> $(function() { // your code goes here }); // end ready </script>
  9. 9. Where to Place Scripts Top or Bottom of the Page?
  10. 10. Drop-Down Navigation Plugin Access The jQuery Plugin Registry Search “drop down menu” Downsides: ● lack of demo ● lack of a tutorial
  11. 11. Drop-Down Navigation Plugin Review basic horizontal navigation template Access jQuery Drop Down Menu Tutorial & Demo Code Along from tutorial
  12. 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. 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. 14. A Few jQuery Functions ● .toggleClass() ● .hasClass() ● .hide() ● .show() ● .slideUp() ● .siblings() ● .addClass() ● .removeClass()
  15. 15. Lab Divided Times (advanced with teams) ● image (mockup) ● behaviors ● pseudo code ● apply jQuery to HTML and CSS
  16. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×