728x90
attribute와 property의 차이
<input type="checkbox" name="hobby" value="드라이브" checked>
<input type="checkbox" name="hobby" value="드라이브" checked="checked">//옛날 문법
attr()
- 해당 요소의 명시된 속성의 속성값을 반환하거나 설정
prop()
- 제이쿼리 1.6부터 정의된 메소드
- 선택한 요소 집합의 첫번째 요소의 지정된 프로퍼티 값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 곳으로 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>attr와 prop차이</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
console.log($('input:checkbox').eq(0).attr('checked')); //check가 설정 안돼있어서 undefind
console.log($('input:checkbox').eq(0).prop('checked')); //check 가 안돼있으니 false
$('input:checkbox').eq(0).attr('checked', 'checked'); //설정은 가능
$('input:checkbox').eq(1).prop('checked', 'true'); //추천
console.log($('input:checkbox').eq(0).attr('checked')); //checked
console.log($('input:checkbox').eq(0).prop('checked')); //true
console.log($('input:checkbox').eq(1).attr('checked')); //undefind( check는 돼있으나 attr을 사용해서 만든게 아님)
console.log($('input:checkbox').eq(1).prop('checked')); //true
})
</script>
</head>
<body>
<h2>attr와 prop차이</h2>
<input type="checkbox" id="html"><label for="html">HTML</label>
<input type="checkbox" id="css"><label for="css">CSS</label>
</body>
</html>
728x90
'JS > jQuery' 카테고리의 다른 글
| [jQuery] 이벤트 (0) | 2022.05.09 |
|---|---|
| [jQuery] 클래스 (0) | 2022.05.09 |
| [jQuery] 박스 모델 메소드 (0) | 2022.05.09 |
| [jQuery] 요소의 탐색 (0) | 2022.05.09 |
| [jQuery] 요소 (0) | 2022.05.09 |