Selecting and Manipulating Elements




Thursday, November 5, 2009
jQuery is a fast and concise JavaScript Library
              that simplifies HTML document traversing,
              event...
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/

  ...
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')
                                 Ge...
Looping Through Elements

         $('.post').each(function() {
           this; // equal to dom element
         });




...
jQuery Methods
                              Each jQuery object comes with a ton of methods for
                         g...
.html()
                              http://docs.jquery.com/Attributes


            <div id="content">
              <p>...
.css()
                                     http://docs.jquery.com/CSS



                     <div id="post-1">
         ...
.attr()
                                   http://docs.jquery.com/Attributes



                    <div id="post-1">
    ...
Assignment09
  http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements/

        ...
Upcoming SlideShare
Loading in...5
×

jQuery Introduction

977

Published on

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

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
977
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery Introduction

  1. 1. Selecting and Manipulating Elements Thursday, November 5, 2009
  2. 2. 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
  3. 3. Lightweight Thursday, November 5, 2009
  4. 4. CSS3 Compliant Thursday, November 5, 2009
  5. 5. Cross-browser Thursday, November 5, 2009
  6. 6. Thursday, November 5, 2009
  7. 7. Links http://jquery.com/ http://docs.jquery.com/ http://docs.jquery.com/Tutorials http://plugins.jquery.com/ http://jqueryui.com/ Thursday, November 5, 2009
  8. 8. jQuery is all about selecting elements and manipulating them. Thursday, November 5, 2009
  9. 9. Selecting Elements $ Thursday, November 5, 2009
  10. 10. getElementById $('#content') Thursday, November 5, 2009
  11. 11. getElementsByClassName $('.post') Thursday, November 5, 2009
  12. 12. getElementsByTagName $('p') Thursday, November 5, 2009
  13. 13. 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
  14. 14. Looping Through Elements $('.post').each(function() { this; // equal to dom element }); Thursday, November 5, 2009
  15. 15. 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
  16. 16. .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
  17. 17. .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
  18. 18. .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
  19. 19. 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
  1. A particular slide catching your eye?

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

×