각 요소에는 하나 이상의 속성이 있습니다. 이러한 속성의 목적은 해당 요소 또는 해당 콘텐츠에 대한 추가 정보를 제공하는 것입니다. 예를 들어 img 요소에서 src는 요소의 속성이며 이미지의 주소를 표시하는 데 사용됩니다.
DOM의 동작 특성에는 크게 getAttribute 메서드, setAttribute 메서드, RemoveAttribute 메서드 세 가지가 있습니다. 그럼에도 불구하고 실제 동작에는 여전히 많은 문제가 있을 것이므로 여기서는 다루지 않겠습니다. jQuery에서는 attr()과 RemoveAttr()을 사용하면 호환성 문제를 포함한 모든 것을 해결할 수 있습니다.
jQuery에서 attr() 메소드는 요소 속성을 얻고 설정하는 데 사용됩니다. jQuery에서 attr은 속성(attribute)의 약자입니다. DOM Attr()
attr()에는 4개의 표현식이 있습니다
attr(속성 이름 전달): 속성 값 가져오기
attr(속성 이름, 속성 값): 속성 값 설정
attr (속성명, 함수값) : 속성의 함수값을 설정
attr(attributes) : 지정된 요소에 대해 여러 속성값을 설정합니다. 즉, {속성명 1 : "속성값 1", 속성명 2 : "속성 값 2”, … … }
removeAttr()Removal method
.removeAttr(attributeName): 일치하는 요소 집합의 각 요소에서 속성(attribute)을 제거합니다
장점:
attr 및 RemoveAttr은 둘 다 속성 작업을 위해 jQuery에 의해 캡슐화됩니다. jQuery 객체에서 직접 이 메서드를 호출하면 속성을 쉽게 조작할 수 있으며 브라우저에서 다른 속성 이름의 문제를 특별히 이해할 필요가 없습니다
참고 질문: 거기
dom의 개념적 구분입니다. 속성과 속성은 모두 "속성"으로 번역되며 "JS 고급 프로그래밍"이라는 책에서는 "기능"과 "속성"으로 번역됩니다. 쉽게 이해하면 Attribute는 dom 노드에 딸려오는 속성입니다
예: id, class, title, align 등 HTML에서 흔히 사용되는
<div id="phpcn" title="php中文网"></div>
그리고 Property는 객체로서의 DOM 요소이며, 이에 대한 추가 tagName, nodeName, nodeType, defaultChecked 및 defaultSelected와 같은 콘텐츠는 .prop() 메서드를 사용하여 값을 얻거나 할당하는 등의 작업을 수행합니다.
속성을 얻으려면 attr을 사용해야 하고, 속성을 얻으려면 다음을 수행해야 합니다. prop
이미지를 변경하려면 아래 예를 살펴보겠습니다. 속성 값
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<img src="1.jpg" width="200" height="200" id="img">
<script type="text/javascript">
$("#img").attr('width','400');
</script>
</body>
</html>참고: 먼저 이 사진 1.jpg가 있어야 합니다. 그런 다음 결과를 실행하세요
attr() 메서드를 사용하여 속성 값을 가져오는 방법은 아래 예를 보세요
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
alert($("#ipt").attr('value'));
</script>
</body>
</html>팝업 상자에 표시되는 내용은 php 중국 웹사이트임을 알 수 있습니다
removeAttr() 아래 요소의 내용을 삭제하는 방법을 살펴보겠습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<input type="text" value="php 中文网" id="ipt">
<script type="text/javascript">
$("#ipt").removeAttr("value");
</script>
</body>
</html>참고: 원래 텍스트 상자에는 스크립트 언어가 실행될 때 텍스트 내용이 있습니다. 삭제됨
다음 섹션