Lesson 09
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Lesson 09

on

  • 382 views

 

Statistics

Views

Total Views
382
Views on SlideShare
381
Embed Views
1

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 1

http://localhost 1

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 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