reset cdn
jQuery cdn 같이, reset cdn 활용 가능.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
상위요소, 형제요소
<body>
<h1>jquery</h1>
<ul>
<li>
<h2>기초예제</h2>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - http://www.adobe.com/go/adc_css_layouts.</p>
</li>
<li>
<h2>중급예제</h2>
<p>Because all the columns are floated, this layout uses overflow:hidden on the .container. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If you have a large element that protrudes outside the .container, it will appear to be cut off. You also won't be able to use negative margins or absolute positioning with negative values to pull elements outside the .container or they will also won't display outside the .container.</p>
</li>
<li>
<h2>실습예제</h2>
<p>Adding a footer following the columns, yet still inside the .container, will cause this overflow:hidden clearing method to fail. You can place a .footer into a second .container outside the first one with no detrimental effects. The simplest choice may be to start with a layout containing headers and footers and remove the header to utilize the clearing methods in that layout type.</p>
</li>
</ul>
</body>$(document).ready(
function(){
$("h2").click(
function(){
//클릭한h2에 클래스sb를 붙이시오
$(this).addClass("sb");
$(this).parent().siblings().children("h2").removeClass("sb");
//siblings : 본인을 제외한 형제들.
$(this).next().show(500);
//next : 본인 다음 대상. (h2 다음의 p요소)
//show : display block으로 변경해 줌.
$(this).next().slideToggle(1000, function(){$(this).css("background-color", "yellow")});
// function(){$(this)에서의 this : slideToggle의 대상이 되는 p.
// 1000 : 1초만에 열림.
//slideToggle : 보이지 않는 요소를 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게.
$(this).next().slideToggle(1000,function(){$(this).parent().css("border","2px solid red")});
$(this).parent().siblings().children("p").slideUp(3000, function(){$(this).css("background-color","transparent")});
//클릭한 h2(this)의 상위요소(parent),그 상위요소를 제외한 나머지 형제요소(siblings),그 형제요소의 하위요소(children) p를 감춰라
//$("p").not(this).hide();
}
);
//p태그를 감춰라
$("p").hide();
//ul을 감춰라.보이게해라
//메서드체인:명령어를 .으로 이어쓸 수 있음
$("ul").hide().show(500);
//h1을 클릭하면 실행하시오(ul을 slideUp();)
$("h1").click(
function(){
//$("ul").slideUp(); //접기
$("ul").slideToggle();
}
);
}
);not 활용
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
</ul>$(this).addClass("click");
$(this).parent().siblings().children().removeClass("click");
$("li a").not(this).removeClass();아래 두 코드는 동일 기능.
:first
$("li:first a").addClass("click");<li><a href="#">html</a></li>ul의 첫번째 li의 자식요소 a를 의미.
:last도 동일 방법
wrap
<div class="popup">
<img src="https://images.unsplash.com/photo-1660108243103-dcb9d9cc4d46?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
<buttom class="close">닫기</buttom>
</div>$("div.popup").wrap("<div class = 'popupwrap'></div>");
해당 요소를 감싸는 태그 생성 속성
함수 실행 순서
함수 실행 순서
<div class="popup">
<img src="https://images.unsplash.com/photo-1660108243103-dcb9d9cc4d46?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
<buttom class="close">닫기</buttom>
</div><script>
$(document).ready(function(){
$(".close").click(function(){
$(".popup").addClass("hide");
});
$("div.popup").wrap("<div class = 'popupwrap'></div>");
$(".popupwrap").hide().fadeIn(1000,function(){
$("div.popup").hide().slideDown(500,function(){$(this).css("box-shadow","0 0 10px #fff")});
});
$('.popup').hide();
});
</script>실행 순서 코드
<script>
$("div.popup").wrap("<div class = 'popupwrap'></div>");
$(".popupwrap").hide()
$('.popup').hide(0);
fadeIn(1000,function(){
$("div.popup").hide().slideDown();
slideDown(500,function(){$(this).css("box-shadow","0 0 10px #fff")});
</script>
가보자고