1. html() / text()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// ********** html() / text() **********
// html() : 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나
// 하위 요소를 전부 제거하고 새 요소로 바꿈
// text() : 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나
// 선택한 하위 요소를 전부 제거하고 새 텍스트로 바꿈
// sec_1의 요소를 가져옴 ('태그까지 그대로')
var result_1 = $("#sec_1").html();
console.log(result_1);
// sec_1의 <p> 태그를 괄호 안의 요소로 변경함
$("#sec_1 p").html("<a href=\"#\">Text1</a>");
// sec_2의 요소를 가져옴 (태그 제외하고 '텍스트만')
var result_2 = $("#sec_2").text();
// sec_2의 <h2> 태그 안의 텍스트를 text()로 변경함
$("#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>
2. attr() / removeAttr()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// ********** attr() / removeAttr() **********
// attr() : 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때
// 또는 요소의 속성값을 불러올 때 사용
// removeAttr() : 선택한 요소에서 기존의 속성을 삭제할 때 사용
// id가 sec_1인 요소의 하위 <img> 요소를 선택하여
// 그 요소의 src 값을 srcVal에 저장
var srcVal = $("#sec_1 img").attr("src");
console.log(srcVal);
$("#btn1").on("click",
function () {
// id가 sec_1인 요소의 하위 <img> 요소를 선택하여
// 각각의 값을 지정한 값으로 바꾸거나 새로 지정함
$("#sec_1 img")
.attr({
"width": 200, // width를 200으로 변경
"src": srcVal.replace("1.jpg", "2.jpg"), // "1.jpg"라는 텍스트를 "2.jpg"로 변경
"alt": "바위" // alt 값을 '바위'로 변경
})
.removeAttr("border") // border를 삭제
}
);
}
);
</script>
</head>
<body>
<h1>
<strong>객체 조작 및 생성</strong>
</h1>
<section id="sec_1">
<h2>이미지 속성</h2>
<button id="btn1">src 속성값 적용하기</button>
<br>
<p>
<img src="images/math_img_1.jpg" alt="가위" border="2">
</p>
</section>
</body>
</html>
3. addClass() / removeClass() / toggleClass() / hasClass()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
// ********** addClass() / removeClass() / toggleClass() / hasClass() **********
// addClass() : 선택한 요소에 클래스 생성
// removeClass() : 선택한 요소에서 지정한 클래스 삭제
// toggleClass() : 선택한 요소에 지정한 클래스가 없으면 생성, 있으면 삭제
// hasClass() : 선택한 요소에 지정한 클래스가 있으면 true, 없으면 false
$("#p1").addClass("aqua"); // id p1을 가진 요소에 클래스 aqua를 추가
$("#p2").removeClass("red"); // id p2를 가진 요소에 클래스 red를 삭제
$("#p3").toggleClass("green"); // id p3를 가진 요소에 green 클래스가 없으면 생성, 있으면 삭제
$("#p4").toggleClass("green");
$("#p6").text($("#p5").hasClass("yellow")); // id p5를 가진 요소에 yellow 클래스가 있으면
// id p6를 가진 요소의 텍스트를 true로 변경,
// 없으면 false로 변경
});
</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">내용 6</p>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] ready(), focus(), blur() (0) | 2020.08.12 |
|---|---|
| [제이쿼리] setInterval() / clearIntetval() (0) | 2020.06.03 |
| [제이쿼리] 효과 메소드 예제 - 메뉴 슬라이드, 사진 자동 슬라이드 (0) | 2020.05.29 |
| [제이쿼리] 효과 제어 메소드 (0) | 2020.05.29 |
| [제이쿼리] 효과 메소드 (0) | 2020.05.29 |
