• Like
  • Save
jQuery Introduction
Upcoming SlideShare
Loading in...5
×
 

jQuery Introduction

on

  • 1,616 views

First class on jQuery. Short introduction to selecting elements and working with html, attr, and css methods.

First class on jQuery. Short introduction to selecting elements and working with html, attr, and css methods.

Statistics

Views

Total Views
1,616
Views on SlideShare
1,394
Embed Views
222

Actions

Likes
1
Downloads
49
Comments
1

2 Embeds 222

http://teaching.johnnunemaker.com 215
http://www.slideshare.net 7

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

11 of 1

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

    jQuery Introduction jQuery Introduction Presentation Transcript

    • Selecting and Manipulating Elements Thursday, November 5, 2009
    • jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Thursday, November 5, 2009
    • Lightweight Thursday, November 5, 2009
    • CSS3 Compliant Thursday, November 5, 2009
    • Cross-browser Thursday, November 5, 2009
    • Thursday, November 5, 2009
    • Links http://jquery.com/ http://docs.jquery.com/ http://docs.jquery.com/Tutorials http://plugins.jquery.com/ http://jqueryui.com/ Thursday, November 5, 2009
    • jQuery is all about selecting elements and manipulating them. Thursday, November 5, 2009
    • Selecting Elements $ Thursday, November 5, 2009
    • getElementById $('#content') Thursday, November 5, 2009
    • getElementsByClassName $('.post') Thursday, November 5, 2009
    • getElementsByTagName $('p') Thursday, November 5, 2009
    • get elements by any css selector $('#content div.post a') Get all a elements inside a div with a class of post that is inside an element with an id of content. Thursday, November 5, 2009
    • Looping Through Elements $('.post').each(function() { this; // equal to dom element }); Thursday, November 5, 2009
    • jQuery Methods Each jQuery object comes with a ton of methods for getting/setting attributes, manipulating and traversing elements, observing events and interface effects. Thursday, November 5, 2009
    • .html() http://docs.jquery.com/Attributes <div id="content"> <p>A paragraph.</p> </div> <script type="text/javascript"> $('#content').html(); // Same concept as innerHTML // <p>A paragraph.</p> $('#content').html('<p>New content.</p>'); // Same concept as innerHTML = ''; // #content's inner html would now be <p>New content.</p> </script> Thursday, November 5, 2009
    • .css() http://docs.jquery.com/CSS <div id="post-1"> <h1>It's an HTTParty and Everyone is Invited</h1> <p>Here is the text for the post.</p> </div> <script type="text/javascript"> // sets the text color of div#post-1 to green $('#post-1').css('color', 'green'); // sets the background color of div#post-1 to red $('#post-1').css('background', 'red'); </script> Thursday, November 5, 2009
    • .attr() http://docs.jquery.com/Attributes <div id="post-1"> <h1>It's an HTTParty and Everyone is Invited</h1> <p>Here is the text for the post.</p> </div> <script type="text/javascript"> // gets the id attribute of #post-1 $('#post-1').attr('id'); // "post-1" // sets the id attribute of #post-1 to some-new-id $('#post-1').attr('id', 'some-new-id'); </script> Thursday, November 5, 2009
    • Assignment09 http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements/ http://docs.jquery.com/Selectors http://docs.jquery.com/Attributes http://docs.jquery.com/CSS Thursday, November 5, 2009