[jQuery] 메서드 :: get/set , p 태그, 속성,
요소에 내용 또는 값 얻어오기/세팅하기
1) 요소에 작성된 내용만 얻어오기/세팅하기
[JS] : innerText --> get
innerText = "내용"; --> set
[jQuery] : .text() --> get
.text("내용"); --> set
2) 요소에 작성된 HTML코드 자체를 얻어오기/세팅하기
[JS] : innerHTML --> get
innerHTML = "HTML코드"; --> set
[jQuery] : .html() --> get
.html("HTML코드"); --> set
3) input 태그의 값 얻어오기/세팅하기
[JS] : value --> get
value = "값"; --> set
[jQuery] : val(); --> get
val("값"); --> set
jQuery로 요소 생성 및 추가하기
p 태그요소 생성하기
[JS] : document.createElement("p");
[jQuery] : $("<p>");
요소에 속성 추가/제거하기
[JS] : 요소.setAttribute("속성명", "속성값"); // 추가
요소.removeAttribute("속성명"); // 제거
[jQuery] : 요소.attr("속성명", "속성값"); // 추가
요소.attr("속성명"); // 속성값 얻어오기
요소.removeAttr("속성명"); // 제거
요소.prop("속성명", "속성값"); // 추가
요소.prop("속성명"); // true / false
요소.removeProp("속성명"); // 제거 (보류)
* Attribute -> 속성명 = "속성값"
* Property -> 속성명
prop("속성명") 에서 "속성명"은 checked, selected, disabled, enabled 등과 같은 것으로써
속성명만 작성되어 있기 때문에 있다(true)/없다(false)로 나타낸다.
-> 속성명만 작성되는 속성들 이외에는 속성값을 반환한다.
HTML문에서 요소 삽입하기
[JS] : 부모.append(요소 | 노드, ...) // 부모의 마지막 자식 요소로 삽입
부모.appendChild(노드) // 부모의 마지막 자식 요소로 삽입
부모.prepend(요소 | 노드, ...) // 부모의 첫번째 자식 요소로 삽입
부모.prependChild(노드) // 부모의 첫번째 자식 요소로 삽입
[jQuery] : $(부모).append(자식); // 부모의 마지막 자식 요소로 삽입
$(자식).appendTo(부모); // 부모의 마지막 자식 요소로 삽입
$(부모).prepend(자식); // 첫 번째 자식으로 삽입
$(자식).prependTo(부모); // 첫 번째 자식으로 삽입
$(A).after(B); // A요소 뒤에 B요소 삽입(형제)
$(B).insertAfter(A); // A요소 뒤에 B요소 삽입(형제)
$(A).before(B); // A요소 앞에 B요소 삽입(형제)
$(B).insertBefore(A); // A요소 앞에 B요소 삽입(형제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 메소드</title>
<style>
div{
box-sizing: border-box;
border : 1px solid black;
}
#wrapper{
width : 300px;
height: 800px;
}
#base{
height: 300px;
overflow: auto;
/* 내용이 요소의 크기를 넘어서면 자동으로 스크롤을 추가 */
}
.box{
width: 30px;
height: 30px;
background-color: lightgreen;
text-align: center;
line-height: 28px;
display: inline-block;
}
.btn{ background-color: skyblue;}
</style>
</head>
<body>
<h1>요소에 내용 또는 값 얻어오기/세팅하기</h1>
<div id="area">
<button>테스트 버튼</button>
</div>
<button id="btn1">확인</button>
<hr>
<input type="checkbox" id="test" class="cls">
<hr>
<h1>jQuery로 요소 생성 및 추가하기</h1>
<button id="add1">박스 추가</button> <!-- #base 마지막 자식 -->
<button id="add2">버튼 추가</button> <!-- #base 첫번째 자식 -->
<button id="add3">checkbox 추가</button> <!-- #base 마지막 자식 -->
<button id="add4">이전 형제 추가</button> <!-- #base 이전 형제 -->
<button id="add5">다음 형제 추가</button> <!-- #base 다음 형제 -->
<div id="wrapper">
<div id="base"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/08_jQuery메소드1.js"></script>
</body>
</html>// 요소에 내용 또는 값 얻어오기/ 세팅하기
document.getElementById("btn1").addEventListener("click",function(){
console.log( $("#area").text() );
console.log( $("#area").html() );
// #area1 내부 내용 초기화
// document.getElementById("area").innerHTML = ""; // JS
// $("#area").html(""); //jQuery
$("#area").html("<h3> 새롭게 생성된 요소</h3>");
});
// 요소 생성, 속성 추가, HTML 화면 삽입
// 박스 추가
let count = 1;
$("#add1").on("click", function(){
// 1) div 요소 생성
const div = $("<div>");
// 2) 생성된 div 요소에 box class 추가
div.attr("class", "box");
// 3) div에 숫자 추가
div.text(count++);
// 4) #base의 마지막 자식으로 추가
$("#base").append(div);
});
// 버튼 추가
$("#add2").on("click", function(){
// 1) 버튼 요소 생성
const btn = $("<button>"); // 시작태그만 적어도 종료 태그도 같이 생성된다
// 2) 클래스 추가
btn.attr("class", "box btn");
// btn.attr("class", "btn"); // 앞서 작성된 box 클래스 추가 내용을 덮어씀
// btn.addClass("btn"); // addClass("클래스명") : 클래스 추가
// <-> removeClass("클래스명") : 일치하는 클래스명 속성값만 제거
// 3) btn에 숫자 추가
btn.text(count++);
// 4) #base의 첫 번째 자식으로 추가
$("#base").prepend(btn);
});
// checkbox 추가
$("#add3").on("click", function(){
// 1) input 요소 생성
const input = $("<input>");
//2) type ="checkbox" 추가
input.attr("type", "checkbox");
// 3) 체크가 되어있는 상태로 만들기
// input.attr("check", "checked");
input.prop("checked", true);
// 4) #base의 마지막 자식으로 추가
input.appendTo( $("#base"));
});
//이전 형제 요소 추가
$("#add4").on("click", function(){
// 1) div 요소 생성
const div = $("<div>");
// 2) 클래스 before추가
div.addClass("before");
// 3) #base의 이전 형제 요소로 삽입
$("#base").before(div);
});
// 다음 형제 요소 추가
$("#add5").on("click", function(){
const div = $("<div>");
div.addClass("after");
div.insertAfter( $("#base"));
$("<div class='after'>").insertAfter( $("#base"));
//한 줄로 쓰면 해석이나 수정에 어려움이 있어 나눠서 쓰는게 좋다
});
