[HTML_CSS] JQ - prop() 메서드 - 속성과 속성값 설정/반환. (= prop메서드 = 프랍메서드 = 프롭메서드) ※ (prop / attr) 차이

목차

1. prop() 예제 - 속성값 반환
2. prop() 정의
3. prop() 구문
4. prop() 예제 - cf. attr() 메서드

prop() 예제 - 속성값 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var $x = $("div");

    $x.prop("color", "red");

    $x.append($x.prop("color"));

    $x.removeProp("color");

    $x.append("<br>" + $x.prop("color"));

  });

});

</script>

 

<button>클릭</button>

<div></div>

 

결과보기

결과값:

red

undefined

prop() 정의

 

선택요소의 속성과 속성값을 설정/반환.

※ 속성값 반환 경우, 맨 처음 일치 요소의 속성값 반환.

※ 속성값 설정 경우, 모든 일치 요소의 속성/속성값 설정.

 

---

1.

속성값 검색하는 데 사용.
(예 : tagName, nodeName, defaultChecked와 같은 DOM 속성 또는 사용자 정의 속성의 속성값들)

2.

attr() 메서드 : HTML의 속성 검색.

removeProp() 메서드 : HTML의 속성 제거.

 

prop() 구문

 

속성값 반환
$(selector).prop(property)

 

'속성/속성값' 설정
$(selector).prop(property,value)

함수 사용해 '속성/속성값' 설정

$(selector).prop(property,function(index,currentvalue))

여러 '속성/속성값' 설정

$(selector).prop({property:value, property:value,...})

 

---

[매개변수]

 

property

속성명

 

value

속성값

 

function (index, currentvalue)

설정할 속성값 반환하는 함수 지정.

 

index

set 내 요소의 색인번호 지정.

 

currentvalue

선택요소의 현재 속성값.

 

prop() 예제 - cf. attr() 메서드

※ 두 메서드가 서로 다른 값을 반환할 가능성 존재.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#hz").html("attr('checked'): " + $("input").attr('checked')

    + "<br>prop('checked'): " + $("input").prop('checked'));

  });

});

</script>

<button>클릭</button>

<label for="homzzang">

<input id="homzzang" type="checkbox" checked="checked">

Check me</label>

<p id="hz"></p>

 

결과보기

결과값:

attr('checked'): checked

prop('checked'): true