LANGUAGE/JavaScript
[jQuery] attr() 과 prop()의 차이
31daylee
2024. 3. 20. 11:28
728x90
📌 .attr() 메서드와 .prop() 메서드
.attr()
1 ) 의미 :
선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달 받은 값으 로 설정합니다.
ex) <input type="text" id="myInput">에서 type과 id는 속성입니다.
2) 데이터 타입의 처리:
항상 문자열을 반환합니다. 속성 값이 숫자 또는 불리언 등 다른 타입이더라도 문자열로 반환됩니다.
3) 사용 예시 :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(document).ready(function(){
// HTML 속성을 변경하는 예시
$("#myInput").attr("type", "checkbox"); // HTML 속성을 변경합니다.
// 값을 가져오는 예시
var typeAttr = $("#myInput").attr("type"); // "checkbox"를 반환합니다.
// 결과 출력
console.log("Type attribute:", typeAttr);
});
</script>
</head>
<body>
<input type="text" id="myInput"> <!-- 기본적으로 type은 text로 설정되어 있습니다. -->
</body>
</html>
.prop()
1) 의미 :
선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달 받은 값으로 설정합니다.
2) 데이터 타입의 처리:
요소의 속성 값의 데이터 타입을 유지합니다. 따라서 숫자, 불리언 또는 기타 원시 타입을 반환할 수 있습니다.
3) 사용 예시 :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(document).ready(function(){
// DOM 속성을 변경하는 예시
$("#myInput").prop("checked", true); // DOM 속성을 변경합니다.
// 값을 가져오는 예시
var checkedProp = $("#myInput").prop("checked"); // true를 반환합니다.
// 결과 출력
console.log("Checked property:", checkedProp);
});
</script>
</head>
<body>
<input type="text" id="myInput"> <!-- 기본적으로 type은 text로 설정되어 있습니다. -->
</body>
</html>
<참고자료>
728x90