[jQuery] DOM탐색 메서드

JS 관련/JQuery

[jQuery] DOM탐색 메서드

씨네 2022. 2. 16. 11:58

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	.menu{width: 150px; background-color: skyblue; position: absolute;}
	#menu2{left: 170px;}
	#menu3{left: 330px;}
	a{text-decoration: none;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(function(){
		$(".menu div").css("display", "none");
		
		$(".menu").hover(
			function(){
				$(this).children("div").toggle();
			}
		);
	});

</script>
</head>
<body>

	<b>DOM 탐색 메서드</b><br>
	
	<div id="menu1" class="menu">
		<a href="jq06_dom01.html">필터링 메서드</a>
		<div>.eq()</div>
		<div>.slice()</div>
		<div>.first()</div>
		<div>.last()</div>
	</div>
	
	<div id="menu2" class="menu">
		<a href="jq07_dom02.html">트리 탐색 메서드</a>
		<div>.find()</div>
		<div>.children()</div>
		<div>.parent()</div>
		<div>.next()</div>
	</div>
	
	<div id="menu3" class="menu">
		<a href="jq08_dom03.html">기타 탐색 메서드</a>
		<div>.add()</div>
		<div>.is()</div>
	</div>

</body>
</html>

해당 코드는 menu class를 가진 태그들의 자식 div영역은 모두 display: none; 처리 되어있습니다.

하지만 마우스를 올리면 hover 효과로 숨겨진 태그들을 보여주고 다시 마우스를 떼면 숨김처리됩니다.

$(function(){
	$(".menu div").css("display", "none");
		
	$(".menu").hover(
		function(){
			$(this).children("div").toggle();
		}
	);
});

함수에서 보면 menu안에 있는 div의 display를 none하여 보이지 않게 합니다.

하지만 마우스가 올라간 div영역은 toggle효과로 인해 보여지게 되고 다시 마우스가 내려가면 숨겨집니다!

728x90