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

jQuery - Selecting

jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

Avatar for John Nunemaker

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