1.1 Jquery 사용한 클래스 변경 추가 제거 방법


1
2
3
4
5
6
7
8
9
// 클래스 변경 
$(this).attr('class','class_name');
 
// 클래스 추가 
$(this).addClass("class_name");
 
// 클래스 제거 
$(this).removeClass("class_name");
 
cs

1.2 사용 예시


1
2
3
4
5
6
// 사용 예시
$('#search-btn1').click(function() {
    $('#check-design').addClass("checkbox");
    $('#check-design').removeClass("check-checked");
    return false;
});
cs



2.1 Jquery attr(), prop(), is() 메소드


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
26
27
28
29
30
<!doctype html>
 
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
 
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
cs


속성에 대해 prop(), is()는 true, false 를 갖지만 attr()은 checked로 변하지 않는다.


.attr( "checked" ): checked

.prop( "checked" ): false

.is( ":checked" ): false


.attr( "checked" ): checked

.prop( "checked" ): true

.is( ":checked" ): true



2.2 사용 예시


1
2
3
4
5
6
7
8
9
10
11
$('#check-all-1').click(function() {
    if($('#check-all-1').is(':checked') == true) {
        $('#ui-col-cont input[name=check]').each(function(){
            $(this).prop('checked', true);
        });
    } else {
        $('#ui-col-cont input[name=check]').each(function(){
            $(this).prop('checked', false);
        });
    }
});
cs


prop() 를 통해 check 속성의 값을 true, false로 변경하는 것을 확인할 수 있다.




'전체 > JS & Jquery' 카테고리의 다른 글

자바스크립트의 중괄호{} 대괄호[] key, value 배열 json 형식 구조 만들기  (2) 2018.08.16
Email Validation Check 정규표현식 이용하기  (0) 2018.04.04
문자열 3자리마다 콤마찍기, 특정문자 없애기, 마지막 문자 자르는방법  (0) 2018.04.04
Jquery each function 사용하기  (0) 2017.08.29
access-control-allow-origin 크로스 도메인 이슈 해결방법  (0) 2017.05.12

+ Recent posts

티스토리툴바