how to use the dom manipulation and traversal...

Chapter 9

Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 1

How to use the DOM manipulation

and traversal methods

How to use the DOM manipulation and traversal methods

Objectives


Applied 1. Use any of the DOM manipulation or traversal methods to develop

jQuery applications.

Knowledge 1. In general terms, describe the use of the jQuery methods for working

with attributes, including class attributes. 2. In general terms, describe the jQuery methods for DOM replacement,

insertion, cloning, wrapping, and removal. 3. In general terms, describe the jQuery methods for working with styles

and positioning elements. 4. In general terms, describe the jQuery methods for tree traversal and

filtering. 5. Explain how the jQuery end method affects object chaining.

Applied

1. Use any of the DOM manipulation or traversal methods to develop jQuery applications.

Knowledge

1. In general terms, describe the use of the jQuery methods for working with attributes, including class attributes.

2. In general terms, describe the jQuery methods for DOM replacement, insertion, cloning, wrapping, and removal.

3. In general terms, describe the jQuery methods for working with styles and positioning elements.

4. In general terms, describe the jQuery methods for tree traversal and filtering.

5. Explain how the jQuery end method affects object chaining.

The methods for working with attributes


attr(name)

attr(name, value)

attr(map)

attr(name, function)

removeAttr(name)

attr(name)

attr(name, value)

attr(map)

attr(name, function)

removeAttr(name)

Attribute examples


Set the value of the src attribute of an image to the value of a variable $("#image").attr("src", "book1.jpg");

Use a map to set the values of two attributes $("#image").attr( {"src": "book1.jpg", "alt": "Book 1" } );

Use a function to set the value of the href attribute of each element $("aside a").attr("href", function(index) { var href = "#heading" + (index + 1); return href; });

Remove the id attribute from all h2 elements within the faqs element $("#faqs h2").removeAttr("id");

Set the value of the src attribute of an image to the value of a variable

$("#image").attr("src", "book1.jpg");

Use a map to set the values of two attributes

$("#image").attr( {"src": "book1.jpg", "alt": "Book 1" } );

Use a function to set the value of the href attribute of each element

$("aside a").attr("href", function(index) {

var href = "#heading" + (index + 1);

return href;

});

Remove the id attribute from all h2 elements within the faqs element

$("#faqs h2").removeAttr("id");

The methods for working with class attributes


hasClass(name)

addClass(name)

addClass(function)

removeClass(name)

removeClass(function)

toggleClass(name)

toggleClass(function)

hasClass(name)

addClass(name)

addClass(function)

removeClass(name)

removeClass(function)

toggleClass(name)

toggleClass(function)

Class attribute examples


Test whether an element has a closed value in its class attribute if ($("#faqs").hasClass("closed")) { ... }

Add a class to the h2 descendants of the faqs element $("#faqs h2").addClass("minus");

Remove the minus class from the class attribute of the h2 descendants $("#faqs h2").removeClass("minus");

Test whether an element has a closed value in its class attribute

if ($("#faqs").hasClass("closed")) { ... }

Add a class to the h2 descendants of the faqs element

$("#faqs h2").addClass("minus");

Remove the minus class from the class attribute of the h2 descendants

$("#faqs h2").removeClass("minus");

The methods for DOM replacement


val()

val(value)

val(function)

text()

text(textString)

text(function)

html()

html(htmlString)

html(function)

replaceWith(content)

replaceAll(target)

val()

val(value)

val(function)

text()

text(textString)

text(function)

html()

html(htmlString)

html(function)

replaceWith(content)

replaceAll(target)

DOM replacement examples


Display all of the HTML in the aside element alert($("aside").html());

Put an h2 element into an aside element $("aside").html("Table of contents");

Replace all elements that have a class named old with an h2 element $(".old").replaceWith("");

Replace all elements that have a class named old with an h2 element $("").replaceAll(".old");

Display all of the HTML in the aside element

alert($("aside").html());

Put an h2 element into an aside element

$("aside").html("Table of contents");

Replace all elements that have a class named old with an h2 element

$(".old").replaceWith("");

Replace all elements that have a class named old with an h2 element

$("").replaceAll(".old");

The methods for DOM insertion and cloning


prepend(content)

prepend(function)

prependTo(target)

append(content)

append(function)

appendTo(target)

before(content)

before(function)

insertBefore(target)

after(content)

after(function)

insertAfter(target)

clone([withEvents])

prepend(content)

prepend(function)

prependTo(target)

append(content)

