html("내용") : 요소에 내용 출력(태그 인식 O) == innerHTML
Text("내용") : 요소에 내용 출력(태그 인식 X) == innerText
val("내용") : value 속성 값을 지정

---

선택자 요소(A)를 기준으로 삽입 메서드 매개변수에
생성된 요소(B) 또는 함수의 리턴값을 추가

    $(A).append(B) : A요소 내 뒷부분에 B를 추가(자식)
    $(A).preappend(B) : A요소 내 앞부분에 B를 추가(자식)
    $(A).after(B) : A요소 뒷 부분에 B를 추가(형제)
    $(A).before(B) : A요소 앞 부분에 B를 추가(형제)

생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가

    $(B).appendTo(A) : B를 A의 요소 내 뒷부분에 추가(자식)
    $(B).preappendTo(A) : B를 A의 요소 내 앞부분에 추가(자식)
    $(B).insertAfter(A) : B를 A의 요소 뒤에 추가(자식)
    $(B).insertBefore(A) : B를 A의 요소 앞에 추가(자식)

---

CSS 추가/제거

$("#div3").hover(function() {
	// 마우스가 들어왔을 때 현재 요소에 lime클래스 추가
	$(this).addClass("lime");
},
function() {
	// 마우스가 나갔을 때 현재 요소에서 lime 클래스 제거
	$(this).removeClass("lime");
});

---

empty() 버튼

empty() : 자식 요소들을 모두 제거하는 메소드
-> 특정 요소 내부를 비움

$("#btn2-1").on("click", function() {
	// id가 area3인 요소의 내부를 비움
	$("#area3").empty();
});

remove() 버튼

요소 잘라내기, 관련 이벤트 삭제

$("#btn2-2").on("click", function() {
	const el = $("#div3").remove();
	$("#area4").append(el);
});

detach() 버튼

요소 잘라내기, 관련 이벤트도 같이 잘라냄

$("#btn2-3").on("click", function() {
	const el = $("#div3").detach();
	$("#area4").append(el);
});

---

input 태그 관련 이벤트

focus

input 태그에 포커스가 맞춰 졌을 때
ex) text인 경우 커서가 깜빡 거릴 때

blur

포커스가 해제 되었을 때

change

input 태그의 값이 변했을 때
1) checkbox, radio, select (마우스 선택 요소)
-> 값이 변했을 때 change 이벤트 발생

2) text 관련 요소(키보드로 값을 변경하는 요소)
-> 포커스가 해제 되었을 때 이전 값과 다를 경우 change 이벤트 발생

select

선택환 요소 입력 영역 값에 블럭이 설정된 경우

input

입력과 관련된 모든 이벤트

---

문자열.substr(시작인덱스, 종료인덱스);

setInterval(function() {}, 1000);
clearInterval(interval);

정적 요소

HTML 문서 로딩 전부터 이미 작성되어 있는 요소
-> 기존방법 on("click", function() {}) 사용 가능

동적 요소

자바스크립트 또는 제이쿼리에 의해서 HTML 문서 로딩 이후 추가되는 요소
-> 기존 방법 불가
-> $(document).on("이벤트", "선택자", function() {})