[jQeury] 속성 Attributes

1. .attr()

: attr(attributeName)- 매치되는 집합의 첫번째 요소에서 매개변수로 전달받은 속성의 이름에서 속성의 값을 가져오기

: attr(attributeName, value) - 매치되는 집합의 모든 요소에 속성의 이름에 속성 값을 설정하기

: 예) $("button").click(function(){

$("img").attr("width", "500");

});

: 문법

1) attribute의 값을 return : $(selector).attr(attribute)

2) attribute의 값을 설정 : $(selector).attr(attribute, value)

3) function을 사용하여 값을 설정 : $(selector).attr(attribute, function(index, currentvalue))

4) 다중 attributes와 값을 설정 : $(selector).attr({attribute:value, attribute:value,...})

 

2. .prop()

: 선택된 요소의 값이나 속성을 설정하거나 반환한다.

: 선택된 속성 값을 반환할 때는 그 첫번째 일치하는 요소의 값을 반환한다.

: 속성 값을 설정할 때는 일치하는 요소의 집합에 대해 하나 이상의 속성/값 쌍을 설정한다.

: HTML attributes 검색하려면 attr() method를 사용하고, 속성을 제거하려면 removeProp() 메서드를 사용한다.

: 예) $("button").click(function() {

var $x = $("font");

$x.prop("color", "#FF0000");

$x.append("색상값은 다음과 같아요 : " + $x.prop("color"));

});

: 문법

1) attribute의 값을 return : $(selector).prop(property)

2) property와 값을 설정 : $(selector).prop(property, value)

3) function을 사용하여 값을 설정 : $(selector).prop(property, function(index, currentvalue))

4) 다중 attributes와 값을 설정 : $(selector).prop({property:value, property:value,...})

 

3. .removeAttr()

: 선택된 요소의 하나 이상의 속성들을 삭제한다.

: 문법 - $(selector).removeAttr(attribute)

: 예) $("button").click(function() {

$("p").removeAttr("style");

});

 

4. .removeProp()

: prop()에 의해 설정된 속성만을 제거한다.

: HTMl attributes를 제거할 때는 사용 못하고 이때는 removeAttr()을 사용한다.

: 문법 - $(selector).removeProp(property)

: 예) $("button").click(function() {

var $x = $("div");

$x.prop("color", "#FF0000");

$x.append("색상값은 다음과 같아요 : " + $x.prop("color"));

$x.removeProp("color");

$x.append(" <br> 삭제 후 색상은 다음과 같다 " + $x.prop("color"));

});

 

5. val()

: 선택된 요소의 값이나 속성을 설정한다.

: 값을 반환하는데 사용하는 경우 - 첫 번째 일치하는 요소의 value 속성의 값을 반환한다.

: 값을 설정하는데 사용하는 경우 - 모든 일치하는 요소의 value 속성의 값을 설정한다.

: .val() 메서드는 대부분 HTML form element와 함께 사용된다.

: 문법

1) value attribute을 리턴할 때 - $(selector).val()

2) value attribute을 설정할 때 - $(selector).val(value)

3) function을 사용하여 attribute을 설정할 때 - $(selector).val(function(index, currentvalue))

: 예) $("button").click(function() {

alert($("input:text").val());

});