jQuery - Manipulating

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

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