-
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 2
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 3
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 4
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 5
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 6
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 7
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 8
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 9
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 10
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 11
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 12
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 13
-
The HTML for the TOC application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 14
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 designUnlike 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 ...
Top-down chapter design
Unlike many competing books and products, ...
-
How the jQuery will modify the DOM
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 15
7 reasons why trainers like our books Table of contents Modular book organization Top-down chapter design Modular book organization
In the first section or two of all our books, ...
Whenever possible, each of the chapters is also ...
Back to top Top-down chapter design putsUnlike many competing books and products, ...
Back to top7 reasons why trainers like our books
Table of contents
Modular book organization
Top-down chapter design
Modular book organization
In the first section or two of all our books, ...
Whenever possible, each of the chapters is also ...
Back to top
Top-down chapter design puts
Unlike many competing books and products, ...
Back to top
-
The jQuery plan for the TOC application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 16
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 17
$(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)
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 18
// 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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 19
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 20
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 21
offset()
offset(coordinates)
position()
scrollTop()
scrollTop(value)
scrollLeft()
scrollLeft(value)
offset()
offset(coordinates)
position()
scrollTop()
scrollTop(value)
scrollLeft()
scrollLeft(value)
-
Positioning examples
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 22
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 23
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 24
// 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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 25
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 26
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 27
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 28
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 29
-
The HTML for the slide show application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 30
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
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 31
$(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); });
$(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);
});
-
Another way to write the jQuery code for the slide show application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 32
$(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); });
$(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);
});
-
Exercise 9-1: Modify the TOC application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 33
-
Extra 9-1: Modify a Placeholder application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 34
Display information for just the selected speaker.
Display information for just the selected speaker.
-
Extra 9-2: Modify a slide show to use buttons
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 35
-
Extra 9-3: Add pull quotes to an article
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 36
-
Short 9-1: Scroll to the top of a window
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 37
Estimated time: 10 to 15 minutes.
Estimated time: 10 to 15 minutes.
-
Short 9-2: Modify the FAQs application
Murach's JavaScript and jQuery, C9 2012, Mike Murach & Associates, Inc. Slide 38
Estimated time: 20 to 30 minutes.
When youre done, only one answer should be displayed at a time.
Estimated time: 20 to 30 minutes.
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