티스토리 뷰

[개발]프로그래밍/jquery

[jquery] addClass() ,removeClass() - 클래스 속성 추가 , 삭제

좋은 블로그 2016. 9. 30. 06:39

1. addClass() , removeClass() - 역할

addClass() - 객체에 클래스 속성을 추가 


removeClass() - 객체에 클래스 속성을 제거


2. addClass() , removeClass() - 기본코드

 ◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
.hcolor{
    color:blue;
}
.hcolor0{
    color:yellow;
}
.hcolor1{
    color:red;
}
.hcolor2{
    color:green;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script>
$(document).ready(function () 
{
});
</script>
<body>
    <h1> 테스트 - 1 </h1>
    <h1> 테스트 - 2 </h1>
    <h1> 테스트 - 3 </h1>
</body>


3. addClass() - 예제1

 ◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(document).ready(function () 
{
  $('h1').addClass('hcolor');
});
</script>
 
<body>
    <h1> 테스트 - 1 </h1>
    <h1> 테스트 - 2 </h1>
    <h1> 테스트 - 3 </h1>
</body>





◈ 결과 화면



◈ 설명


h1 태그 전체에 hcolor 클래스를 적용합니다




4. addClass() , removeClass() - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function () 
{
    $('h1').addClass(function (index){
        return 'hcolor'+index;
    });
});
</script>
 
<body>
    <h1> 테스트 - 1 </h1>
    <h1> 테스트 - 2 </h1>
    <h1> 테스트 - 3 </h1>
</body>




◈ 결과화면



◈ 결과코드


1
2
3
4
5
<body>
    <h1 class="hcolor0"> 테스트 - 1 </h1>
    <h1 class="hcolor1"> 테스트 - 2 </h1>
    <h1 class="hcolor2"> 테스트 - 3 </h1>
</body>


◈ 설명

h1 태그에 순서대로 hcolor0,hcolor1,hcolo2 클래스 적용합니다



5. removeClass() - 예제1

 ◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(document).ready(function () 
{
$('h1').addClass(function (index){
        return 'hcolor'+index;
    });    

$('h1').removeClass('hcolor2');
});
</script>
 
<body>
    <h1 class="hcolor0"> 테스트 - 1 </h1>
    <h1 class="hcolor1"> 테스트 - 2 </h1>
    <h1 class="hcolor2"> 테스트 - 3 </h1>
</body>




◈ 결과화면



◈ 설명


h1 태그에 hcolo2 클래스 제거


6. removeClass() - 예제2

 ◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function () 
{
    $('h1').removeClass(function (index){
        return 'hcolor'+index;
    });
});
</script>
 
<body>
    <h1 class="hcolor0"> 테스트 - 1 </h1>
    <h1 class="hcolor1"> 테스트 - 2 </h1>
    <h1 class="hcolor2"> 테스트 - 3 </h1>
</body>




◈ 결과화면



◈ 결과화면


h1 태그에 hcolor0,hcolor1,hcolor2 클래스 제거합니다


'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] eq(),first(),last() - 자주 쓰이는 객체 선택  (0) 2016.10.01
[jquery] filter() - 객체 필터링 선택  (0) 2016.10.01
[jquery] 필터 선택자 - :을 포함한 선택자  (0) 2016.09.28
[jquery] 속성 선택자 - 속성,구분기호,값  (0) 2016.09.28
[jquery] 자식 선택자 - >의 포함여부에 따른 선택  (0) 2016.09.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday