jQuery 다운로드)
jQuery 기초)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery start</title>
<!--1. 다운로드 방식-->
<script src="./js/jquery-3.6.4.min.js"></script>
<!--2. 네트워크 방식-->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<p>jQuery start</p>
<button id="textBtn">TEXT</button>
<button id="htmlBtn">HTML</button>
<script>
// jQuery / $
// -> wrapper(래퍼) : 인자로 전달된 요소들에
// jQuery의 기능성을 부가해서 반환
// $(선택자).동적메소드()
// 1. p태그에 접근
let valJS = document.querySelector("p");
console.log(valJS);
// let valJQ = jQuery("p");
let valJQ = $("p");
console.log(valJQ);
// 2. text 버튼 클릭 시 내용만
// JS -> innerText
// jQuery -> text()
$("#textBtn").click(()=> {
console.log(valJS.innerText);
valJS.innerText = "내용 변경";
$("p").text("내용 변경");
});
// 3. html 버튼 클릭 시 태그까지
// JS -> innerHTML
$("#htmlBtn").click(()=> {
valJS.innerHTML = '<a href="#">a태그로 변경</a>'
$("p").html('<a href="#">a태그로 변경</a>');
});
</script>
</body>
</html>
jQuery 스타일)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery style</title>
<script src="./js/jquery-3.6.4.min.js"></script>
</head>
<body>
<p>jQuery style</p>
<button>change!</button>
<script>
// 스타일 제어
// JS -> style
// jQuery -> css()
$("button").click(()=> {
// 1. 한줄씩 입력
$('p').css("color", "salmon");
// background-clor
$("p").css("background-color", "blue");
$("p").css('font-style', 'italic');
// 2. chain 방식 입력
// jQuery의 메소드는 메소드가 제어하는 대상을 리턴
// -> 메소드를 계속해서 붙여넣는 chain 방식 사용 가능
$('p').css("color", "salmon")
.css("background-color", "lightgray")
.css('font-style', 'italic');
// 3. 객체로 입력
$("p").css({
"color":"salmon",
"background-color":"lightgray",
"font-style":"italic"
});
});
</script>
</body>
</html>
마우스이벤트)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mouse event</title>
<style>
.parentDiv {
width: 200px;
height: 200px;
background-color: wheat;
padding: 50px;
margin: 10px;
}
.childDiv{
width: 100%;
height: 100%;
background-color: olive;
}
</style>
<script src="./js/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="parentDiv">
<div class="childDiv"></div>
</div>
<script>
// 마우스 이벤트
// mouseover -> 마우스 올렸을 때, 자식 요소 포함
// 마우스 내렸을 때, mouseout
// mouseenter -> 마우스 올렸을 때, 자식 요소 제외
// 마우스 내렸을 때, mouseleave
$(".parentDiv").mouseover(() => {
console.log("mouseover 🥩🍗");
})
.mouseenter(() => {
console.log("mouseenter 🍖");
})
</script>
</body>
</html>
마우스 이벤트 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event practice</title>
<script src="./js/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>Event 지정</h1>
<h1>Event 지정</h1>
<h1>Event 지정</h1>
<button>change!</button>
<script>
// $(선택자).on(이벤트타입, 이벤트헨들러);
// 1. 버튼을 클릭 시, h1 글씨색 파란색 변경
$("button").on("click", () => {
$('h1').css("color", "blue");
});
// 2. h1 마우스 올렸을 때, 글씨색 빨간색 변경
$("h1").on('mouseover', function(){
$(this).css("color", "red");
})
// 3. h1 마우스 내렸을 때, 글씨색 검은색 변경
.on('mouseout', (e) => {
console.log(e.target);
$(e.target).css("color", "black");
});
</script>
</body>
</html>
동적이벤트)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dynamic evnet</title>
<script src="./js/jquery-3.6.4.min.js"></script>
<style>
button{
width: 100px;
height: 60px;
margin: 5px;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1.5rem;
}
.click{
background-color: lightpink;
}
.on{
background-color: lightblue;
}
</style>
</head>
<body>
<button class="click">click</button>
<button class="on">on</button>
<br><br><br>
<script>
// click 버튼 클릭 시 -> click 버튼 생성
$(".click").click(() => {
// $(A).append(B) : A에 B를 추가
$("body").append('<button class="click">click</button>');
})
// on 버튼 클릭 시 -> on 버튼 생성
// $(document).on(이벤트타입, 이벤트대상, 이벤트핸들러);
$(document).on("click", ".on", ()=>{
$("body").append('<button class="on">on</button>');
});
</script>
</body>
</html>
좋아요 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>like practice</title>
<script src="./js/jquery-3.6.4.min.js"></script>
</head>
<body>
<button class="likeBtn">좋아요</button>
<span>0</span>
<br><br>
<input type="text">
<button class="textBtn">댓글 작성</button>
<br>
<div class="container">
<p>
첫 댓글
<button class="removeBtn">삭제</button>
<br>
</p>
</div>
<script>
// 속성 추가, 제거 관련
// attr(추가할 속성, 속성의 값) : 속성 추가 메소드
// removeAttr(제거할 속성) : 속성 제거 메소드
// removeClass(클래스 이름) :클래스 값 제거 메소드
// remove() : 요소 자체를 지워버림
// $(A).append(B) : B를 A요소 마지막 위치에 추가 메소드
// $(A).prepend(B) : B를 A요소 첫 번째 위치에 추가 메소드
// input 태그 관련
// val() : input 입력 값 접근(JS - value)
// input 안의 값 비워주기 -> input 반환객체.val('')
// 1. 좋아요 버튼 클릭 시
// 좋아요 -> 좋아요 취소
// 0 -> 1
$(document).on("click", ".likeBtn", function(){
$(this).text("좋아요 취소");
$("span").text("1");
$(this).removeClass("likeBtn");
// $(this).addClass("dislikeBtn"); 또는 아래 방법
$(this).attr("class", "dislikeBtn");
})
// 2. 좋아요 취소 버튼 클릭 시
// 좋아요 취소 -> 좋아요
// 1 -> 0
$(document).on("click", ".dislikeBtn", (e)=>{
$(e.target).text("좋아요");
$("span").text("0");
$(e.target).removeAttr("class");
$(e.target).attr("class", "likeBtn");
})
// 3. 댓글 작성 버튼 클릭 시
// 입력 내용 댓글 + 삭제 버튼 생성
$(document).on("click", ".textBtn", ()=> {
let textVal = $("input").val();
$(".container").append(`
<p>
${textVal}
<button class="removeBtn">삭제</button>
<br>
</p>`);
// 3-1. input 안의 값 비워주기
$('input').val('');
})
// $(document).on("click", ".textBtn", ()=> {
// let textVal = $("input").val();
// $(".container").prepend(`
// <p>
// ${textVal}
// <button class="removeBtn">삭제</button>
// <br>
// </p>`);
// // 3-1. input 안의 값 비워주기
// $('input').val('');
// })
// 4. 삭제 버튼 클릭 시
// 댓글 + 삭제 버튼 삭제
// .parentNode: 요소의 부모에 접근
$(document).on("click", '.removeBtn', (e)=>{
$(e.target.parentNode).remove();
})
</script>
</body>
</html>
댓글