Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery - Selecting

jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

John Nunemaker
PRO

October 20, 2010
Tweet

More Decks by John Nunemaker

Other Decks in Programming

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