Front-End
Web Development
Lesson 9
jQuery
Agenda
●
●
●
●
●

Review Quizzes
Intro to jQuery
jQuery Documentation
A Few jQuery Functions
Lab: Divided Times
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 2.0.x
Remote hosting:
http://code.jquery.com/jquery-1.10.2.min.js
htt...
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?
A Few jQuery Functions
●
●
●
●
●
●
●
●

.toggleClass()
.hasClass()
.hide()
.show()
.slideUp()
.siblings()
.addClass()
.rem...
Lab
Divided Times (teams)
● image
● behaviors
● pseudo code
● apply jQuery to HTML and CSS
Homework
●
●
●
●

●
●

Work on Divided Times
Watch Fundamentals of jQuery videos (7)
Read about jQuery.each()
Begin concep...
Upcoming SlideShare
Loading in...5
×

Lesson 09

275

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
275
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 09

  1. 1. Front-End Web Development Lesson 9 jQuery
  2. 2. Agenda ● ● ● ● ● Review Quizzes Intro to jQuery jQuery Documentation A Few jQuery Functions Lab: Divided Times
  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 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. 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. A Few jQuery Functions ● ● ● ● ● ● ● ● .toggleClass() .hasClass() .hide() .show() .slideUp() .siblings() .addClass() .removeClass()
  11. 11. Lab Divided Times (teams) ● image ● behaviors ● pseudo code ● apply jQuery to HTML and CSS
  12. 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
  1. A particular slide catching your eye?

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

×