728x90
prop()
[정의]
.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가함
js attr은 html요소를 가져오므로 다름
[문법]
속성값 가져오기
.prop( propertyName )
속성값 추가하기
.prop( propertyName, value )
[예제]
a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p><a href="#">Link</a></p>
<p>
<script>
document.write( $( 'a' ).attr( 'href' ) );
document.write( '<br>' );
document.write( $( 'a' ).prop( 'href' ) );
</script>
</p>
</body>
</html>
예제 2
제일 위의 체크박스를 체크하거나 체크 해제를 하면 아래의 모든 체크박스가 체크되거나 체크 해제됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( '.check-all' ).click( function() {
$( '.ab' ).prop( 'checked', this.checked );
} );
} );
</script>
</head>
<body>
<form>
<p><input type="checkbox" name="all" class="check-all"> <label>Check ALL</label></p>
<hr>
<p><input type="checkbox" name="cb1" class="ab"> <label>Checkbox 1</label></p>
<p><input type="checkbox" name="cb2" class="ab"> <label>Checkbox 2</label></p>
</form>
</body>
</html>
728x90
'J query' 카테고리의 다른 글
| J query : scrollTop(); 스크롤바 수직 위치 설정 (0) | 2022.11.28 |
|---|---|
| J Query: .show(), .hide() (0) | 2022.04.27 |
| J Query : Dom 요소 제어 (0) | 2022.04.07 |
| J Query: ajax 이용하여 데이터 불러오기 (0) | 2022.04.07 |