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> |
removeClass() ๋ฉ์๋
์์์์ class ์์ฑ์ ์ ๊ฑฐํฉ๋๋ค..
| ์คํ ๋ถ๋ฅ | ํ์ |
|---|---|
| ์ ๊ฑฐ | $("div").removeClass("ํด๋์ค๋ช "); |
| ์ฝ๋ฐฑ ํจ์ |
$("div").removeClass(function(index, className) { // index๋ ๊ฐ div ์์์ index 0,1,2 // className์ ๊ฐ div์ class ์์ฑ m1, m2, m3 return class ์์ฑ // ๊ฐ div์ class ์์ฑ์ ์ ๊ฑฐํฉ๋๋ค. }); .... <div>๋ด์ฉ1</div> <div>๋ด์ฉ2</div> <div>๋ด์ฉ3</div> |
toggleClass() ๋ฉ์๋
์์์ class ์์ฑ์ด ์์ผ๋ฉด addClass()๊ฐ ์ ์ฉ๋๊ณ class ์์ฑ์ด ์์ผ๋ฉด 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>
728x90
๋ฐ์ํ
'์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์ ์ด์ฟผ๋ฆฌ ์คํ์ผ ๊ด๋ จ ๋ฉ์๋ (2) | 2022.09.05 |
|---|---|
| ์ ์ด์ฟผ๋ฆฌ ์์ฑ ๊ด๋ จ ๋ฉ์๋ (2) | 2022.09.05 |
| ์์ ํฌ๊ธฐ ๋ฉ์๋ (1) | 2022.09.01 |
| JQuery ํ์ ์ ํ์ (4) | 2022.08.31 |
| JQuery ํํฐ ์ ํ์ (4) | 2022.08.31 |
๋๊ธ