.attr() - 속성값 가져오기, 부여하기

.attr()

인자에 따라 2가지로 사용할 수 있습니다.

하나의 인자만 있다면 속성값을 가져오는 것이고

2개의 인자를 쓰면 속성값을 요소에 부여하는 것입니다. 아래 2가지 사용방법에 대해 설명되어 있습니다.

---

attr(attributeName)

• .attr( attributeName )

.attr() 함수는 선택자에 의해 선택된 요소들 중에서 제일 처음 요소의 속성값을 가지고 오는 함수입니다.

만일 모든 요소들의 속성값을 개별적으로 알고 싶다면, jQuery의 .each()함수나 .map() 함수를 사용해야 합니다.

ex)

<script>
    var title = $("em").attr("title");
    $("div").text(title);
</script>

ex) 클릭한 태그 id 가져오기

var click_id = $(this).attr('id');

ex) 클릭한 아이디 값(value) 가져오기

var click_val = $("#id").val();

---

attr(attributeName, value)

• .attr( attributeName, value )
• .attr( map )
• .attr( attributeName, function(index, attr) )

.attr()는 속성값을 알아내는 아주 편리한 함수입니다. 특히 함수를 이용하여 여러개의 속성을 세팅하거나 반환받은 속성값을 사용할 수 있습니다.

ex)

$('#greatphoto').attr('title', 'Photo by Kelly Clark');

ex) 여러개의 속성을 한번에 세팅하기 (map 사용, 속성명의 따옴표는 선택사항)

$('#greatphoto').attr({
    alt: 'Beijing Brush Seller',
    title: 'photo by Kelly Clark'
});

ex) Jquery의 attr() 함수를 활용하여 이미지 테그의 이미지 경로를 변경해 보자

HTML

<img id="my_image" src="first.jpg"/>

Jquery

$("#my_image").attr("src","second.jpg");

$("#my_image").bind("click", function() {
  $("#my_image").attr("src","second.jpg");
});

$("img").bind("click", function() {
  var src = ($(this).attr("src") === "img1_on.jpg")
  ? "img2_on.jpg"
  : "img1_on.jpg";
  $(this).attr("src", src);
});