-
Notifications
You must be signed in to change notification settings - Fork 0
/
3-5-4-jQuery의속성API.html
59 lines (54 loc) · 2.71 KB
/
3-5-4-jQuery의속성API.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!--
jQuery 객체에서도 Element API에 해당하는 기능을 구사한다.
그중에서 jQuery 객체의 메소드 중 Element의 속성 API와 대응되는 메서드는, attr가 있다.
이것은 Element 객체의 getAttribute, setAttribute와 같으며,
removeAttribute 와 대응되는 jQuery 메서드는 removeAttr 이가 있다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 객체의 속성 API</title>
</head>
<body>
<ul>
<li id='bool' class='bosal'>나무상주시방불</li>
<li class='beob'>나무상주시방법</li>
<li class='seung'>나무상주시방승</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js'></script>
<script>
var t = $('#bool')
console.log(t) // 해당 jQuery 객체(li class='bosal')
console.log(t.attr('class')) // bosal(원래 속성값)
t.attr('class', 'buddha')
console.log(t.attr('class')) // buddha(변경한 속성값)
/*
.attr()
jQuery 객체뒤에 .attr('속성명')으로 해당 객체의 속성에 대한 속성값을 접근할 수 있다.
이것으로, .getAttribute() 처럼 속성값을 구할 수도 있고,
.setAttribute() 처럼 속성값을 변경할 때는,
.attr('속성명', '바꿀속성값') 과 같이 해서 속성값을 변경할 수도 있다.
*/
t.removeAttr('class')
console.log(t.attr('class')) // undefined(삭제한 속성값)
/*
.removeAttr()
.removeAttribute 처럼 속성값을 삭제할 때는, jQuery에서는 .removeAttr('삭제할 속성명')으로 해당 속성을 제거할 수 있다.
*/
</script>
</body>
</html>
<!--
Element 객체의 API에서 직접 html속성을 접근하는 것(속성API)과, js의 프로퍼티를 이용하는 방법(식별자API)이 있었다.
마찬가지로 jQuery 객체에서도 속성, 아니면 프로퍼티를 이용하는 2가지 방법이 있는데,
속성은 위에서 배운 attr 메서드를 사용하고, 프로퍼티는 prop 메서드를 사용한다.
.prop('속성명')
과 같이해서, 해당 속성명의 프로퍼티를 접근할 수 있다.
이것을 이용해서 .prop('속성명') 하면, 속성값을 접근할 수 있고,
.prop('속성명', '바꿀속성값') 하면, 속성값을 변경할 수 있다.
그리고 .prop() 에서는 참고로, 라이브러리다 보니까,
.prop() 안의 속성명이 어떤것이든 올바른 것으로 교정해주는 편리성을 지원한다.
.prop('className') 이든 .prop('class') 이든 올바른 속성명으로 알아서 이해하는 것이다.
-->