코밍이의 하루
[JQuery] 객체 조작 메소드 - 속성 조작 메소드 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 객체 조작 메소드
- 객체를 생성, 복제, 삭제, 속성 변환
- 종류 : 속성 조작 메소드, 수치 조작 메소드, 객체 편집 메소드
2) 속성 조작 메소드
- 요소의 속성을 조작할 때 사용
| 종류 | 사용법 | 설명 |
| html() html("새 요소") |
$("요소 선택").html(); $("요소 선택").html("새 요소"); |
- 선택한 요소의 하위 요소를 가져옴 - 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 요소를 생성함 |
| text() text("새 텍스트") |
$("요소 선택").text(); $("요소 선택").text("새 텍스트"); |
- 선택한 요소가 감싸는 모든 텍스트를 가져옴 - 선택한 요소의 하위 요소를 모두 제거하고, 그 위치에 지정한 새 텍스트를 생성 |
| attr("속성명") attr("속성명","새 값") |
$("요소 선택").attr("속성명"); $("요소 선택").attr("속성명","새 값"); |
- 선택한 요소의 지정한 속성값을 가져옴 - 요소를 선택하여 지정한 속성에 새 값을 적용 |
| removeAttr("속성명") | $("요소 선택").removeAttr("속성명"); | - 선택한 요소의 지정한 속성만 제거 |
| prop("상태 속성명") prop("상태 속성명","새 값") |
$("요소 선택").prop("상태 속성명"); $("요소 선택").prop("상태 속성명","새 값"); |
- 선택한 요소의 상태 속성값을 가져옴 - 요소를 선택하여 상태 속성에 새 값을 적용 |
| val() val("새 값") |
$("요소 선택").val(); $("요소 선택").val("새 값"); |
- 선택한 폼 요소의 value 값을 가져옴 - 폼 요소를 선택하여 value 속성에 새 값을 적용 |
| css("속성명") css("속성명","새 값") |
$("요소 선택").css("속성명"); $("요소 선택").css("속성명","새 값"); |
- 선택한 요소의 지정한 스타일 속성값을 가져옴 - 요소를 선택하여 지정한 스타일 속성에 새 값을 적용 |
| addClass("class 값") | $("요소 선택").addClass("class 값"); | - 선택한 요소의 class 속성에 새 값 추가 |
| removeClass("class 값") | $("요소 선택").removeClass("class 값"); | - 선택한 요소의 class 속성에서 지정한 값만 제거 |
| toggleClass("class 값") | $("요소 선택").toggleClass("class 값"); | - 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 속성값이 없으면 추가 |
| hasClass("class 값") | $("요소 선택").hasClass("class 값"); | - 선택한 요소의 class 값에 지정한 클래스 값이 포함되어 있으면 true를, 없으면 false 반환 |
3. 소스 코드 및 실행 결과
- jq_selec3_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var result_1 = $("#sec_1").html();
console.log(result_1);
$("#sec_1 p").html("<a href='#'>Text1</a>");
var result_2 = $("#sec_2").text();
console.log(result_2);
$("#sec_2 h2").text("text()");
});
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<section id="sec_1">
<h2><em>html()</em></h2>
<p>내용1</p>
</section>
<section id="sec_2">
<h2><em>텍스트()</em></h2>
<p>내용2</p>
</section>
</body>
</html>
- jq_selec3_2_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
var srcVal = $("#sec_1 img").attr("src");
console.log(srcVal);
$("#sec_1 img")
.attr({
"width": 200,
"src": srcVal.replace("1","2"),
"alt":"바위"
})
.removeAttr("border");
});
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<section id="sec_1">
<h2>이미지 속성</h2>
<p><img src="images/math_img_1.jpg" alt="가위" border="2"></p>
</section>
</body>
</html>
- jq_selec3_3_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
$("#p1").addClass("aqua");
$("#p2").removeClass("red");
$("#p3").toggleClass("green");
$("#p4").toggleClass("green");
$("#p6").text($("#p5").hasClass("yellow"));
});
</script>
<style>
.aqua{background-color:#0ff;}
.red{background-color:#f00;}
.green{background-color:#0f0;}
.yellow{background-color:#ff0;}
</style>
</head>
<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>
</html>
- jq_selec3_4_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
var result_1 = $("#user_name").val();
console.log(result_1);
$("#user_id").val("javascript");
var result_2 = $("#user_id").prop("defaultValue");
console.log(result_2);
});
</script>
</head>
<body>
<h1>객체 조작 및 생성</h1>
<form action="#" id="form_1">
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name"
id="user_name" value="용대리">
</p>
<p>
<label for="user_id">아이디</label>
<input type="text" name="user_id"
id="user_id" value="hello">
</p>
</form>
</body>
</html>
- jq_selec3_5_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
var result_1 = $("#chk1").prop("checked");
console.log(result_1);
var result_2 = $("#chk2").prop("checked");
console.log(result_2);
var result_2 = $("#chk3").prop("checked", true);
var result_3 = $("#se_1").prop("selectedIndex");
console.log(result_3);
});
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<form action="#" id="form_1">
<p>
<input type="checkbox" name="chk1" id="chk1">
<label for="chk1">chk1</label>
<input type="checkbox" name="chk2" id="chk2" checked>
<label for="chk2">chk2</label>
<input type="checkbox" name="chk3" id="chk3">
<label for="chk3">chk3</label>
</p>
<p>
<select name="se_1" id="se_1">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3" selected>option3</option>
</select>
</p>
</form>
</body>
</html>
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] 객체 조작 메소드 - 객체 편집 메소드 (0) | 2021.08.18 |
|---|---|
| [JQuery] 객체 조작 메소드 - 수치 조작 메소드 (0) | 2021.08.18 |
| [JQuery] 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2021.08.18 |
| [JQuery] 탐색 선택자 - 속성 탐색 선택자 (0) | 2021.08.18 |
| [JQuery] jQuery 배열 메소드 (0) | 2021.08.18 |
'웹언어 공부/JQuery' Related Articles
more
