jQeury 를 이용해 태그(Tag)속성 값 가져오는 방법 : attr

안녕하세요!

날씨가 너무 좋아 한강이 가고싶은 날입니다.

미세먼지도 없어요!

Milkye입니다~

오늘은 Jquery를 이용해서 태그(tag)의 속성값들을 뽑아오는 방법에 대해서 알아보려고 합니다. 생각보다 이 값들을 뽑아서 커스터마이징을 하는 경우가 많아서 유용하게 쓰입니다.

처럼 input 태그에 설정이 된 값들을 말합니다. 여기선 id, name, value, type 등이 있겠네요

이 태그 속성을 가져오는 방법은 간단합니다.

바로 Jquery의 attr함수를 이용해서 뽑아내는 것이지요.

1
2
3
4
<input type="text" id="data" name="data" value="">
 
$("#data").attr("id");
$("#data").attr("name");
cs

사용법은 이렇습니다.

3,4번 줄처럼 속성명을 입력해서 값을 뽑아낼 수 있습니다.

3번은 ID를 뽑아내고 싶을 때, 4번은 NAME을 뽑아내고 싶을 때 사용을 합니다.

1
$("#data").attr("name","data2");
cs

해당방법으로 NAME의 값을 data 에서 data2로 변경을 할 수도 있습니다.

Jquery의 버전이 1.6.X를 넘어가면서 새로 생긴 함수가 있습니다.

바로 prop()입니다.

이 친구는 체크값을 확인할 때 많이 사용을 합니다.

즉, True & False를 체크할 때 많이 사용이 되는 친구죠.

주로 체크박스나 라디오 박스에서 사용을 합니다.

attr과 prop의 차이점을 알아보도록 하죠. 아래 코드를 통해서요!

<input type="checkbox" id="check1" /> 
<input type="checkbox" id="check2" checked="checked" />
 
 
$ function() {
    //attr을 이용해 체크박스의 값을 변경할 때
    $("#check1").attr("checked");
    $("#check2").attr("checked");
 
    //prop를 이용할 때
    $("#check1").prop("checked");
    $("#check2").prop("checked");
}
Colored by Color Scripter
cs