* 객체 조작 메서드
- 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있음.
- 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용
-> 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다고 볼 수 있음.
- 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용하는 메서드임.
(1) 속성 조작 메서드
- 요소의 속성을 조작할 때 사용하는 메서드
- 속성 조작 메서드
|
종류 |
사용법 |
설명 |
|
html() |
$("요소 선택").html(); $("요소 선택").html("새 요소"); |
선택한 요소의 하위 요소들을 반환하거나 새 요소로 변환함. |
|
text() |
$("요소 선택").text(); $("요소 선택").text(새 텍스트); |
선택한 요소가 포함하는 텍스트를 반환하거나 새 텍스트로 변환함. |
|
css("속성") / css("속성","값") |
$("요소 선택").css("color"); $("요소 선택").css("color","blue"); |
선택한 요소의 스타일(CSS) 속성값을 반환 또는 변환함. |
|
removeAttr("속성") |
$("요소 선택").removeAttr("title"); |
선택한 요소의 지정한 속성을 삭제함. |
|
attr("속성") / attr("속성","값") |
$("요소 선택").attr("href"); $("요소 선택").attr("href","main.html"); |
선택한 요소의 속성값을 반환 또는 변환함. |
|
addClass("클래스 값") |
$("요소 선택").addClass("abc"); |
선택한 요소에 지정한 클래스를 생성 또는 추가함. |
|
removeClass("클래스 값") |
$("요소 선택").removeClass("abc"); |
선택한 요소에 지정한 클래스 값을 삭제함. |
|
toggleClass("클래스 값") |
$("요소 선택").toggleClass("abc"); |
선택한 요소에 지정한 클래스 값을 생성, 삭제를 반복함. |
|
hasClass("클래스 값") |
$("요소 선택").hasClass("abc"); |
선택한 요소에 지정한 클래스 값이 포함되어 있는지 검사함. 있을 경우에는 true, 없으면 false를 반환함. |
|
prop("속성") |
$("요소 선택").prop("tagName"); |
선택한 태그의 속성들을 반환함. |
|
val() / val(값) |
$("요소 선택").val(); $("요소 선택").val("홍길동"); |
선택한 입력 요소에 지정한 value 값을 반환 또는 변환함. |
1) html() 메서드
- 선택한 요소에 포함되는 하위 요소를 불러오거나 하위 요소를 새 요소로 바꿀 때 사용.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!-- 문단 태그 영역 -->
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<h2><em>html()</em></h2>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("h2").html("<a href='#'>HTML 메서드</a>"); // <h2> 태그의 하위 요소를 제거하고 새 요소를 생성
alert($("h1").html()); // <h1> 태그의 모든 하위 요소를 문자열로 가져옴.
});
</script> |
cs |
2) text() 메서드
- 선택한 요소 내에 텍스트를 불러오거나 텍스트를 바꿀 때 사용.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!-- 문단 태그 영역 -->
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<h2>text()</h2>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("h2").text("텍스트 메서드"); // <h2> 태그의 텍스트를 새 텍스트로 바꿈.
alert($("h1").text()); // <h1> 태그의 텍스트를 가져옴.
});
</script> |
cs |
3) css() 메서드
- 선택한 요소에 지정한 스타일(CSS) 속성값을 불러오거나 변환할 때, 그리고 선택한 요소에 새 스타일을 적용할 때 사용.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!-- 문단 태그 영역 -->
<body>
<h1 style="color:blue">객체 조작 및 생성</h1>
<p></p>
<h2>CSS메서드</h2>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("p").text($("h1").css("color")); // <h1> 태그의 스타일(css)에 "color" 속성값을 불러왔음.
$("h2").css("color","red"); // <h2> 태그의 글자색을 빨간색으로 적용함.
});
</script> |
cs |
4) attr() / re,pveAttr() 메서드
- 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때, 또는 요소의 속성값을 불러올 때 사용.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!-- 문단 태그 영역 -->
<body>
<h1>객체 조작 및 생성</h1>
<p id="wrap">
<img src="images/math_img_1.jpg" alt="가위" width="100" />
</p>
<p id="txt"></p>
<p id="box">
<img src="images/math_img_2.jpg" alt="보" width="100" border="2" />
</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#txt").text($("#wrap img").attr("src"));
// id="wrap"인 요소의 하위 <img> 태그의 "src" 속성값을 불러와 id="txt"인 요소에 텍스트로 출력함.
$("#wrap img").attr("width","200");
// id="wrap"인 요소의 하위 <img> 태그의 "width" 속성값을 200으로 적용함.
$("#box img").removeAttr("border");
// id="box"인 요소의 하위 <img> 태그의 "borde" 속성을 제거함.
});
</script> |
cs |
5) addClass() / removeClass() / toggleClass() / hasClass() 메서드
- addClass() 메서드는 선택한 요소에 클래스를 생성.
- removeClass() 메서드는 선택한 요소의 지정한 클래스를 삭제.
- toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있을 경우에는 삭제.
- hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면 true를 반환하고, 없으면 false를 반환.
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<style type="text/css">
.aqua{background-color:aqua;}
.red{background-color:red;}
.green{background-color:green;}
.yellow{background-color:yellow;}
</style>
~중략~
<body>
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#p1").addClass("aqua");
// id="p1"인 요소에 class="aqua" 속성 생성
$("#p2").removeClass("red");
// id="p2"인 요소의 class="red" 속성 제거
$("#p3").toggleClass("green");
// id="p3"인 요소의 class 속성값에 "green"이 있으면 제거, 없으면 생성
$("#p4").toggleClass("green");
// id="p4"인 요소의 class 속성값에 "green"이 있으면 제거, 없으면 생성
$("#p6").text("#p5").hasClass("yellow");
// id="p5"인 요소에 class="yellow" 속성을 포함하면 true 반환, 그렇지 않으면 false 반환
// 반환된 값을 id="p6"인 요소에 텍스트로 출력
});
</script> |
cs |
6) val() 메서드
- 입력 요소에 있는 value 속성값을 불러오거나 변경할 때 사용.
- value 속성값을 반환할 때와 value 속성값을 바꿀 때 사용하는 형식이 다름.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<!-- 문단 태그 영역 -->
<body>
<p>
<input type="text" name="user_name" id="user_name" value="홍길동" />
</p>
<p>
<input type="text" name="my_name" id="my_name" />
</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#my_name").val($("#user_name").val());
// id="user_name"인 요소의 "value" 속성값을 가져와 id="my_name"인 요소에 "value" 속성값으로 입력
});
</script> |
cs |
7) prop() 메서드
- 선택한 요소에 속성을 반환/생성/변환함.
- 선택한 요소의 태그 명, 노드 타입, 선택 상자의 선택도니 옵션의 인덱스(Index)도 알 수 있음.
- 기본형
|
$(요소 선택).prop("속성") $(요소 선택).prop("속성", "새 값") $(요소 선택).prop("[tagName | nodeType | selectedIndex]") |
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<p id="st_1">내용1</p>
<p id="txt1"></p>
<p id="txt2"></p>
<select id="sel">
<option value="naver">네이버</option>
<option value="nate" selected="selected">네이트</option>
<option value="daum">다음</option>
</select>
<p id="text3"></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$("#st_1").prop("title", "단락 태그");
// id="st_1"인 요소의 title="단락 태그" 속성을 추가
$("#txt1").text($("st_1").prop("title"));
// id="st_1"인 요소의 "title" 속성값을 id="txt1"인 요소에 텍스트로 출력
$("#txt2").text($("st_1").prop("tagName"));
// id="st_1"인 요소의 태그명을 id="txt2"인 요소에 텍츠트로 출력
$("#txt3").text($("sel").prop("selectedIndex"));
// id="sel"인 요소의 선택된 옵션의 인덱스 값을 id="txt3"인 요소에 텍스트로 출력
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
|---|---|
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 위치 탐색 선택자 (0) | 2017.05.22 |
