Tweet
Tweet

Slide 1

Slide 1 text

Selecting and Manipulating Elements Thursday, November 5, 2009

Slide 2

Slide 2 text

jQuery is a fast and concise JavaScript Library that simpliļ¬es HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Thursday, November 5, 2009

Slide 3

Slide 3 text

Lightweight Thursday, November 5, 2009

Slide 4

Slide 4 text

CSS3 Compliant Thursday, November 5, 2009

Slide 5

Slide 5 text

Cross-browser Thursday, November 5, 2009

Slide 6

Slide 6 text

Thursday, November 5, 2009

Slide 7

Slide 7 text

Links http://jquery.com/ http://docs.jquery.com/ http://docs.jquery.com/Tutorials http://plugins.jquery.com/ http://jqueryui.com/ Thursday, November 5, 2009

Slide 8

Slide 8 text

jQuery is all about selecting elements and manipulating them. Thursday, November 5, 2009

Slide 9

Slide 9 text

Selecting Elements $ Thursday, November 5, 2009

Slide 10

Slide 10 text

getElementById $('#content') Thursday, November 5, 2009

Slide 11

Slide 11 text

getElementsByClassName $('.post') Thursday, November 5, 2009

Slide 12

Slide 12 text

getElementsByTagName $('p') Thursday, November 5, 2009

Slide 13

Slide 13 text

get elements by any css selector $('#content div.post a') Get all a elements inside a div with a class of post that is inside an element with an id of content. Thursday, November 5, 2009

Slide 14

Slide 14 text

Looping Through Elements $('.post').each(function() { this; // equal to dom element }); Thursday, November 5, 2009

Slide 15

Slide 15 text

jQuery Methods Each jQuery object comes with a ton of methods for getting/setting attributes, manipulating and traversing elements, observing events and interface effects. Thursday, November 5, 2009

Slide 16

Slide 16 text

.html()

A paragraph.

$('#content').html(); // Same concept as innerHTML // <p>A paragraph.</p> $('#content').html('<p>New content.</p>'); // Same concept as innerHTML = ''; // #content's inner html would now be <p>New content.</p> http://docs.jquery.com/Attributes Thursday, November 5, 2009

Slide 17

Slide 17 text

.css()

It's an HTTParty and Everyone is Invited

Here is the text for the post.

// sets the text color of div#post-1 to green $('#post-1').css('color', 'green'); // sets the background color of div#post-1 to red $('#post-1').css('background', 'red'); http://docs.jquery.com/CSS Thursday, November 5, 2009

Slide 18

Slide 18 text

.attr()

It's an HTTParty and Everyone is Invited

Here is the text for the post.

// gets the id attribute of #post-1 $('#post-1').attr('id'); // "post-1" // sets the id attribute of #post-1 to some-new-id $('#post-1').attr('id', 'some-new-id'); http://docs.jquery.com/Attributes Thursday, November 5, 2009

Slide 19

Slide 19 text

Assignment09 http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements/ http://docs.jquery.com/Selectors http://docs.jquery.com/Attributes http://docs.jquery.com/CSS Thursday, November 5, 2009