Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery - Manipulating

jQuery - Manipulating

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

John Nunemaker
PRO

October 20, 2010
Tweet

More Decks by John Nunemaker

Other Decks in Programming

Transcript

  1. Selecting and Manipulating Elements

    View Slide

  2. Review!!!

    View Slide

  3. $('div')

    View Slide

  4. $('div')
    get all div elements

    View Slide

  5. $('.article')

    View Slide

  6. $('.article')
    get elements with class name article

    View Slide

  7. $('#content')

    View Slide

  8. $('#content')
    get element with id attribute of content

    View Slide

  9. $('.article').each(function() {
    // what is diff between
    // this and $(this) here
    this;
    $(this);
    });

    View Slide

  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

    View Slide

  11. $('.article').each(function() {
    $(this).css('background', 'pink');
    });

    View Slide

  12. $('.article').each(function() {
    $(this).css('background', 'pink');
    });
    get all elements with class name of article
    and change their background to pink

    View Slide

  13. $('.article').each(function() {
    $(this).css('color', 'pink');
    });

    View Slide

  14. $('.article').each(function() {
    $(this).css('color', 'pink');
    });
    get all elements with class name of article
    and change their text color to pink

    View Slide

  15. $('.article').each(function() {
    alert($(this).html());
    });

    View Slide

  16. $('.article').each(function() {
    alert($(this).html());
    });
    get all elements with class name of article
    and alert their innerHTML

    View Slide

  17. New Today!!!

    View Slide

  18. .text()
    http://docs.jquery.com/Attributes/text

    This is my paragraph.

    <br/>$('#content').text(); // This is my paragraph<br/>
    Removes all HTML tags and returns just plain text.

    View Slide

  19. .html() vs .text()

    This is my paragraph.

    <br/>$('#content').html(); // <p>This is my <strong>paragraph</strong>.</p><br/>$('#content').text(); // This is my paragraph<br/>

    View Slide

  20. .text(val)
    http://docs.jquery.com/Attributes/text#val

    This is my paragraph.

    <br/>$('#content').text('This is my paragraph.');<br/>

    This is my paragraph.

    Sets the plain text of the element. Escapes any HTML.

    View Slide

  21. .html(val) vs .text(val)

    This is my paragraph.

    <br/>$('#content').html('<p>My paragraph.</p>');<br/>$('#content').html(); // <p>My paragraph.</p><br/>$('#content').text('<p>My paragraph.</p>');<br/>$('#content').html(); // &lt;p&gt;My paragraph.&lt;/p&gt;<br/>
    .text(val) escapes HTML entities like <, > and &.

    View Slide

  22. .append
    http://docs.jquery.com/Manipulation/append
    best way to insert content
    inside of an element at the end

    View Slide


  23. Prep for class
    Teach class

    <br/>$('#todo-list').append('<li>Demo append to students</li>');<br/>


    Prep for class
    Teach class
    Demo append to students

    this was added

    View Slide

  24. .prepend
    best way to insert content inside
    of an element at the beginning
    http://docs.jquery.com/Manipulation/prepend

    View Slide


  25. Prep for class
    Teach class

    <br/>$('#todo-list').prepend('<li>Wake up and drink coffee</li>');<br/>


    Wake up and drink coffee
    Prep for class
    Teach class

    this was added

    View Slide

  26. .remove
    removes all matched
    elements from the DOM
    http://docs.jquery.com/Manipulation/remove

    View Slide


  27. Prep for class
    Teach class

    <br/>$('#todo-prep').remove();<br/>


    Teach class

    #todo-prep was removed

    View Slide

  28. Other Manipulation Methods
    http://docs.jquery.com/Manipulation
    appendTo, prependTo, after, before, insertAfter,
    insertBefore, wrap, wrapAll, wrapInner,
    replaceWith, replaceAll, empty, clone

    View Slide

  29. http://teaching.johnnunemaker.com/capp-30550/sessions/
    jquery-manipulating-and-selecting-elements-continued/
    Assignment10

    View Slide