고정 헤더 영역
상세 컨텐츠
본문
.attr (attributeName) return : string
설명 : 일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.
추가 된 버전 : 1.0.attr (attributeName)
attributeName
유형 : 문자열
가져올 속성의 이름입니다.
.attr () 메서드는 일치하는 집합의 첫 번째 요소에 대한 속성 값만 가져옵니다. 각 요소의 값을 개별적으로 얻으려면 jQuery의 .each () 또는 .map () 메서드와 같은 반복 구조를 사용하십시오.
jQuery의 .attr () 메서드를 사용하여 요소의 속성 값을 가져 오면 두 가지 주요 이점이 있습니다.
편의성 : jQuery 객체에서 직접 호출하고 다른 jQuery 메서드에 연결할 수 있습니다.
브라우저 간 일관성 : 일부 속성의 값은 브라우저와 단일 브라우저 버전간에 일관성없이보고됩니다. .attr () 메서드는 이러한 불일치를 줄입니다.
참고 : 속성 값은 value 및 tabindex와 같은 몇 가지 속성을 제외하고 문자열입니다.
jQuery 1.6부터 .attr () 메서드는 설정되지 않은 속성에 대해 undefined를 반환합니다. 양식 요소의 확인, 선택 또는 비활성화 상태와 같은 DOM 속성을 검색하고 변경하려면 .prop () 메서드를 사용합니다.
elem.checked
- true (Boolean) 상태로 변경됩니다.
$ (elem) .prop ( "checked")
- true (Boolean) 상태로 변경됩니다.
elem.getAttribute ( "checked")
“checked"
(String) 체크 박스의 초기 상태. 변하지 않는다
$ (elem) .attr ( "checked") (1.6)
“checked"(문자열) 확인란의 초기 상태; 변하지 않는다
$ (elem) .attr ( "checked") (1.6.1+)
“checked"(문자열) 체크 박스 상태로 변경됩니다.
$ (elem) .attr ( "checked") (1.6 이전)
true (bool) 체크 박스 상태로 변경됨
W3C 양식 사양에 따르면 확인 된 속성은 bool 속성입니다. 즉, 속성이 전혀 존재하지 않으면 해당 속성이 true입니다. 예를 들어 속성에 값이 없거나 빈 문자열 값으로 설정되어 있거나 false등은 모든 부울 속성에 해당됩니다.
그럼에도 불구하고 체크 된 속성에 대해 기억해야 할 가장 중요한 개념은 체크 된 속성과 일치하지 않는다는 것입니다. 속성은 실제로 defaultChecked 속성에 해당하며 확인란의 초기 값을 설정하는 데만 사용해야합니다. 확인 된 속성 값은 확인란의 상태에 따라 변경되지 않지만 확인 된 속성은 변경됩니다. 따라서 확인란이 선택되었는지 확인하는 브라우저 간 호환 방법은 속성을 사용하는 것입니다.
if (elem.checked)
if ($ (elem) .prop ( "checked"))
if ($ (elem) .is ( ": checked"))
selected 및 value와 같은 다른 동적 속성에 대해서도 마찬가지입니다.
추가 사항 :
버전 9 이전의 Internet Explorer에서 .prop ()를 사용하여 DOM 요소 속성을 단순한 기본 값 (숫자, 문자열 또는 부울) 이외의 다른 값으로 설정하면 속성이 제거되지 않은 경우 (.removeProp (사용) 메모리 누수가 발생할 수 있습니다. )) DOM 요소가 문서에서 제거되기 전에. 메모리 누수없이 DOM 객체에 안전하게 값을 설정하려면 .data ()를 사용하세요.
* 예제 1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
p {
margin: 20px 0 0;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<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>
</body>
</html>
* 예제 2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr demo</title>
<style>
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>
</body>
</html>
[ 출처 : api.jquery.com ]
'자바스크립트 > jquery' 카테고리의 다른 글
| Jquery Form Serialize Disabled 컨트롤 넘기는 방법 (0) | 2021.03.24 |
|---|---|
| [JQuery] input 객체 - readonly, disabled 처리 (0) | 2021.03.24 |
| jQuery.merge(first, second) Returns:Array (0) | 2021.02.09 |
| jQuery.map() (0) | 2021.02.08 |
| .children() (0) | 2021.02.03 |
댓글 영역