제이쿼리 속성추가, 제거, jquery attr(), removeAttr()

 

제이쿼리 속성추가, 제거, jquery attr(), removeAttr()

 

- attr() 사용방법

jquery 의 attr() 메소드는 선택된 요소의 속성이나 값을 설정, 또는 리턴하는데 사용된다.

이 메소드가 그 속성값을 리턴할 때, 이것은 첫번째로 매치되는 요소의 값을 리턴한다.

이 메소드가 그 속성값을 설정할때, 이것은 매치되는 요소들의 하나 이상의 속성/값의 묶음으로 설정한다.

 

1. 속성값을 리턴

$(selector).attr(attribute)

 

예)

<img src="img.jpg" alt="Pulpit Rock" width="284" height="213"><br>

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Image width: " + $("img").attr("width"));
    });
});
</script>​

 

이미지가 있을 때 이 요소의 width 속성값을 경고창에 띄우는 예이다. 

 

2. 속성과 값을 설정

$(selector).attr(attribute,value)

 

예)

<img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr("width", "500");
    });
});
</script>​

 

버튼 클릭시 width 속성값을 500으로 변경하는 예이다.

 

3. 함수를 사용한 속성과 값을 설정

$(selector).attr(attribute,function(index,currentvalue));

 

예)

<img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"><br>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr("width",function(n, v){
            return v - 50;
        });
    });
});
</script>

 

버튼클릭 시 img 요소의 인덱스값과 width 현재값을 받아 -50px 씩 줄이는 예이다.

 

- RemoveAttr() 사용방법

이 메소드는 선택된 요소들의 하나 또는 그 이상의 속성을 제거하는데 사용된다. 

 

속성을 선택후 제거

$(selector).removeAttr(attribute);​

 

예)

<p style="font-size:120%;color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another paragraph.</p>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").removeAttr("style");
    });
});
</script>​

 

모든 p 요소의 style 속성을 제거하는 예이다.