PLEASE HELP
JAVA PLEASE
jqt.html:
<!DOCTYPE html>
<html>
<head>
<title>
JQuery DOM Traversal
</title>
<link rel="stylesheet"
type="text/css" href="demoJQT.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script type="text/javascript"
src="demoJQT.js"></script>
</head>
<body>
<div id="level4"> Level 4
div
<p>Para in Level
4</p>
<div
id="level3">Level 3 div
<a
id="level3link" href="http://www.google.com">link in level
3</p>
<div
id="level2"> Level 2 div
<div id="level1">Level 1 div
<div id="content1">Sibling #1
div</div>
<div id="content">Content div
<h1>Heading
1</h1>
<p>This is a
paragraph</p>
<a
href="http://www.tri-c.edu">Click here for Tri-C</a>
<div id="desc1">
Description Div
<p>Para
1</p>
<p>Para
2</p>
<p>Para
3</p>
<a
href="http://www.google.com">Google link</a>
</div>
<ul id="list#1">
List
<li
id="item1">item1</li>
<li
id="item2">item2</li>
<li
id="item3">item3</li>
<li
id="item4">item4</li>
<li
id="item5">item5</li>
</ul>
</div>
<div id="content2">Sibling #2
div</div>
<p id="content3">Sibling #3
para</p>
</div>
</div>
</div>
</div>
<div id="btnPanel">
<button
id="button1">Parent</button>
<button
id="button2">Parents(Ancestor)</button>
<button
id="button3">Parentsuntil(Ancestors)</button>
<button
id="button4">Children</button>
<button
id="button5">Siblings</button>
<button
id="button6">Find descendants</button>
</div>
<div id="btnPanel2">
<button
id="button7">Next</button>
<button
id="button8">Prev</button>
<button
id="button9">Closest</button>
<button
id="button10">First</button>
<button
id="button11">Last</button>
<button
id="button12">Filter</button>
<button
id="button13">Not</button>
<button
id="button14">Slice</button>
</div>
</body>
</html>
jqt.css:
#container
{
width: 500px;
color: purple;
}
div{
border: 1px solid pink;
padding: 5px;
}
section p, a, div, h1{
margin-left: 5px;
color: navy;
}
#content
{
font-size: 20px;
font-weight: bold;
border: 5px solid hotpink;
background-color: lightblue;
}
#btnPanel, #btnPanel2
{
background-color: black;
width: 700px;
padding: 20px;
}
jqt.js:
//JQ DOM Traversal
//$("") will be used as a frame of reference
//parent()
//parents()
//find()
//siblings()
//children()
//Additional Sibling methods
//next
//nextAll
//nextUntil
//prev
//prevAll
//prevUntil
//closest
//first
//last
//filter
//not
//slice
$(function(){ //$(document).ready(function(){})
console.log("hello");
$("#button1").on("click",function(){
$("#content").parent().css("border","5px
darkgreen solid");
$("#content").parents().css("color","black");
});
$("#button2").on("click",function(){
$("#content").parents().css("background-color","lightgreen");
$("#content").parents().css("color","white");
});
$("#button3").on("click",function(){
$("#content").parentsUntil("#level3").css("border","dashed 5px
yellow");
$("#content").parents().css("color","black");
});
$("#button4").on("click",function(){
//children are elements at a lower level in
the hierarchy
$("#content").children().css("border","3px
dotted blue");
console.log($("#content").children().length);
});
$("#button5").on("click",function(){
//siblings are elements at the same level in
the hierarchy
$("#content").siblings().css("background-color","purple");
$("#content").siblings().css("color","white");
});
$("#button6").on("click",function(){
var descendants = $("#content").find("p");//*
means all descendants
descendants.each(function(){
$(this).css("background-color","lightgreen");
console.log($(this).html());
});
});
})
You will have to write code to make 2nd row of buttons work: Next Prev Closest First Last Filer Not Slice Next Apply next!) method to #content. Then for whatever element is returned, set html to "Sibling set by next() method also set background color to yellow Heading 1 Part Port Para . Prev Apply prev) method to #content. Then for whatever element is returned. set htmito "Sibling set by prevo method' also set background color to grey . " Castle Ileading 1 Taple Click hecelac Descriptive Des Para1 Para Peru Google bile Lt . c. .it . item . . item Closest Apply closesti) method to #item1 which is a <li> element. Then for whatever element is returned set color to orange < Para 3 Google link List . . tom
First Apply first() method to "tag. Then for whatever element is returned, set background color to red Google link itemi trema Last Apply last) method to "iitag. Then for whatever element is returned. set background color to red Google link ..... List . iteml . item2 . item3 • item4 .tems Filter Apply filter() method to "r" tag so that item is filtered. Then for whatever elements are returned, set background color to red List • iteml • tem2 • item3 • item4 • items Not Apply not method to "Ir tag and exclude item2. Then for whatever elements are returned, set background color to red , List Hemel . item2 . item3 . tem . Slice Apply slice() method to "li" tag. Then for whatever element is returned, set background color to red ONLY for the middle 3 list items. ". , List • item] . tem • tem3 . tem • item5
PLEASE HELP JAVA PLEASE jqt.html: JQuery DOM Traversal
-
- Site Admin
- Posts: 899603
- Joined: Mon Aug 02, 2021 8:13 am