JQuery

211005_siblings

요옫 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하나 눌렀을 때