jquery 속성 및 스타일(1)

각 요소에는 하나 이상의 속성이 있습니다. 이러한 속성의 목적은 해당 요소 또는 해당 콘텐츠에 대한 추가 정보를 제공하는 것입니다. 예를 들어 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>

참고: 원래 텍스트 상자에는 스크립트 언어가 실행될 때 텍스트 내용이 있습니다. 삭제됨

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전