jQuery - Manipulating

Introduction to jQuery's text, html, append, prepend, and remove methods.

Transcript

1. Selecting and Manipulating Elements
2. Review!!!
3. $('div')
4. $('div') get all div elements
5. $('.article')
6. $('.article') get elements with class name article
7. $('#content')
8. $('#content') get element with id attribute of content
9. $('.article').each(function() { // what is diff between // this and $(this) here this; $(this); });
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
11. $('.article').each(function() { $(this).css('background', 'pink'); });
12. $('.article').each(function() { $(this).css('background', 'pink'); }); get all elements with class name of article and change their background to pink
13. $('.article').each(function() { $(this).css('color', 'pink'); });
14. $('.article').each(function() { $(this).css('color', 'pink'); }); get all elements with class name of article and change their text color to pink
15. $('.article').each(function() { alert($(this).html()); });
16. $('.article').each(function() { alert($(this).html()); }); get all elements with class name of article and alert their innerHTML
17. New Today!!!
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.
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>
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.
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 &.
22. .append http://docs.jquery.com/Manipulation/append best way to insert content inside of an element at the end
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> </ul> this was added
24. .prepend best way to insert content inside of an element at the beginning http://docs.jquery.com/Manipulation/prepend
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> <li>Prep for class</li> <li>Teach class</li> </ul> this was added
26. .remove removes all matched elements from the DOM http://docs.jquery.com/Manipulation/remove
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
28. Other Manipulation Methods http://docs.jquery.com/Manipulation appendTo, prependTo, after, before, insertAfter, insertBefore, wrap, wrapAll, wrapInner, replaceWith, replaceAll, empty, clone
29. http://teaching.johnnunemaker.com/capp-30550/sessions/ jquery-manipulating-and-selecting-elements-continued/ Assignment10