Save 37% off PRO during our Black Friday Sale! »

jQuery - Selecting

jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

88bc30284c6a424b63a92aad27d0ba36?s=128

John Nunemaker
PRO

October 20, 2010
Tweet

Transcript

  1. Selecting and Manipulating Elements

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

    HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  3. Lightweight

  4. CSS3 Compliant

  5. Cross-browser

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

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

  9. Selecting Elements $

  10. getElementById $('#content')

  11. getElementsByClassName $('.post')

  12. getElementsByTagName $('p')

  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.
  14. Looping Through Elements $('.post').each(function() { this; // equal to dom

    element });
  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.
  16. .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
  17. .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
  18. .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
  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