안녕하세요. 명월입니다.
이번 포스트는 Jquery의 어트리뷰트 관련 함수에 대해서 공부하겠습니다. 먼저 어트리뷰트 관련 함수란 말 그대로 태그의 속성을 설정, 취득할 수 있는 함수입니다.
태그의 속성은 <a href="#" id="test"></a>에서 href, id 등을 뜻합니다.
Jquery에서 제공하는 어트리뷰트 함수는 addClass, hasClass, toggleClass, removeClass, attr, prop, removeAttr, removeProp, html, val로 10가지 종류가 있습니다
참고 - Jquery Api Document
| 함수 | 설명 |
|---|---|
| .addClass() | class속성에서 클래스를 추가합니다. |
| .hasClass() | class속성에서 클래스가 있는지 확인한다. |
| .toggleClass() | class속성에서 클래스가 있으면 추가, 없으면 제거한다. |
| .removeClass() | class속성에서 클래스를 제거한다. |
| .attr() | 속성을 추가, 수정, 값을 반환한다. |
| .removeAttr() | 속성을 제거한다. |
| .prop() | 프로퍼티를 추가, 수정, 값을 반환한다. |
| .removeprop() | 프로퍼티를 제거한다. |
| .html() | 하위 node에 html요소를 취득, 설정한다. |
| .val() | value 속성값을 취득, 설정한다. |
위 함수 중에서 분류하면 class 관련 함수와 속성 관련 함수, 프로퍼티 관련 함수로 나뉩니다.
class 관련 함수는 설명 그대로 클래스를 추가, 제거, 삭제, 토글이 있습니다.
그리고 속성과 프로퍼티의 함수는 유사해 보이지만 다른 것입니다. 속성함수는 DOM의 있는 속성을 취득, 설정하는 것이고, 프로퍼티 함수는 DOM을 object화 했을 때의 프로퍼티 값을 취득, 설정하는 것입니다.
마지막으로 html()은 태그의 하윗값을 설정하는 것이고(Javascript에서는 innerHTML과 같습니다.) val은 prop("value")과 같은 형태이지만 value의 프로퍼티를 자주 사용하는 편이라서 함수형태로 있는 듯합니다. (개인적인 생각입니다)
그리고 attr과 prop의 차이에 대해서 많이 헷갈리시는 분이 있어서 추가 설명을 하면 attr을 그대로 DOM의 속성값을 가져오는 것이고 prop은 DOM을 object화 한 후 프로퍼티 값을 취득하는 함수입니다.
이 차이의 예로 가장 좋은 게 checkbox의 checked속성을 attr과 prop로 취득하면 attr은 checked, prop는 true 값을 반환합니다.
예제를 통해서 자세히 공부하겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
div.testDiv.on{
background-color:blue;
}
</style>
<BODY>
<div class="testDiv">TEST</div>
<input type="checkbox" class="idInput" checked="checked"><br />
<span class="propOutput"></span><br />
<span class="attrOutput"></span><br />
<button onclick="addTest()">add</button><br />
<button onclick="removeTest()">remove</button><br />
<button onclick="hasTest()">has</button><br />
<button onclick="toggleTest()">toggle</button><br />
<button onclick="checkTest()">check</button>
<script>
function addTest(){
$("div.testDiv").addClass("on");
}
function removeTest(){
$("div.testDiv").removeClass("on");
}
function hasTest(){
if($("div.testDiv").hasClass("on")){
$("span.propOutput").html("on");
}else{
$("span.propOutput").html("off");
}
$("span.attrOutput").html($("span.propOutput").html()+" TEST");
}
function toggleTest(){
$("div.testDiv").toggleClass("on");
}
function checkTest(){
$("span.attrOutput").html($("input[type=checkbox].idInput").attr("checked"));
$("span.propOutput").html($("input[type=checkbox].idInput").prop("checked"));
}
</script>
</BODY>
</HTML>
최대한 많은 예제를 담으려고 했는데 removeAttr과 removeProp는 만들기가 어렵네요.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [HTML] 메타 태그(SEO 최적화 포함) (0) | 2020.01.12 |
|---|---|
| [HTML] Html의 태그 구조 (1) | 2020.01.09 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events) (0) | 2016.03.30 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment) (2) | 2016.03.29 |
| [Jquery, CSS] Jquery의 CSS 관련 함수 (0) | 2016.03.28 |
| [Jquery] Selector (선택자) (0) | 2016.03.26 |
| [Jquery] Ajax(비동기 통신)와 Json (0) | 2015.07.05 |
| [Jquery] Jquery 기초 (0) | 2015.07.04 |