-
211005_siblingsJQuery 2021. 10. 5. 12:35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="one">
첫번째 div
<div class="hana">div하나</div>
<div>둘</div>
<div>셋</div>
<h3>h3 Tag</h3>
<h4>h4 Tag</h4>
</div>
<div class="two">
두번째 div
<div class="hana">div하나</div>
<div>둘</div>
<div>셋</div>
<h3>h3 Tag</h3>
<h4>h4 Tag</h4>
</div>
<script type="text/javascript">
//parent():부모태그
//siblings():형제태그
//children():자식태그
//next():선택한 요소의 다음에 위치한 형제요소
//prev():선택한 요소의 바로 이전에 위치한 형제요소
$("div.one div.hana").siblings().css("color", "red");
$("div").children("div.hana").css("text-decoration", "underline");
$("div.hana").next().next().css("background-color", "yellow");
$("div.two").find("h3").css("border", "2px dotted green");
//액션
//hide(): 사라짐
$("div.one").click(function() {
/* $(this).siblings().find("div").show(); */ 천천히 사라짐
$(this).siblings().find("div").hide();
});
$("div.two").click(function() {
$(this).siblings().find("div").show();
//$(this).siblings().find("div").hide('slow');
//$(this).siblings().find("div").hide();
});
</script>
</body>
</html>
기본화면 ----> div하나 눌렀을 때 'JQuery' 카테고리의 다른 글
211005_fadeout,fadein (0) 2021.10.05 211005_fadeto (0) 2021.10.05 211005_transform,hover,rocate,scale,translate (0) 2021.10.05 211005_form,change,click (0) 2021.10.05 211005_form,table,button (0) 2021.10.05