본문 바로가기
개념정리

jQuery 속성 메서드

by 🐬마뇽뇽 마뇽🦄 2022. 9. 3.
728x90

jQuery 속성 메서드

attr() 메서드

실행 분류 형식
취득 $("a").attr("href")
생성, 변경 $("a").attr("href","http://icoxpublish.com").attr("target","_blank")
$("a").attr({href : "http://icoxpublish.com" , target : "_blank" });
콜백함수 $("a").attr("href" ,function(index,h){
    //index는 각 a 요소의 index 0,1,2
    //h 각 a 요소 href 속성
    return attribute 속성 // 각 a 요소의 속성을 생성 및 변경합니다.
});
....
<a href="http://www.daum.net" target="_blank" title-"새창">다음</a>
<a href="http://www.naver.net" target="_blank" title-"새창">네이버</a>
<a href="http://www.nate.net" target="_blank" title-"새창">네이트</a>

위의 예시를 사용하여 jQuery를 사용해보았습니다.


🐳 jQuery 속성 메서드의 코드만 보기
$(document).ready(function () {
    console.log($("#site > a:eq(0)").attr("href"));
    $("#site > a:eq(1)").attr("href", "http://m.naver.com").text("네이버 모바일");
    $("#site a").attr("title", function () {
        return "새창";
    });
});

prop() 메서드

attr()가 html attribute(속성)에 관련된 메서드라면 prop()는 자바스크립트 property(프로퍼티)에 관련된 메서드 입니다.
prop()메서드는 요소의 속성을 true,false로 제어할 수 있습니다.

보시다 싶이 attr() 메서드는 checked 속성이 요소에 추가되는 반면 prop()메서드의 ture는 자바스크립트의 프로퍼티로 처리 됩니다.

위의 예시를 사용하여 jQuery를 사용해보았습니다.


🐳 jQuery 속성 메서드의 코드만 보기
$(document).ready(function () {
    console.log($("input:checkbox").eq(0).attr("checked"));
    console.log($("input:checkbox").eq(1).prop("checked"));
    $("input:checkbox").eq(0).attr("checked", "checked");
    $("input:checkbox").eq(1).prop("checked", true);
    console.log($("input:checkbox").eq(0).attr("checked"));
    console.log($("input:checkbox").eq(1).prop("checked"));
});

728x90

'개념정리' 카테고리의 다른 글

jQuery 스타일 메서드  (10) 2022.09.03
jQuery 클래스 메서드  (4) 2022.09.03
jQuery 탐색 선택자  (4) 2022.08.31
jQuery 필터 선택자  (4) 2022.08.31
jQuery 속성 선택자  (3) 2022.08.31

댓글


고양이 고양이
고양이 고양이
고양이 고양이