📌 .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>
<참고자료>
https://jin-network.tistory.com/105
[jQuery] attr()과 prop()의 차이
# attr()? prop()? jQuery를 통해서 동적으로 화면구성을 만들 때 selector를 통해 선택한 element나 append하면서 새롭게 생성되는 element에 특정한 속성을 지정하게 되는 경우에 attr()과 prop()을 사용한다. attr
jin-network.tistory.com
jQuery 입문 | CSS 스타일 및 프로퍼티 설정 | 프로퍼티 설정 .attr() .prop()
프로퍼티 설정 다음 메소드를 사용하면 특정 프로퍼티의 값을 받아오나 설정할 수 있다. 메소드 설명 .attr() 선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요
www.devkuma.com
'LANGUAGE > JavaScript' 카테고리의 다른 글
| [Tagify] jQuery + Tagify 라이브러리 사용하여 태그 만들기 (0) | 2024.04.22 |
|---|---|
| [jQuery] 새 창 띄워 사이트 이동하는 법 (0) | 2024.03.12 |
