Your SlideShare is downloading. ×
0
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Lesson 09
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 09

158

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×