jQuery 설치하기
구글에 jQuery cdn 검색하면 나오는 사이트에서
jQuery 3.x버전 <script> 태그를 찾아서 html 파일에 넣어주기
이제 jQuery 설치한 곳 하단에서 jQuery 문법 사용하기
따라서 여기서는 <head>태그 안에 넣음
jQuery 써서 html과 style 변경하려면
html
<p class="hello">안녕</p>
css
// document.querySelector(".hello").innerHTML = "메롱";
// document.querySelector(".hello").style.fontSize = "어쩌구";
$(".hello").html("메롱");
$(".hello").css("color", "red");코드 양이 절반으로 줄어든다
$ 이건 querySelector와 동일하게 사용하면 됨
(주의) html셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고
jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘된다
$('어쩌구').innerHTML❌❌
jQuery써서 class 탈부착하기
<p class="hello">안녕</p>
<script>
$('.hello').addClass('클래스명');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');
</script>html 여러개를 바꾸려면
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<script>
document.querySelectorAll('.hello')[0].innerHTML = '메롱';
document.querySelectorAll('.hello')[1].innerHTML = '메롱';
document.querySelectorAll('.hello')[2].innerHTML = '메롱';
</script><p> 태그 3개를 일괄적으로 '메롱' 으로 바꾸려면 기본 JS에서는 이렇게 3줄을 써야한다
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<script>
$('.hello').html('바보');
</script>$() 셀렉터는 그냥 querySelectorAll처럼 여러개가 있으면 전부 찾아준다
[0] 이런 순서 필요 없이 .html() 붙이면
셀렉터로 찾은 모든 요소를 한번에 조작하고 변경 가능
이벤트리스너는
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
어쩌구~
});
</script>addEventListener 대신 on 쓰기
on 은 $() 이걸로 찾은것들에만 붙일 수 있다
UI 애니메이션
<p class="hello">안녕</p>
<button class="test-btn">버튼</button>
<script>
$('.test-btn').on('click', function(){
$('.hello').fadeOut();
});
</script>.hide() 는 사라지게
.fadeOut() 은 서서히 사라지게
.slideUp() 은 줄어들며 사라지게 가능
애니메이션을 반대로 주고싶으면 show() fadeIn() slideDown() 이런것도 있다
📒오늘의 숙제
버튼하나 아무데나 만들고 버튼 누르면 모달창 띄우기
<모달창 띄우기 버튼>
요런게 모달창~
html
<script>
$("test-btn").on("click", function () {
$(".black-bg").css({
display: block,
});
});
$("close").on("click", function () {
$(".black-bg").css({
display: none,
});
});
</script>
css
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
display: none;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
display: none;
} 실패! 왜 안뜨징..
-> index.html 다시 보면 .show 라는 클래스를 만들었음
보여주는 클래스를 만들어서 부착하는 JS를 만들면 됨
html
<script>
$("#login-btn").on("click", function () {
$(".black-bg").addClass("show");
});
</script>
css
.show {
display: block;
}
.black-bg {
(생략)
display: none;
}실패!
-> .show 가 div css보다 아래에 있어야 한다!
<모달창 닫기버튼>
<script>
$("#close").on("click", function () {
$(".black-bg").removeClass("show");
});
</sript>