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

jQuery Introduction

John Nunemaker
November 05, 2009
14

jQuery Introduction

This document discusses selecting and manipulating elements with jQuery. It explains that jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions. It then discusses selecting elements by ID, class, tag name, or CSS selector. It also covers looping through elements and common jQuery methods like html(), css(), and attr() for manipulating element content, styles, and attributes.

John Nunemaker

November 05, 2009
Tweet

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. Thursday, November 5, 2009
  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. Thursday, November 5, 2009
  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. Thursday, November 5, 2009
  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 Thursday, November 5, 2009
  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 Thursday, November 5, 2009
  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 Thursday, November 5, 2009