append(function)

appendTo(target)

before(content)

before(function)

insertBefore(target)

after(content)

after(function)

insertAfter(target)

clone([withEvents])

DOM insertion and cloning examples


Insert an h2 element at the end of an aside element $("aside").append("Table of contents");

Insert an element after the last

element in an article $("article p:last").after( "Back to top");

Insert the elements in an article after the h2 elements in an aside ("article a").insertAfter($("aside h2"));

Clone the elements and insert them after the h2 element in an aside element ("article a").clone().insertAfter($("aside h2"));

Insert an h2 element at the end of an aside element

$("aside").append("Table of contents");

Insert an element after the last

element in an article

$("article p:last").after(

"Back to top");

Insert the elements in an article after the h2 elements in an aside

("article a").insertAfter($("aside h2"));

Clone the elements and insert them after the h2 element in an aside element

("article a").clone().insertAfter($("aside h2"));

The methods for DOM wrapping and removal


wrap(element)

wrap(function)

wrapAll(element)

wrapInner(element)

wrapInner(function)

empty()

remove([selector])

unwrap()

wrap(element)

wrap(function)

wrapAll(element)

wrapInner(element)

wrapInner(function)

empty()

remove([selector])

unwrap()

DOM wrapping and removal examples


Wrap all elements in h2 elements $("a").wrap("");

Wrap the h1 text in an element $("article h1").wrapInner("");

Remove the first element in an article $("article a:first").remove();

Wrap all elements in h2 elements

$("a").wrap("");

Wrap the h1 text in an element

$("article h1").wrapInner("");

Remove the first element in an article

$("article a:first").remove();

The user interface for the TOC application


The HTML for the TOC application


7 reasons why trainers like our books Modular book organization

In the first section or two of all our books, ...

Whenever possible, each of the chapters is also ...
Top-down chapter design
Unlike many competing books and products, ...

7 reasons why trainers like our books

Modular book organization

In the first section or two of all our books,

...

Whenever possible, each of the chapters is

also ...



How the jQuery will modify the DOM


7 reasons why trainers like our books Table of contents Modular book organization Top-down chapter design Modular book organization


Back to top Top-down chapter design puts
Back to top
7 reasons why trainers like our books

Table of contents






Back to top

Top-down chapter design puts


Back to top

The jQuery plan for the TOC application


Add the h2 element for the Table of contents heading to the aside.

Wrap the text of the h2 elements in the article with elements. Add the correct id attributes to the elements in the article. Clone the elements in the article and insert them after the h2

element in the aside. Remove the id attributes from the elements in the aside. Add the correct href attributes to the elements in the aside. Wrap an element with top as its id around the text in the h1

element. Insert elements that go to the h1 element at the end of each

topic.

Add the h2 element for the Table of contents heading to the aside.

Wrap the text of the h2 elements in the article with elements.

Add the correct id attributes to the elements in the article.

Clone the elements in the article and insert them after the h2 element in the aside.

Remove the id attributes from the elements in the aside.

Add the correct href attributes to the elements in the aside.

Wrap an element with top as its id around the text in the h1 element.

Insert elements that go to the h1 element at the end of each topic.

The jQuery for the TOC application


