jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

Transcript

1. Selecting and Manipulating Elements
   

   View Slide

2. jQuery is a fast and concise JavaScript Library
   that simplifies HTML document traversing,
   event handling, animating, and Ajax interactions
   for rapid web development.
   

   View Slide

3. Lightweight
   

   View Slide

4. CSS3 Compliant
   

   View Slide

5. Cross-browser
   

   View Slide

6. View Slide

7. Links
   http://jquery.com/
   http://docs.jquery.com/
   http://docs.jquery.com/Tutorials
   http://plugins.jquery.com/
   http://jqueryui.com/
   

   View Slide

8. jQuery is all about selecting
   elements and manipulating them.
   

   View Slide

9. Selecting Elements
   $
   

   View Slide

10. getElementById
    $('#content')
    

    View Slide

11. getElementsByClassName
    $('.post')
    

    View Slide

12. getElementsByTagName
    $('p')
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

16. .html()
    
    A paragraph.
    
    <br/>$('#content').html();<br/>// Same concept as innerHTML<br/>// <p>A paragraph.</p><br/>$('#content').html('<p>New content.</p>');<br/>// Same concept as innerHTML = '';<br/>// #content's inner html would now be <p>New content.</p><br/>
    http://docs.jquery.com/Attributes
    

    View Slide

17. .css()
    
    It's an HTTParty and Everyone is Invited
    Here is the text for the post.
    
    <br/>// sets the text color of div#post-1 to green<br/>$('#post-1').css('color', 'green');<br/>// sets the background color of div#post-1 to red<br/>$('#post-1').css('background', 'red');<br/>
    http://docs.jquery.com/CSS
    

    View Slide

18. .attr()
    
    It's an HTTParty and Everyone is Invited
    Here is the text for the post.
    
    <br/>// gets the id attribute of #post-1<br/>$('#post-1').attr('id'); // "post-1"<br/>// sets the id attribute of #post-1 to some-new-id<br/>$('#post-1').attr('id', 'some-new-id');<br/>
    http://docs.jquery.com/Attributes
    

    View Slide

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
    

    View Slide