➰ 노드생성
$("태그 텍스트") : 태그를 포함하는 텍스트
$("<div>")➡<div></div>태그 객체를 생성 👉🏻 바로 보여지는 것이 아니라 메모리에 이런 공간이 생김
✔$("div")는 div 태그 선택자 /$("<div>")는<div>태그 객체 생성
$("<div>새로운 DIV</div>"): 자식 요소를 채워서 새로운 div객체 생성
➰ 노드 객체를 복사하기
$(객체).clone() : 복사된 노드가 반환됨 👉🏻 깊은 복사가 된 객체가 반환됨(자식 노드들까지 함께)
➰ 노드 추가 / 이동
이미 다른 위치에 존재하던 노드를 이용하면 이동됨
$부모노드.append($추가노드) $추가노드.appendTo($부모노드) : 부모노드의 마지막 자식으로 추가노드를 삽입함
$부모노드.prepend($추가노드) $추가노드.prependTo($부모노드) : 부모노드의 첫번째 자식으로 추가노드를 삽입
$기준노드.before($추가노드) $추가노드.insertBefore($기준노드) : 기준노드의 이전 형제로 추가노드를 삽입
$기준노드.after($추가노드) $추가노드.insertAfter($기준노드) : 기준노드의 다음 형제로 추가노드를 삽입
➰ 노드의 내용물(컨텐츠) 읽기 / 변경하기
$객체.html() : innerHTML값 불러오기 👉🏻 매개변수없이 호출하면 get()의 역할을 함
$객체.html("태그 텍스트") : innerHTML값 변경하기
$객체.text() : innerText값 불러오기
$객체.text("태그 텍스트") : innerText값 변경하기
➰ 노드 스타일 다루기
태그의 style 속성을 이용한 스타일 설정
$(객체).css("스타일 속성") : 해당 스타일 속성의 값을 가져옴
$(객체).css("스타일 속성", "스타일 속성값") : 해당 스타일 속성의 값을 지정
$(객체).css(["속성1", "속성2", "속성3", ...]) : 여러 개의 스타일속성의 값을 한꺼번에 가져옴
- 배열(Array) 타입으로 전달인자를 사용
- 객체(Object) 타입으로 반환 👉🏻 (스타일속성:속성값) 쌍
$(객체).css({"속성1":"속성값1", "속성2":"속성값2", ...}): 여러개의 스타일을 한번에 지정 - 객체(Object) 타입으로 전달인자를 사용
➰ 클래스 속성 다루기
태그의 class 속성을 이용하여 스타일을 관리
$(객체).addClass("클래스명") : 클래스 항목을 추가
$(객체).removeClass("클래스명") : 클래스 항목을 제거
$(객체).removeClass() : 클래스 항목을 전부 제거함
$(객체).toggleClass("클래스명) : 클래스 항목이 없으면 추가하고 있으면 제거함
➰ 일반 속성(Attribute) 다루기
$(객체).attr("속성명") : 객체의 HTML 속성값을 반환
$(객체).attr("속성명", "속성값") : 객체의 HTML속성값을 지정
$(객체).attr({"속성1":"속성값1", "속성1":"속성값1", ...}) : 여러개의 속성을 한번에 설정
✔ .attr()함수는 속성값을 여러개 가져오는 방법을 제공하지 않음
