JQuery4

DOM Traversal

<!DOCTYPE html>

<html>

<head>

<title>DOM Traversal</title>

<style>

.cell {

height: 50px;

width: 100px;

text-align: center;

border:2px dotted gray;

}

.row

{

outline:green solid medium;

}

table

{

border:3px solid blue;

}

*

{

margin:10px;

padding:10px;

}

</style>

$(document).ready(function(){

$("#btnClick").click(function(){

$("#r1c2").parent().css("outline", "red solid thick");

//$("#row1").parent().css("outline", "red solid thick");

//$("table").parent().css("outline", "red solid thick");

//$("#r1c2").parents().css("outline", "red solid thick");

//$("body").parents().css("outline", "red solid thick");

//$("#r1c2").parentsUntil("body").css("outline", "red solid thick");

});

</script>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</table><br />

<button id="btnClick">Click!!!</button>

</body>

</html>

<html>

<head>

<title>DOM Traversal</title>

<style>

.cell {

height: 50px;

width: 100px;

text-align: center;

border:2px dotted gray;

}

.row

{

outline:green solid medium;

}

table

{

border:3px solid blue;

}

*

{

margin:10px;

padding:10px;

}

</style>

$(document).ready(function(){

$("#btnClick").click(function(){

$("#r1c2").siblings().css("outline", "red solid thick");

//$("#row3").siblings().css("outline", "red solid thick");

//$("#row3").prev().css("outline", "red solid thick");

//$("#r2c4").prev().css("outline", "red solid thick");

//$("#r2c4").prevAll().css("outline", "red solid thick");

//$("#r2c4").prevUntil("#r2c1").css("outline", "red solid thick");

//$("#r2c2").next().css("outline", "red solid thick");

//$("#r2c2").nextAll().css("outline", "red solid thick");

//$("#r2c2").nextUntil("#r2c4").css("outline", "red solid thick");

});

</script>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</table><br />

<button id="btnClick">Click!!!</button>

</body>

</html>

<html>

<head>

<title>DOM Traversal</title>

<style>

.cell {

height: 50px;

width: 100px;

text-align: center;

border:2px dotted gray;

}

.row

{

outline:green solid medium;

}

table

{

border:3px solid blue;

}

*

{

margin:10px;

padding:10px;

}

</style>

$(document).ready(function(){

$("#btnClick").click(function(){

$("body").children().css("outline", "red solid thick");

//$("#row1").children().css("outline", "red solid thick");

//$("body").find("tr").css("outline", "red solid thick");

//$("body").find("td").css("outline", "red solid thick");

});

</script>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</table><br />

<button id="btnClick">Click!!!</button>

</body>

</html>

<html>

<head>

<title>DOM Traversal</title>

<style>

.cell {

height: 50px;

width: 100px;

text-align: center;

border:2px dotted gray;

}

.row

{

outline:green solid medium;

}

table

{

border:3px solid blue;

}

*

{

margin:10px;

padding:10px;

}

</style>

$(document).ready(function(){

$("#btnClick").click(function(){

$("#row1 td").first().css("outline", "red solid thick");

//$("#row1 td").last().css("outline", "red solid thick");

//$("#row1 td").eq(1).css("outline", "red solid thick");

//$("#row1 td").filter(":even").css("outline", "red solid thick");

//$("#row1 td").not(":even").css("outline", "red solid thick");

//$("#row1 td").slice(1).css("outline", "red solid thick");

//$("#row1 td").slice(1, 3).css("outline", "red solid thick");

//$("td").slice(5, 10).css("outline", "red solid thick");

//$("td").slice(11).css("outline", "red solid thick");

//$("tr").has("td").css("outline", "red solid thick");

});

</script>

</head>

<body>

</tr>

</tr>

</tr>

</tr>

</table><br />

<button id="btnClick">Click!!!</button>

</body>

</html>