본문 바로가기
프런트엔드/jQuery

JQuery, attr() / prop() / get()

by greenyellow-s 2024. 8. 26.
728x90
attr() / prop()


jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다.
이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.

 


attr()

 

HTML에 작성된 속성값을 문자열로 받아온다

즉, 속성 값을 가져온다.


attr = #
attr = http://www.naver.com

[형식]
1. 속성값 가져오기
var 변수명 = $("요소").attr("속성이름");

2. 속성값 넣기
$("요소").attr("속성이름", "값");

$("요소").attr({
        "속성1이름": "값",
        "속성2이름": "값",
        "속성3이름": "값"
});

index = (index%4) + 1 //1,2,3,4

$(this).attr('src', '../image/' + index + '.png');

prop()

 

지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다

주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다
자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있다

 

즉, 해당 값이 의미하는 값을 가져온다


[형식]

속성값을 가져온다
.prop("속성이름")

 

속성값을 추가한다(넣기)
.prop("속성이름", "값")

prop = http://localhost:8080/jQuery/03_jQueryAttr/exam01.html#
prop = http://www.naver.com/

 


.get()

 

.get()메서드는 각 jQuery 개체의 기본이 되는 DOM 노드에 대한 액세스 권한을 부여합니다
.get()은 선택한 요소를 배열(Array)로 가져옵니다.

[형식]

선택한 모든 요소를 가져온다
.get()

 

선택한 요소 중 특정한 것만 가져온다
.get( index )

[예]

var ar = $("p").get();


p태그의 요소를 배열로 가져옵니다.

728x90