$30 off During Our Annual Pro Sale. View Details »

jQuery - Selecting

jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

John Nunemaker

October 20, 2010
Tweet

More Decks by John Nunemaker

Other Decks in Programming

Transcript

  1. jQuery is a fast and concise JavaScript Library that simplifies

    HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  2. 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.
  3. jQuery Methods Each jQuery object comes with a ton of

    methods for getting/setting attributes, manipulating and traversing elements, observing events and interface effects.
  4. .html() <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> http://docs.jquery.com/Attributes
  5. .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> http://docs.jquery.com/CSS
  6. .attr() <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> http://docs.jquery.com/Attributes