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.

Transcript

1. Selecting and Manipulating Elements Thursday, November 5, 2009
2. 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
3. Lightweight Thursday, November 5, 2009
4. CSS3 Compliant Thursday, November 5, 2009
5. Cross-browser Thursday, November 5, 2009
6. Thursday, November 5, 2009
7. Links http://jquery.com/ http://docs.jquery.com/ http://docs.jquery.com/Tutorials http://plugins.jquery.com/ http://jqueryui.com/ Thursday, November 5, 2009
8. jQuery is all about selecting elements and manipulating them. Thursday, November 5, 2009
9. Selecting Elements $ Thursday, November 5, 2009
10. getElementById $('#content') Thursday, November 5, 2009
11. getElementsByClassName $('.post') Thursday, November 5, 2009
12. getElementsByTagName $('p') Thursday, November 5, 2009
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. Thursday, November 5, 2009
14. Looping Through Elements $('.post').each(function() { this; // equal to dom element }); Thursday, November 5, 2009
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. Thursday, November 5, 2009
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 Thursday, November 5, 2009
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 Thursday, November 5, 2009
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 Thursday, November 5, 2009
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 Thursday, November 5, 2009