jQuery - DOM 요소의 속성을 추가 (또는 삭제)하기

다음 표를 이용해 요소에 새로운 속성을 추가하거나 변경, 제거할 수 있습니다.

메소드	설 명
.attr(attribute) .attr(attribute, value)	선택한 요소의 속성을 얻거나 설정 (HTML의 속성을 취급)
.removeAttr(attribute)	선택한 요소의 속성을 제거
.prop(attribute) .prop(attribute, value)	선택한 요소의 속성을 얻거나 설정 (javascript의 프로퍼티를 취급)
.removeProp(attribute)	선택한 요소의 속성을 제거
.addClass()	선택한 요소에 새로운 클래스를 추가
.removeClass()	선택한 요소에 해당하는 클래스를 삭제
.toggleClass()	선택한 요소에 지정한 클래스가 있으면 제거, 없으면 추가함
.hasClass()	선택한 요소의 클래스가 있으면 true, 아니면 false
.val()	선택한 요소의 value 값을 얻거나 설정

attr() 과 removeAttr()

attr() 은 선택한 요소의 속성을 얻거나 설정하고, removeAttr()로 지정한 속성을 제거할 수 있습니다. attr() 로 할 수 있는 일은 다음과 같습니다.

// 속성을 얻습니다.
$(selector).attr(attribute);

// 속성을 추가(또는 변경)합니다.
$(selector).attr(attribute, value);

// 함수를 이용해 추가(또는 제거)합니다.
$(selector).attr(attribute, function(){index, val});

// 여러 개의 속성을 한꺼번에 설정합니다.
$(selector).attr({
  attr1:'value',
  attr2:'value',
  attr3:'value'
  ...
});

다음은 ID 속성을 추가하거나 제거해 보겠습니다. 해당하는 속성이 없으면 속성을 새로 만듭니다.

<script>
$(function(){
 var mattr = $("div");

 // id 속성을 얻습니다.
 console.log(mattr.attr("id"));
 /* 결과: myattr */


 // id 속성을 변경합니다.
 mattr.attr("id", "habonyphp");
 console.log(mattr.attr("id"));
 /* 결과: habonyphp */


 // id 속성을 제거합니다.
 mattr.removeAttr("id");
 console.log(mattr.attr("id"));
 /* 결과: undifined */


 // class 속성을 얻습니다.
 console.log(mattr.attr("class"));
 /* 결과: 1 2 3 4 5 6 7 8 9 0 */


 // v-if 속성을 추가합니다.
 mattr.attr("v-if", "Your if")
 console.log(mattr.attr("v-if"));
 /* 결과: Your if */
});
</script>

<div id="myattr" class="1 2 3 4 5 6 7 8 9 0">
  하보니 PHP
</div>

선택한 요소에 여러 개의 속성을 한꺼번에 설정해 보겠습니다.

<script>
$(function(){
 var mattr = $("img");

 mattr.attr({
   "attr1": "your 1",
   "attr2": "your 2",
   "attr3": "your 3"
 });
 console.log(mattr.attr("attr2"));
 /* 결과: your 2 */
});
</script>

<img src="..."/>

prop() 와 removeProp()

형식은 attr() 과 같지만 다른 점이라면 javascript 의 프로퍼티를 취급합니다. 그러니까 태그 이름이나 노드 타입, 체크박스나 라디오 버튼에 체크된 값을 true 나 false 의 형식으로 얻어올 수 있습니다.

<script>
$(function(){
 var mattr = $("input[type='checkbox']");

 // .attr() 예제
 mattr.attr("checked", "checked");
 console.log(mattr.attr("checked"));
 /* 결과: checked */


 // .prop() 예제
 console.log(mattr.prop("checked"));
 /* 결과: true */

 mattr.prop("checked", false);
 console.log(mattr.prop("checked"));
 /* 결과: false */




 // 옵션의 선택된 인덱스를 얻습니다.
 // 선택된 인덱스는 세 번째 옵션입니다.
 var msel = $("#msel").prop("selectedIndex");
 console.log(msel);
 /* 결과: 2 */
});
</script>

<input type="checkbox" value="하보니">

<select id="msel">
  <option>선택1</option>
  <option>선택2</option>
  <option selected>선택3</option>
</select>

다음은 링크에 대한 예제입니다.

<script>
$(function(){
 var mattr = $("a");

 // .attr() 예제
 console.log(mattr.attr("href"));
 /* 결과: # */


 // .prop() 예제
 console.log(mattr.prop("href"));
 /* 결과: http://localhost:8080/referer.php# */
});
</script>

<a href="#">하보니 PHP</a>

addClass(), removeClass(), toggleClass()

<style>
.use-nth1 {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
.use-nth2 {
  background: red;
}
</style>

<script>
$(function(){
 var mattr = $("div#myattr");

 // class 속성에 use-nth 값을 추가합니다.
 mattr.addClass("use-nth1");
 mattr.addClass("use-nth2");


 // use-nth2 값을 제거합니다.
 mattr.removeClass("use-nth2");
});
</script>

<div id="myattr">
  하보니 PHP
</div>

다음은 toggleClass() 의 예제입니다.

<style>
.use-nth1 {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
.use-nth2 {
  background: red;
}
</style>

<script>
$(function(){
 var mattr = $("div#myattr");

 // use-nth1 값을 추가합니다.
 mattr.toggleClass("use-nth1");

 // use-nth1 값을 제거합니다.
 mattr.toggleClass("use-nth1");

 // use-nth2 값을 추가합니다.
 mattr.toggleClass("use-nth2");
});
</script>

<div id="myattr">
  하보니 PHP
</div>

val()

val() 를 이용하면 폼 요소의 value 값을 얻거나 설정할 수 있습니다.

<script>
$(function(){
 var mattr = $("input[type='text']");

 // 값을 얻습니다.
 console.log(mattr.val());
 /* 결과: 안녕 하보니 */

 // 값을 설정합니다.
 mattr.val("Hello Habony");
 console.log(mattr.val());
 /* 결과: Hello Habony */
});
</script>

<input type="text" value="안녕 하보니">