[jQuery] #4 속성 관련 메소드

1. 요소와 속성

 

<img src="../images/k7.png" alt="라이언" title="ryan">

 

 위의 코드를 살펴보자.

 <img> 태그는 요소(element) 라고 불린다.

 그리고 그 안에 있는 src, alt, tilte과 같은 것들을 속성(property, attribute)이라고 부른다.

 

 jQuery에서 요소에 접근을 하는 메서드로 우리는 이전 게시글에서 text(), html(), css() 와 같은 것을 배웠다.

 그리고 이번 게시글에서는 속성에 접근하는 함수를 배우려한다.

 각 영어의 앞자리를 따서 prop(), attr() 함수가 있다.

 

1) title 값 가져오기

 위의 코드에서 <img> 의 title 값을 가져오는 방법은 아래와 같다(getter 개념).

$("button:eq(0)").click(function(){
    // alert();
    // <img> 요소의 title 속성값 가져오기(getter 개념)
    let title = $("img").attr("title");
    alert(title);
}); // click end

 

 

2) src 값 변경하기

 이번엔 src 속성의 값을 변경해보자.

 이미지의 주소를 바꿔주는(setter) 버튼이다.

$("button:eq(1)").click(function(){
    // setter 개념
    $("img").attr("src", "../images/k6.png");
}); // click end

 

3) 여러 속성 값 변경하기

 마지막으로는 여러 속성 값을 변경하는 방법이다.

$("button:eq(2)").click(function(){
    let obj={
                 "width":400
                ,"height":300
                ,"src":"../images/k1.png"
                ,"alt":"콘"
                ,"title":"CON"
            };

    $("img").attr(obj);
}); // click end