728x90
π jQuery ν΄λμ€ λ©μλμ λν΄ μμλ΄ μλ€ !
π addClass() λ©μλ
μμμ class μμ±μ μΆκ°ν λ μ¬μ©ν©λλ€.
| μ€ν λΆλ₯ | νμ |
|---|---|
| μΆκ° | $("div").addClass("ν΄λμ€λͺ "); |
| μ½λ°± ν¨μ | $("div").addClass(function(index, className) {
// index λ κ° div μμμ index 0,1,2 // className μ κ° divμ class μμ± return class μμ± // κ° divμ class μμ±μ μΆκ°ν¨. }); ... <div>λ΄μ©1</div> <div>λ΄μ©2</div> <div>λ΄μ©3</div> |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>addClass() λ©μλ<title>
<script src="jquery-3.3.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#m2 {
text-align: center;
}
.box {
border-bottom: 2px solid #ccc;
text-align: center;
padding: 20px;
margin-bottom: 10px;
}
.circle0,
.circle1,
.circle2 {
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid #ff6600;
line-height: 200px;
display: inline-block;
}
</style>
<script>
$(document).ready(function() {
$("#m1 > div").addClass("box");
$("#m2 > div").addClass(function(index) {
return "circle" + index;
});
});
</script>
</head>
<body>
<div id="m1>
<div>jQuery</div>
</div>
<div id="m2">
<div>html</div>
<div>css</div>
<div>javascript</div>
</div>
</body>
</html>
π removeClass() λ©μλ
μμμμ class μμ±μ μ κ±°ν λ μ¬μ©ν©λλ€.
| μ€ν λΆλ₯ | νμ |
|---|---|
| μ κ±° | $("div").removeClass("ν΄λμ€λͺ "); |
| μ½λ°± ν¨μ | $("div").removeClass(function(index, className) {
// indexλ κ° div μμμ index 0,1,2 // classNameμ κ° divμ class μμ± return class μμ± // κ° divμ class μμ±μ μ κ±°ν¨. }); ... <div>λ΄μ©1</div> <div>λ΄μ©2</div> <div>λ΄μ©3</div> |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>removeClass() λ©μλ<title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("#m1 > div").removeClass("con");
$("#m2 > div").removeClass(function() {
return "bg";
});
});
</script>
</head>
<body>
<div id="m1">
<div class="con">μ½ν
μΈ </div>
</div>
<div id="m2">
<div class="c1 bg">λ΄μ©1</div>
<div class="c2 bg">λ΄μ©2</div>
<div class="c3 bg">λ΄μ©3</div>
</div>
</body>
</html>
π toggleClass() λ©μλ
μμμ class μμ±μ΄ μμΌλ©΄ addClass(), μμ±μ΄ μμΌλ©΄ removeClass()κ° μ μ©λ©λλ€.
| μ€ν λΆλ₯ | νμ |
|---|---|
| μΆκ°/μ κ±° | $("div").toggleClass("ν΄λμ€λͺ "); |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
...
<script>
$(document).ready(function() {
$("#m_menu a.m").click(function() {
$(this).next().addBack().toggleClass("on").end().find(".m ul").
removeClass("on").end().parent().siblings().find(".m ul").removeClass("on");
return false;
});
});
</script>
...
</html>
π hasClass() λ©μλ
ifλ¬Έμ 쑰건μμΌλ‘ μ¬μ©λλ©°, μ νν μμ ν΄λμ€κ° μμΌλ©΄ true, μμΌλ©΄ falseλ₯Ό λ°νν©λλ€.
if($("#box").hasClass("m")) {
console.log("ν΄λμ€ μμ"); // ν΄λμ€ μμ
} else {
console.log("ν΄λμ€ μμ");
}
...
<div id="#box" class="m">λ΄μ©</div>
'JAVASCRIPT > jQuery' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| jQuery | μ€νμΌ λ©μλ (2) | 2022.09.04 |
|---|---|
| jQuery | μμ± λ©μλ (2) | 2022.09.04 |
| jQuery | νμ μ νμ (8) | 2022.08.31 |
| jQuery | νν° μ νμ (7) | 2022.08.31 |
| jQuery | μμ± μ νμ (9) | 2022.08.30 |
λκΈ