jquery
jQuery - DOM 요소의 속성을 추가 (또는 삭제)하기
다음 표를 이용해 요소에 새로운 속성을 추가하거나 변경, 제거할 수 있습니다.
다음은 ID 속성을 추가하거나 제거해 보겠습니다. 해당하는 속성이 없으면 속성을 새로 만듭니다.
선택한 요소에 여러 개의 속성을 한꺼번에 설정해 보겠습니다.
다음은 링크에 대한 예제입니다.
다음은 toggleClass() 의 예제입니다.
메소드 | 설 명 |
---|---|
.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="안녕 하보니">
0 댓글