jQuery의 엘리먼트(Element) 제어 기능에 대해서 알아보도록 하겠다.
1. 해당 엘리먼트의 자식으로 삽입 기능
1 .append() : 타겟 뒤에 요소 추가
2 .appendTo() :
3 .html(): 문자를 덮어쓴다. 단, html은 <태그> html코드로 인식한다.
4 .prepend() : 타겟 앞에 요소추가
5 .prependTo()
6 .text() : 문자를 덮어쓴다. 단, text는 <태그>를 인식못하고 그대로 출력한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- http://api.jquery.com/append/ -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
I would like to say:
</p>
<script>$("p").append("<strong>Hello</strong>");</script>
</body>
</html>
|
cs |
이 예시는 append()의 예시다. <p> 엘리먼트의 자식으로 "Hello"를 입력하는 코드다.
2. 해당 엘리먼트의 형제(동등한 관계)로 삽입 기능
1 .after() : 요소를 타겟 뒤에다 위치
2 .before() :요소를 타겟 앞에다 위치
3 .insertAfter() : 요소를 먼저 배치시키고 타겟을 앞에 위치
4. insertBefore() :요소를 먼저 배채시키고 타겟을 뒤에 위치
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!-- http://api.jquery.com/after/ -->
<!DOCTYPE html>
<html>
<head>
<style>
p {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
I would like to say:
</p>
<script>$("p").after("<b>Hello</b>");</script>
</body>
</html>
|
cs |
해당 예제는 after() 예제, 새로운 <p>를 만들어서 hello를 삽입
3.부모로 감싸는 기능
1 .wrap() : 해당 타겟에 태그를 감싸주는 기능 보통 괄호안에 <태그>를 넣음
2 .unwrap(): 해당 타겟에 부모요소를 모두 제거함
|
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
|
<!-- http://api.jquery.com/wrap/ -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:2px blue solid;
margin:2px;
padding:2px;
}
p {
background:yellow;
margin:2px;
padding:2px;
}
strong {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
</body>
</html>
|
cs |
이 예제는 wrap()의 예제이다. <span> 태그에 해당하는 모든 요소를 감싸는 예제다.
4. 삭제 및 치환
삭제 .remove() : 요소를 삭제
치환 .replaceAll() : 요소를 치환
5. 클래스 기능
1 .addClass() : 클래스를 추가한다.
2 .removeClass() : 클래스를 제거한다.
3 .hasClass(): 클래스가 있는지 판별한다. return값 boolean
4 .toggleClass(): add와 remove가 합쳐있다. 없으면 add, 있으면 remove다.
|
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
|
<!-- http://api.jquery.com/toggleClass/ -->
<!DOCTYPE html>
<html>
<head>
<style>p {
margin: 4px;
font-size:16px;
font-weight:bolder;
cursor:pointer;
}
.blue {
color:blue;
}
.highlight {
background:yellow;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue"> Click to toggle </p>
<p class="blue highlight"> highlight </p>
<p class="blue"> on these </p>
<p class="blue"> paragraphs </p>
<script>
$("p").click( function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
|
cs |
해당 예제는 toggleClass에 대한 예제이다.
5. 속성 제어
1.attr() : 해당 타겟의 속성값을 반환
2.prop() : 해당 타겟의 프로퍼티값을 반환
3.val() : 해당 타겟의 value값을 반환
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<style>p {
color:blue;
margin:8px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p>
</p>
<script>$("input").keyup( function () {
var value = $(this).val();
$("p").text(value);
}).keyup();</script>
</body>
</html>
|
cs |
해당 예제는 val()의 예제이다.
'자바스크립트' 카테고리의 다른 글
| jQuery 사용하기 (4) [탐색] (0) | 2022.12.15 |
|---|---|
| jQuery 사용하기 (3) [폼] (0) | 2022.12.11 |
| jQuery 사용하기 (1) [이벤트] (0) | 2022.12.04 |
| jQuery 개요 (0) | 2022.11.30 |
| JavaScript의 특징 (0) | 2022.11.29 |