제이쿼리
기본 실행식
<script>
$(function(){
$('body').css({ 'background': 'red' }) // body에 배경색 red 실행하라
})
</script>변수선언 & json 데이터 스타일로 작성
<script>
$(function(){
const bodyStyle = { 'background': 'red', 'color': 'white' } // 변수선언
$('body').css( bodyStyle ) // 실행식에 선언한 변수 삽입
})
</script>현장에서 쓰는 -CSS와 협업 가능한- 최상의 식!
CSS + JQ
<style>
.bodyStyle{ background-color : 'red'; color: 'white'; }
</style>
<!-- ------------------------------------- -->
<script>
$(function(){
$('body').addClass('bodyStyle')
})
</script>활용 예시
$(function(){
$('body.subpage').addClass('bodyStyle')
})웹에서 요소검사결과......
- 서브페이지라면 배경색 red+글자색 white
- 메인 페이지라면 배경색 ~~~
<body class="subpage bodyStyle">바닐라 자바스크립트와 제이쿼리 식 비교
addClass
- 바닐라 자바스크립트
document.body.classList.add( 'subpage' )
document.body.classList += 'subpage'- 제이쿼리
$('body').addClass( 'subpage' )removeClass
- 바닐라 자바스크립트
document.body.classList.remove( 'subpage' )- 제이쿼리
$('body').removeClass( 'subpage' )Quiz) #btn 객체 클릭 시, body에 클래스 act가 추가되도록 처리하시오
이 식을 수정해보세요
<script>
$(document).ready(function(){
$('body').addClass( 'act' );
})
</script>정답
<script>
$(document).ready(function(){
$('#btn').click(function(){
$('body').addClass( 'act' );
})
})
</script>