Lesson 09
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Lesson 09

on

  • 212 views

 

Statistics

Views

Total Views
212
Views on SlideShare
212
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lesson 09 Presentation Transcript

  • 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