잡동사니에도 사랑을

[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문 본문

JAVA_EE/JQuery

[21.10.18] exam01(06_jQueryDOM) - 문서 객체 모델(DOM, Document Object Model) 예제문

luvforjunk 2021. 10. 18. 10:57
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td {
	width: 100px;
	height: 100px;
	text-align: center;
}
</style>
</head>
<body>
	<table border="1">
		<tr>
			<td>1번</td>
			<td>2번</td>
			<td>3번</td>
		</tr>
		<tr>
			<td>4번</td>
			<td>5번</td>
			<td>6번</td>
		</tr>
		<tr>
			<td>7번</td>
			<td>8번</td>
			<td>9번</td>
		</tr>
	</table>

	<script type="text/javascript"
		src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("td:eq(4)").css("background", "#ffff00");
			$("td").eq(2).css("background", "#ff0000");
			$("td:eq(4)").next().css("background", "#00ff00");
			$("td").eq(4).prev().css("background", "#0000ff");

			$("td:eq(4)").parent().css("color", "#ff0000");
			$("td").eq(4).parent().prev().css("color", "#0000ff");
			$("td:eq(4)").parent().next().children().css("text-decoration","underline");
			$("td").eq(4).parent().next().children().eq(1).css("font-weight","bold");
		});
	</script>

</body>
</html>

 

 

[결과]

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[JQuery] 마우스 올려 서브 메뉴 펼치기 & 모든 서브 메뉴 숨기기  (0) 2021.10.18
[21.10.18] exam02(06_jQueryDOM) - 이미지 목록 클릭 시 클릭한 이미지 띄우기  (0) 2021.10.18
[21.10.15] exam05(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam04(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam03(05_jQueryAnimation)  (0) 2021.10.15
'JAVA_EE/JQuery' Related Articles more