jQuery Selecting and Manipulating (continued)

2,017 views

Published on

More on jQuery manipulation methods.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,017
On SlideShare
0
From Embeds
0
Number of Embeds
215
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Selecting and Manipulating (continued)

  1. 1. Selecting and Manipulating Elements Tuesday, November 10, 2009
  2. 2. Review!!! Tuesday, November 10, 2009
  3. 3. $('div') Tuesday, November 10, 2009
  4. 4. $('div') get all div elements Tuesday, November 10, 2009
  5. 5. $('.article') Tuesday, November 10, 2009
  6. 6. $('.article') get elements with class name article Tuesday, November 10, 2009
  7. 7. $('#content') Tuesday, November 10, 2009
  8. 8. $('#content') get element with id attribute of content Tuesday, November 10, 2009
  9. 9. $('.article').each(function() { // what is diff between // this and $(this) here this; $(this); }); Tuesday, November 10, 2009
  10. 10. $('.article').each(function() { // what is diff between // this and $(this) here this; $(this); }); this is a plain DOM element, $(this) is a DOM element bestowed with the power of jQuery Tuesday, November 10, 2009
  11. 11. $('.article').each(function() { $(this).css('background', 'pink'); }); Tuesday, November 10, 2009
  12. 12. $('.article').each(function() { $(this).css('background', 'pink'); }); get all elements with class name of article and change their background to pink Tuesday, November 10, 2009
  13. 13. $('.article').each(function() { $(this).css('color', 'pink'); }); Tuesday, November 10, 2009
  14. 14. $('.article').each(function() { $(this).css('color', 'pink'); }); get all elements with class name of article and change their text color to pink Tuesday, November 10, 2009
  15. 15. $('.article').each(function() { alert($(this).html()); }); Tuesday, November 10, 2009
  16. 16. $('.article').each(function() { alert($(this).html()); }); get all elements with class name of article and alert their innerHTML Tuesday, November 10, 2009
  17. 17. New Today!!! Tuesday, November 10, 2009
  18. 18. .text() http://docs.jquery.com/Attributes/text <div id="content"> <p>This is my <strong>paragraph</strong>.</p> </div> <script type="text/javascript"> $('#content').text(); // This is my paragraph </script> Removes all HTML tags and returns just plain text. Tuesday, November 10, 2009
  19. 19. .html() vs .text() <div id="content"> <p>This is my <strong>paragraph</strong>.</p> </div> <script type="text/javascript"> $('#content').html(); // <p>This is my <strong>paragraph</strong>.</p> $('#content').text(); // This is my paragraph </script> Tuesday, November 10, 2009
  20. 20. .text(val) http://docs.jquery.com/Attributes/text#val <div id="content"> <p>This is my <strong>paragraph</strong>.</p> </div> <script type="text/javascript"> $('#content').text('This is my paragraph.'); </script> <div id="content"> This is my paragraph. </div> Sets the plain text of the element. Escapes any HTML. Tuesday, November 10, 2009
  21. 21. .html(val) vs .text(val) <div id="content"> <p>This is my paragraph.</p> </div> <script type="text/javascript"> $('#content').html('<p>My paragraph.</p>'); $('#content').html(); // <p>My paragraph.</p> $('#content').text('<p>My paragraph.</p>'); $('#content').html(); // &lt;p&gt;My paragraph.&lt;/p&gt; </script> .text(val) escapes HTML entities like <, > and &. Tuesday, November 10, 2009
  22. 22. .append best way to insert content inside of an element at the end http://docs.jquery.com/Manipulation/append Tuesday, November 10, 2009
  23. 23. <ul id="todo-list"> <li>Prep for class</li> <li>Teach class</li> </ul> <script type="text/javascript"> $('#todo-list').append('<li>Demo append to students</li>'); </script> <!-- list is now --> <ul id="todo-list"> <li>Prep for class</li> <li>Teach class</li> <li>Demo append to students</li> this was added </ul> Tuesday, November 10, 2009
  24. 24. .prepend best way to insert content inside of an element at the beginning http://docs.jquery.com/Manipulation/prepend Tuesday, November 10, 2009
  25. 25. <ul id="todo-list"> <li>Prep for class</li> <li>Teach class</li> </ul> <script type="text/javascript"> $('#todo-list').prepend('<li>Wake up and drink coffee</li>'); </script> <!-- list is now --> <ul id="todo-list"> <li>Wake up and drink coffee</li> this was added <li>Prep for class</li> <li>Teach class</li> </ul> Tuesday, November 10, 2009
  26. 26. .remove removes all matched elements from the DOM http://docs.jquery.com/Manipulation/remove Tuesday, November 10, 2009
  27. 27. <ul id="todo-list"> <li id="todo-prep">Prep for class</li> <li id="todo-teach">Teach class</li> </ul> <script type="text/javascript"> $('#todo-prep').remove(); </script> <!-- list is now --> <ul id="todo-list"> <li id="todo-teach">Teach class</li> </ul> #todo-prep was removed Tuesday, November 10, 2009
  28. 28. Other Manipulation Methods appendTo, prependTo, after, before, insertAfter, insertBefore, wrap, wrapAll, wrapInner, replaceWith, replaceAll, empty, clone http://docs.jquery.com/Manipulation Tuesday, November 10, 2009
  29. 29. Assignment10 http://teaching.johnnunemaker.com/capp-30550/sessions/ jquery-manipulating-and-selecting-elements-continued/ Tuesday, November 10, 2009

×