목차
addClass ()
선택요소에 하나 이상의 클래스 추가.
removeClass ()
선택요소에서 하나 이상의 클래스 제거.
addClass () + setTimeout() + removeClass ()
추가한 클래스 자동 제거.
toggleClass ()
선택요소에서 클래스 '추가/제거'를 토글.
css()
스타일 속성을 설정/반환.
hasClass()
지정 클래스 갖는지 여부 체크.
addClass() - 선택한 요소에 하나 이상의 클래스 추가.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("pink");
$("div").addClass("pink emphasis");
});
});
</script>
<style>
.emphasis { font-weight: bold; font-size: xx-large;}
.pink {color: #f70542;}
</style>
<h1>홈짱닷컴</h1>
<h2>Homzzang.com</h2>
<p>웹제작 기초 무료 학습 사이트</p>
<p>HTML, CSS. JS, jQuery, PHP, SQL</p>
<div>지금 바로 가입하기</div><br>
<button>요소에 class 추가</button>
결과 보기
removeClass() - 선택한 요소에서 하나 이상의 클래스 제거.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").removeClass("pink");
$("div").removeClass("pink emphasis");
});
});
</script>
<style>
.emphasis {font-weight: bold; font-size: xx-large;}
.pink {color: #f70542;}
</style>
<h1 class="pink">홈짱닷컴</h1>
<h2 class="pink">Homzzang.com</h2>
<p class="pink">웹제작 기초 무료 학습 사이트</p>
<div class="pink emphasis">HTML, CSS. JS, jQuery, PHP, SQL</div>
<button>class 제거하기</button>
결과 보기
addClass() + removeClass() 콜백함수 결합 = 추가한 클래스 일정 시간 후 자동제거.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>일정시간 후 추가한 클래스 제거</title>
<style>
.hz { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#homzzang { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; color: red !important;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#button" ).on( "click", function() {
$( "#homzzang" ).addClass( "newClass", 1000, callback );
});
function callback() {
setTimeout(function() {
$( "#homzzang" ).removeClass( "newClass" );
}, 1500 );
}
} );
</script>
<div class="hz">
<div id="homzzang">
홈짱닷컴 Homzzang.com
</div>
</div>
<button id="button">효과 보기</button>
결과보기
toggleClass() - 선택한 요소에서 클래스 추가 / 제거 토글
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("pink");
$("div").toggleClass("pink emphasis");
});
});
</script>
<style>
.emphasis {font-weight: bold; font-size: xx-large;}
.pink { color: #f70542;}
</style>
<h1 class="pink">홈짱닷컴</h1>
<h2 class="pink">Homzzang.com</h2>
<p class="pink">웹제작 기초 무료 학습 사이트</p>
<div class="pink emphasis">HTML, CSS. JS, jQuery, PHP, SQL</div>
<button>class 추가/제거</button>
결과 보기
css() - 스타일 속성을 설정/반환.
https://homzzang.com/b/jquery-30
