View
2.362
Download
0
Category
Preview:
DESCRIPTION
More on jQuery manipulation methods.
Citation preview
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
http://docs.jquery.com/Manipulation/append
best way to insert content inside of an element at the end
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>
<!-- 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
Tuesday, November 10, 2009
.prependbest 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>
<!-- 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
Tuesday, November 10, 2009
.removeremoves all matched
elements from the DOMhttp://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>
<!-- list is now --><ul id="todo-list"> <li id="todo-teach">Teach class</li></ul>
#todo-prep was removed
Tuesday, November 10, 2009
Other Manipulation Methods
http://docs.jquery.com/Manipulation
appendTo, prependTo, after, before, insertAfter, insertBefore, wrap, wrapAll, wrapInner, replaceWith, replaceAll, empty, clone
Tuesday, November 10, 2009
http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements-continued/
Assignment10
Tuesday, November 10, 2009
Recommended