jQuery Selecting and Manipulating (continued)

Selecting and Manipulating Elements

Tuesday, November 10, 2009

Review!!!


$('div')


$('div')get all div elements


$('.article')


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


$('#content')


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


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

$(this);});


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


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


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

get all elements with class name of article and change their background to pink


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


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

get all elements with class name of article and change their text color to pink


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


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

get all elements with class name of article and alert their innerHTML


New Today!!!


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


http://docs.jquery.com/Attributes/text

http://docs.jquery.com/Attributes/text

.html() vs .text()


<script type="text/javascript"> $('#content').html(); // <p>This is my <strong>paragraph</strong>.</p> $('#content').text(); // This is my paragraph</script>


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


<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

http://docs.jquery.com/Attributes/text#val

http://docs.jquery.com/Attributes/text#val

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


.append

http://docs.jquery.com/Manipulation/append

best way to insert content inside of an element at the end




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

this was added


.prependbest way to insert content inside of an element at the beginning

http://docs.jquery.com/Manipulation/prepend




<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> <li>Prep for class</li> <li>Teach class</li></ul>

this was added


.removeremoves all matched

elements from the DOMhttp://docs.jquery.com/Manipulation/remove


http://docs.jquery.com/Manipulation/remove

http://docs.jquery.com/Manipulation/remove

<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


Other Manipulation Methods

http://docs.jquery.com/Manipulation

appendTo, prependTo, after, before, insertAfter, insertBefore, wrap, wrapAll, wrapInner, replaceWith, replaceAll, empty, clone




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

Assignment10

Technology

jQuery Selecting and Manipulating (continued)