$(document).ready(function() { // add h2 heading to the aside $("aside").append("Table of contents"); // wrap h2 text in article in tags $("article h2").wrapInner(""); // add ids to the a tags $("article a").each (function(index) { var id = "heading" + (index + 1); $(this).attr("id", id); }); // clone the tags in the article // and insert them into the aside $("article a").clone().insertAfter($("aside h2")); // remove the id attributes from the tags // in the aside $("aside a").removeAttr("id");

$(document).ready(function() {

// add h2 heading to the aside

$("aside").append("Table of contents");

// wrap h2 text in article in tags

$("article h2").wrapInner("");

// add ids to the a tags

$("article a").each (function(index) {

var id = "heading" + (index + 1);

$(this).attr("id", id);

});

// clone the tags in the article

// and insert them into the aside

$("article a").clone().insertAfter($("aside h2"));

// remove the id attributes from the tags

// in the aside

$("aside a").removeAttr("id");

The jQuery for the TOC application (continued)


// add the href attributes to the tags // in the aside $("aside a").attr("href", function(index) { var href = "#heading" + (index + 1); return href; }); // wrap an tag around the h1 text $("h1").wrapInner(""); // insert "back to top" tags after each topic $("article h2").before( "Back to top"); $("article a:first").remove(); $("article p:last").after( "Back to top"); })

// add the href attributes to the tags

// in the aside

$("aside a").attr("href", function(index) {

var href = "#heading" + (index + 1);

return href;

});

// wrap an tag around the h1 text

$("h1").wrapInner("");

// insert "back to top" tags after each topic

$("article h2").before(

"Back to top");

$("article a:first").remove();

$("article p:last").after(

"Back to top");

})

The methods for working with styles


css(name)

css(name, value)

css(map)

css(name, function)

height()

height(value)

innerHeight()

outerHeight([includeMargin])

width()

width(value)

innerWidth()

outerWidth([includeMargin])

css(name)

css(name, value)

css(map)

css(name, function)

height()

height(value)

innerHeight()

outerHeight([includeMargin])

width()

width(value)

innerWidth()

outerWidth([includeMargin])

Style examples


Set the CSS color property for all h2 elements to blue $(h2).css("color", "blue");

Use a map to set two CSS properties for all h2 elements $(h2).css( { "color": "blue", "font-size": "150%" } );

Get the height of an article element var height = $("article").height();

Set the CSS color property for all h2 elements to blue

$(h2).css("color", "blue");

Use a map to set two CSS properties for all h2 elements

$(h2).css( { "color": "blue", "font-size": "150%" } );

Get the height of an article element

var height = $("article").height();

The methods for positioning elements


offset()

offset(coordinates)

position()

scrollTop()

scrollTop(value)

scrollLeft()

scrollLeft(value)

offset()

offset(coordinates)

position()

scrollTop()

scrollTop(value)

scrollLeft()

scrollLeft(value)

Positioning examples


Get the top offset for an article element var offsetTop = $("article").offset().top;

Set the offset coordinates for an aside element var asideCoordinates = new Object(); asideCoordinates.top = 200; asideCoordinates.left = 100; $("aside").offset(asideCoordinates);

Move the scroll bar for the window to the top $(window).scrollTop(0);

Get the top offset for an article element

var offsetTop = $("article").offset().top;

Set the offset coordinates for an aside element

var asideCoordinates = new Object();

asideCoordinates.top = 200;

asideCoordinates.left = 100;

$("aside").offset(asideCoordinates);

Move the scroll bar for the window to the top

$(window).scrollTop(0);

A TOC that moves to the selected topic


The critical CSS for the TOC application body { position: relative; } aside { position: absolute; }

The critical CSS for the TOC application

body { position: relative; }

aside { position: absolute; }

The jQuery event handler that has been added


// change the CSS for the selected topic and move the TOC $("aside a").click (function() { // derive the id of the selected h2 element from the tag id = $(this).attr("href"); // value of href attribute // in tag // change the styles for the selected heading $(id).css({ "color": "blue", "font-size": "150%" }); // move the aside so it is next to the selected heading var h2Offset = $(id).offset().top; // top offset of h2 var asideHeight = $("aside").height(); // height of aside var articleHeight = $("article").height(); // height of article if ((h2Offset + asideHeight)

The tree traversal methods


siblings([selector])

next([selector])

nextAll([selector])

nextUntil(selector)

prev([selector])

prevAll([selector])

prevUntil(selector)

children([selector])

parents([selector])

parentsUntil(selector)

parent([selector])

offsetParent()

closest(selector[, context])

find(selector)

siblings([selector])

next([selector])

nextAll([selector])

nextUntil(selector)

prev([selector])

prevAll([selector])

prevUntil(selector)

children([selector])

parents([selector])

parentsUntil(selector)

parent([selector])

offsetParent()

closest(selector[, context])

find(selector)

Tree traversal examples


Get the previous paragraph sibling of an element var previousParagraph = $("#last_heading").prev("p");

Get the parent of an element var parent = $("#faqs").parent();

Get all span elements within

elements with an article element $("article p").find("span").css("color", "red");

Get the previous paragraph sibling of an element

var previousParagraph = $("#last_heading").prev("p");

Get the parent of an element

var parent = $("#faqs").parent();

Get all span elements within

elements with an article element

$("article p").find("span").css("color", "red");

The filtering methods


filter(selector)

filter(function)

not(selector)

not(elements)

not(function)

has(selector)

eq(index)

first()

last()

slice(start[, end])

end()

filter(selector)

filter(function)

not(selector)

not(elements)

not(function)

has(selector)

eq(index)

first()

last()

slice(start[, end])

end()

Filtering method examples


Change a property for h2 elements in the best class $("h2").filter(".best").css("color", "red");

Change a property for all

elements except the ones in the first class $("p").not(".first").css("text-indent", "1.5em");

Hide all images in the slides element except for the one with index 0 $("#slides img").slice(1).hide();

Work with the images in a set $("#slides img") .first().fadeOut(1000) // fade out first img element .next().fadeIn(1000) // fade in the next element .end() // return to first element .appendTo("#slides"); // append first element // to end of set

Change a property for h2 elements in the best class

$("h2").filter(".best").css("color", "red");

Change a property for all

elements except the ones in the first class

$("p").not(".first").css("text-indent", "1.5em");

Hide all images in the slides element except for the one with index 0

$("#slides img").slice(1).hide();

Work with the images in a set

$("#slides img")

.first().fadeOut(1000) // fade out first img element

.next().fadeIn(1000) // fade in the next element

.end() // return to first element

.appendTo("#slides"); // append first element

// to end of set

A Slide Show application


The HTML for the slide show application


Current Books Slide Show

The critical CSS for the slide show application #slides img { position: absolute; }

Current Books Slide Show

The critical CSS for the slide show application

#slides img { position: absolute; }

One way to write the jQuery code for the slide show application


$(document).ready(function() { $("#slides img").slice(1).hide(); setInterval(function(){ // fade out 1st image $("#slides img").first().fadeOut(1000) // fade in next image .next().fadeIn(1000) // return object to 1st image .end() // move 1st image to last .appendTo("#slides"); }, 3000); });



setInterval(function(){

// fade out 1st image

$("#slides img").first().fadeOut(1000)

// fade in next image

.next().fadeIn(1000)

// return object to 1st image

.end()

// move 1st image to last

.appendTo("#slides");

}, 3000);

});

Another way to write the jQuery code for the slide show application


$(document).ready(function() { $("#slides img").slice(1).hide(); var slideIndex = 0, topIndex = $("#slides img").length - 1; setInterval(function(){ $("#slides img").eq(slideIndex).fadeOut(1000); if (slideIndex < topIndex) { $("#slides img").eq(slideIndex).next().fadeIn( 1000); slideIndex++ } else { $("#slides img").eq(0).fadeIn(1000); slideIndex = 0; } }, 3000); });



var slideIndex = 0,

topIndex = $("#slides img").length - 1;

setInterval(function(){

$("#slides img").eq(slideIndex).fadeOut(1000);

if (slideIndex < topIndex) {

$("#slides img").eq(slideIndex).next().fadeIn(

1000);

slideIndex++ }

else {

$("#slides img").eq(0).fadeIn(1000);

slideIndex = 0; }

}, 3000);

});

Exercise 9-1: Modify the TOC application


Extra 9-1: Modify a Placeholder application


Display information for just the selected speaker.

Display information for just the selected speaker.

Extra 9-2: Modify a slide show to use buttons


Extra 9-3: Add pull quotes to an article


Short 9-1: Scroll to the top of a window


Estimated time: 10 to 15 minutes.


Short 9-2: Modify the FAQs application



When youre done, only one answer should be displayed at a time.


When youre done, only one answer should be displayed at a time.

10/28/15 3:44 PMChapter 09 Word slides.docxSlide 1

Chapter 9ObjectivesThe methods for working with attributesAttribute examplesThe methods for working with class attributesClass attribute examplesThe methods for DOM replacementDOM replacement examplesThe methods for DOM insertion and cloningDOM insertion and cloning examplesThe methods for DOM wrapping and removalDOM wrapping and removal examplesThe user interface for the TOC applicationThe HTML for the TOC applicationHow the jQuery will modify the DOMThe jQuery plan for the TOC applicationThe jQuery for the TOC applicationThe jQuery for the TOC application (continued)The methods for working with stylesStyle examplesThe methods for positioning elementsPositioning examplesA TOC that moves to the selected topicThe jQuery event handler that has been addedThe tree traversal methodsTree traversal examplesThe filtering methodsFiltering method examplesA Slide Show applicationThe HTML for the slide show applicationOne way to write the jQuery code for the slide show applicationAnother way to write the jQuery code for the slide show applicationExercise 9-1: Modify the TOC applicationExtra 9-1: Modify a Placeholder applicationExtra 9-2: Modify a slide show to use buttonsExtra 9-3: Add pull quotes to an articleShort 9-1: Scroll to the top of a windowShort 9-2: Modify the FAQs application

how to use the dom manipulation and traversal...

Documents