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 |