jQuery Selecting and Manipulating (continued)
-
Upload
john-nunemaker -
Category
Technology
-
view
2.360 -
download
0
description
Transcript of jQuery Selecting and Manipulating (continued)
![Page 1: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/1.jpg)
Selecting and Manipulating Elements
Tuesday, November 10, 2009
![Page 2: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/2.jpg)
Review!!!
Tuesday, November 10, 2009
![Page 3: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/3.jpg)
$('div')
Tuesday, November 10, 2009
![Page 4: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/4.jpg)
$('div')get all div elements
Tuesday, November 10, 2009
![Page 5: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/5.jpg)
$('.article')
Tuesday, November 10, 2009
![Page 6: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/6.jpg)
$('.article')get elements with class name article
Tuesday, November 10, 2009
![Page 7: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/7.jpg)
$('#content')
Tuesday, November 10, 2009
![Page 8: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/8.jpg)
$('#content')get element with id attribute of content
Tuesday, November 10, 2009
![Page 9: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/9.jpg)
$('.article').each(function() { // what is diff between // this and $(this) here this;
$(this);});
Tuesday, November 10, 2009
![Page 10: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/10.jpg)
$('.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
![Page 11: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/11.jpg)
$('.article').each(function() { $(this).css('background', 'pink');});
Tuesday, November 10, 2009
![Page 12: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/12.jpg)
$('.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
![Page 13: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/13.jpg)
$('.article').each(function() { $(this).css('color', 'pink');});
Tuesday, November 10, 2009
![Page 14: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/14.jpg)
$('.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
![Page 15: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/15.jpg)
$('.article').each(function() { alert($(this).html());});
Tuesday, November 10, 2009
![Page 16: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/16.jpg)
$('.article').each(function() { alert($(this).html());});
get all elements with class name of article and alert their innerHTML
Tuesday, November 10, 2009
![Page 17: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/17.jpg)
New Today!!!
Tuesday, November 10, 2009
![Page 18: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/18.jpg)
.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
![Page 19: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/19.jpg)
.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
![Page 20: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/20.jpg)
.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
![Page 21: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/21.jpg)
.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
![Page 22: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/22.jpg)
.append
http://docs.jquery.com/Manipulation/append
best way to insert content inside of an element at the end
Tuesday, November 10, 2009
![Page 23: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/23.jpg)
<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
![Page 24: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/24.jpg)
.prependbest way to insert content inside of an element at the beginning
http://docs.jquery.com/Manipulation/prepend
Tuesday, November 10, 2009
![Page 25: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/25.jpg)
<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
![Page 26: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/26.jpg)
.removeremoves all matched
elements from the DOMhttp://docs.jquery.com/Manipulation/remove
Tuesday, November 10, 2009
![Page 27: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/27.jpg)
<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
![Page 28: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/28.jpg)
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
![Page 29: jQuery Selecting and Manipulating (continued)](https://reader033.fdocuments.us/reader033/viewer/2022051816/546df473b4af9f892c8b5632/html5/thumbnails/29.jpg)
http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements-continued/
Assignment10
Tuesday, November 10, 2009