반응형

안녕하세요!

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


미세먼지도 없어요!

Milkye입니다~


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

<input type="text" id="data" name="data" value="">

처럼 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");
}
cs


이런식으로 사용을 하고, 결과를 보게 된다면


attr을 사용하면 [ Undefined ] [Checked]

prop를 사용하면 [false] [true]



가 찍히는 것을 볼 수 있습니다. prop를 썼을때는 Check의 상태를 한번에 알아볼 수 있어서 좋죠.


해당 방법으로 손쉽게 태그의 속성값을 뽑아올 수 있습니다!

그럼 안뇽!


반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기