Your SlideShare is downloading. ×
0
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
jQuery Selecting and Manipulating (continued)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Selecting and Manipulating (continued)

1,634

Published on

More on jQuery manipulation methods.

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
1,634
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Selecting and Manipulating Elements Tuesday, November 10, 2009
  • 2. Review!!! Tuesday, November 10, 2009
  • 3. $('div') Tuesday, November 10, 2009
  • 4. $('div') get all div elements Tuesday, November 10, 2009
  • 5. $('.article') Tuesday, November 10, 2009
  • 6. $('.article') get elements with class name article Tuesday, November 10, 2009
  • 7. $('#content') Tuesday, November 10, 2009
  • 8. $('#content') get element with id attribute of content Tuesday, November 10, 2009
  • 9. $('.article').each(function() { // what is diff between // this and $(this) here this; $(this); }); Tuesday, November 10, 2009
  • 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. $('.article').each(function() { $(this).css('background', 'pink'); }); Tuesday, November 10, 2009
  • 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. $('.article').each(function() { $(this).css('color', 'pink'); }); Tuesday, November 10, 2009
  • 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. $('.article').each(function() { alert($(this).html()); }); Tuesday, November 10, 2009
  • 16. $('.article').each(function() { alert($(this).html()); }); get all elements with class name of article and alert their innerHTML Tuesday, November 10, 2009
  • 17. New Today!!! Tuesday, November 10, 2009
  • 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. .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. .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. .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. .append best way to insert content inside of an element at the end http://docs.jquery.com/Manipulation/append Tuesday, November 10, 2009
  • 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. .prepend best way to insert content inside of an element at the beginning http://docs.jquery.com/Manipulation/prepend Tuesday, November 10, 2009
  • 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. .remove removes all matched elements from the DOM http://docs.jquery.com/Manipulation/remove Tuesday, November 10, 2009
  • 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. 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. Assignment10 http://teaching.johnnunemaker.com/capp-30550/sessions/ jquery-manipulating-and-selecting-elements-continued/ Tuesday, November 10, 2009

×