Tweet
Tweet

Slide 1

Slide 1 text

Selecting and Manipulating Elements

Slide 2

Slide 2 text

Review!!!

Slide 3

Slide 3 text

$('div')

Slide 4

Slide 4 text

$('div') get all div elements

Slide 5

Slide 5 text

$('.article')

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

$('#content')

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

$('.article').each(function() { $(this).css('background', 'pink'); }); get all elements with class name of article and change their background to pink

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

$('.article').each(function() { $(this).css('color', 'pink'); }); get all elements with class name of article and change their text color to pink

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

New Today!!!

Slide 18

Slide 18 text

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

This is my paragraph.

$('#content').text(); // This is my paragraph Removes all HTML tags and returns just plain text.

Slide 19

Slide 19 text

.html() vs .text()

This is my paragraph.

$('#content').html(); // <p>This is my <strong>paragraph</strong>.</p> $('#content').text(); // This is my paragraph

Slide 20

Slide 20 text

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

This is my paragraph.

$('#content').text('This is my paragraph.');
This is my paragraph.
Sets the plain text of the element. Escapes any HTML.

Slide 21

Slide 21 text

.html(val) vs .text(val)

This is my paragraph.

$('#content').html('<p>My paragraph.</p>'); $('#content').html(); // <p>My paragraph.</p> $('#content').text('<p>My paragraph.</p>'); $('#content').html(); // &lt;p&gt;My paragraph.&lt;/p&gt; .text(val) escapes HTML entities like <, > and &.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

  • Prep for class
  • Teach class
$('#todo-list').append('<li>Demo append to students</li>');
  • Prep for class
  • Teach class
  • Demo append to students
this was added

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

  • Prep for class
  • Teach class
$('#todo-list').prepend('<li>Wake up and drink coffee</li>');
  • Wake up and drink coffee
  • Prep for class
  • Teach class
this was added

Slide 26

Slide 26 text

.remove removes all matched elements from the DOM http://docs.jquery.com/Manipulation/remove

Slide 27

Slide 27 text

  • Prep for class
  • Teach class
$('#todo-prep').remove();
  • Teach class
#todo-prep was removed

Slide 28

Slide 28 text

Other Manipulation Methods http://docs.jquery.com/Manipulation appendTo, prependTo, after, before, insertAfter, insertBefore, wrap, wrapAll, wrapInner, replaceWith, replaceAll, empty, clone

Slide 29

Slide 29 text

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