style(CSS) 변경
1. $(selector).css("css 속성", "속성값")
2. class로 변경
- 클래스 추가 : $(selectro).addClass("클래스 속성값");
- 클래스 제거 : $("selector).removeClass("클래스 속성값");
- 클래스 토글 : $("selector).toggleClass("클래스 속성값");
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<style>
.basic {
생략
}
.change {
background-color: blue;
color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
$(function (){
$("#add").click(function (){
$("div").addClass("change");
});
$("#remove").click(function (){
$("div").removeClass("change");
});
$("#toggle").click(function (){
$("div").toggleClass("change");
});
});
</script>
</head>
<body>
<button id="add">클래스 추가</button>
<button id="remove">클래스 삭제</button>
<button id="toggle">클래스 토글</button>
<div class="basic">DIV</div>
</body>
</html>요소의 추가/삭제
1. 추가
- 밑에 추가 : $(selector).append("추가 요소");
- 위에 추가 : $(selector).prepend("추가 요소");
- 특정 요소 밑에 추가 : $(selector).after("추가 요소");
- 특정 요소 위에 추가 : $(selector).before("추가 요소");
2. 삭제
- 요소 및 하위 요소 삭제 : $(selector).remove();
- 하위 요소만 삭제 : $(selector).empty();
예제)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>요소의 추가/제거</title>
<style>
.parent {
생략
}
.c1 {
생략
}
.c2 {
생략
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
let i = 1;
// 요소 추가
$("#apnd").click(function (){
i ++;
$("ol").append("<li>List item " + i + "</li>");
});
$("#ppnd").click(function (){
i ++;
$("ol").prepend("<li>List item " + i + "</li>");
});
$("#bef").click(function (){
i ++;
$("ol").before("<p>문단 " + i + "</p>");
});
$("#aft").click(function (){
i ++;
$("ol").after("<p class='abc'>문단 " + i + "</p>");
});
// 요소 삭제
$("#remove").click(function (){
$(".parent").remove();
});
$("#empty").click(function (){
$(".parent").empty();
});
</script>
</head>
<body>
<h2>요소 추가</h2>
<ol>
<li>List item 1</li>
</ol>
<button id="apnd">Append</button>
<button id="ppnd">Prepend</button>
<button id="bef">Before</button>
<button id="aft">After</button>
<hr>
<h2>요소 삭제</h2>
<div class="parent">
<b>부모 요소</b>
<div class="c1">자식 요소 1</div>
<div class="c2">자식 요소 2</div>
</div>
<button id="remove">Remove</button>
<button id="empty">Empty</button>
</body>
</html>
