집 >웹 프론트엔드 >JS 튜토리얼 >attr()을 사용하여 jquery의 어떤 속성에 액세스해야 합니까?

attr()을 사용하여 jquery의 어떤 속성에 액세스해야 합니까?

坏嘻嘻원래의: 2018-09-14 15:23:541290검색

jQuery on() 메서드는 이벤트 바인딩을 위해 공식적으로 권장되는 메서드입니다.

먼저 두 메서드의 차이점을 설명하세요.

1 attr() 메서드에 매개변수가 하나만 있는 경우 두 매개변수는 첫 번째 매개변수의 속성값을 설정합니다.

2 prop() 메서드의 반환 값은 표준 속성(true 또는 false)입니다. 속성 설정 시 true 또는 false만 설정할 수 있습니다.

다음은 Chrome 브라우저에서 테스트한 결과입니다.

Return 속성:

    <input type="checkbox" name="item" id="radio-item1" checked/>1
    <input type="checkbox" name="item" id="radio-item2" checked="checked"/>2
    <input type="checkbox" name="item" id="radio-item3" checked="true"/>3

    <script src="jquery.min.js"></script>
    <script>
       var value1 = $("#radio-item1").attr("checked");
       var value2 = $("#radio-item2").attr("checked");
       var value3 = $("#radio-item3").attr("checked");
       var value4 = $("#radio-item1").prop("checked");
       var value5 = $("#radio-item2").prop("checked");
       var value6 = $("#radio-item3").prop("checked");

       console.log(value1);  //checked
       console.log(value2);  //checked
       console.log(value3);  //checked
       console.log(value4);  //true
       console.log(value5);  //true
       console.log(value6);  //true
    </script>

속성 설정:

<body>
    <input type="checkbox" name="item" id="radio-item1" />1
    <input type="checkbox" name="item" id="radio-item2" />2
    <input type="checkbox" name="item" id="radio-item3" />3
    <input type="checkbox" name="item" id="radio-item4" />4
    <input type="checkbox" name="item" id="radio-item5" />5
    <input type="checkbox" name="item" id="radio-item6" />6

    <script src="jquery.min.js"></script>
    <script>
       $("#radio-item1").attr("checked","checked");
       $("#radio-item2").attr("checked","true");
       $("#radio-item3").attr("checked","");
       $("#radio-item4").prop("checked","checked");
       $("#radio-item5").prop("checked","true");
       $("#radio-item6").prop("checked","");


       var value1 = $("#radio-item1").attr("checked");
       var value2 = $("#radio-item2").attr("checked");
       var value3 = $("#radio-item3").attr("checked");
       var value4 = $("#radio-item4").prop("checked");
       var value5 = $("#radio-item5").prop("checked");
       var value6 = $("#radio-item6").prop("checked");

       console.log(value1);  //checked
       console.log(value2);  //checked
       console.log(value3);  //checked
       console.log(value4);  //true
       console.log(value5);  //true
       console.log(value6);  //false
    </script>
</body>

속성을 읽을 때 확인된 속성이 설정되어 있는 한 prop()은 true를 읽을 수 있고 attr()은 selected를 읽을 수 있음을 알 수 있습니다. 속성을 설정할 때 prop()에서 설정한 값은 true 또는 false이고, 빈 문자열은 false입니다. 단, attr()에서는 설정한 값이 무엇이든 상관 없으며 설정되어 있으면 검사합니다.

prop() 메소드로 설정된 속성은 HTML 미리보기 중에는 볼 수 없다는 점에 유의할 가치가 있습니다.

attr()을 사용하여 jquery의 어떤 속성에 액세스해야 합니까?

prop 메서드에는 두 가지 원칙이 있습니다.

첫 번째 원칙: 속성 이름을 추가하면 속성이 적용됩니다. Prop()을 사용해야 합니다.

두 번째 원칙: true/false 속성만 사용해야 합니다. 존재 prop() 사용

attr()을 사용하여 jquery의 어떤 속성에 액세스해야 합니까?

관련 기사