jQuery Selecting and Manipulating (continued)

Selecting and Manipulating Elements Tuesday, November 10, 2009

Review!!! Tuesday, November 10, 2009

$('div') Tuesday, November 10, 2009

$('div') get all div elements Tuesday, November 10, 2009

$('.article') Tuesday, November 10, 2009

$('.article') get elements with class name article Tuesday, November 10, 2009

$('#content') Tuesday, November 10, 2009

$('#content') get element with id attribute of content Tuesday, November 10, 2009

$('.article').each(function() { // what is diff between // this and $(this) here this; $(this); }); Tuesday, November 10, 2009

$('.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

$('.article').each(function() { $(this).css('background', 'pink'); }); Tuesday, November 10, 2009

$('.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

$('.article').each(function() { $(this).css('color', 'pink'); }); Tuesday, November 10, 2009

$('.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

$('.article').each(function() { alert($(this).html()); }); Tuesday, November 10, 2009

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

New Today!!! Tuesday, November 10, 2009

.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

.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

.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

.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(); // <p>My paragraph.</p> </script> .text(val) escapes HTML entities like <, > and &. Tuesday, November 10, 2009

.append best way to insert content inside of an element at the end http://docs.jquery.com/Manipulation/append Tuesday, November 10, 2009

<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>  <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

.prepend best way to insert content inside of an element at the beginning http://docs.jquery.com/Manipulation/prepend Tuesday, November 10, 2009

<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>  <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

.remove removes all matched elements from the DOM http://docs.jquery.com/Manipulation/remove Tuesday, November 10, 2009

<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>  <ul id="todo-list"> <li id="todo-teach">Teach class</li> </ul> #todo-prep was removed Tuesday, November 10, 2009

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

Assignment10 http://teaching.johnnunemaker.com/capp-30550/sessions/ jquery-manipulating-and-selecting-elements-continued/ Tuesday, November 10, 2009

http://teaching.johnnunemaker.com	157
http://www.mysrc.de	28
http://www.slideshare.net	5

jQuery Selecting and Manipulating (continued)

by John Nunemaker on Nov 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 190

Statistics

jQuery Selecting and Manipulating (continued) — Presentation Transcript