jQuery - Selecting

Introduction to selecting DOM elements using jQuery.

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
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