jQuery - Manipulating

jQuery - Manipulating

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

E13c31390e0369fcd5972292ce0e7b92?s=128

John Nunemaker

October 20, 2010
Tweet

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