◎일반 노드 찾기
- 아이디 이름으로 노드 찾기 $("#아이디이름")
- 태그 이름으로 노드찾기 $("태그이름")
- 클래스 이름으로 노드 찾기 $(".클래스")
- 속성으로 노드 찾기 $("[속성이름=값]")
◎찾은 노드 다루기
- 찾은 개수 구하기 $대상.length
- n번째 노드 접근하기 $대상.eq(index)
- 자바스크립트 DOM 객체 접근하기 $대상.get(index) , $대상[index]
- 순차적으로 노드 접근하기
$대상.each(function(index){
$(this) 또는 $대상.eq(index);
)}
- 찾은 노드 중에 특정 노드만 찾기 $대상.filter("선택자")
- 찾은 노드의 자손노드 중 특정 노드만 찾기 $대상.find("선택자")
- 인덱스 값 구하기
· $대상.index()
· $목록.index($대상)
· $목록.index(대상DOM객체)
◎자식 노드 찾기
- 모든 자식 노드 찾기 $대상.children()
- 특정 자식 노드만 찾기 $대상.children("선택자")
- 첫 번째 자식 노드 찾기
· $대상.children().first()
· $대상.children().eq(0)
· $대상.children(":first")
· $대상.children(":eq(0)")
- 마지막 번째 자식 노드 찾기
· $대상.children().last()
· $대상.children(":last")
· $대상.children().eq($대상.children().length-1)
· $대상.children(":eq("+($대상.children().length-1)+")")
· $대상.children().eq(-1)
· $대상.children(":eq(-1)")
- n번째 자식 노드 찾기
· $대상.children().eq(index)
· $대상.children(":eq("+index+")")
◎부모 노드 찾기
- 부모 노드 찾기 $대상.parent()
- 조상 노드 찾기 $대상.parents(["선택자"])
◎형제 노드 찾기
- 이전 형제 노드 찾기
· $대상.prev()
· $대상.prevAll(["선택자"])
- 다음 형제 노드 찾기
· $대상.next()
· $대상.nextAll(["선택자"])
◎노드 생성 / 추가 / 이동
- 노드 생성 $("추가노드DOM 문자열")
ex) var $newNode = $("<li>New Node</li>");
DOM을 $()함수에 매개변수로 넣음으로써 jQuery객체로 return 받는다.
노드를 생성한다는게 DOM을 제이쿼리로 감싼다는 의미
- 첫번째 자식 노드로 추가/이동
· $부모노드.prepend($추가/이동 노드) ex) $("ul").prepend("<li>New Node</li>")
· $추가/이동 노드.prependTo($부모노드) ex) $("<li>New Node</li>").prependTo("ul")
- 마지막번째 자식 노드로 추가/이동
· $부모노드.append($추가/이동 노드) ex) $("ul").append("<li>New Node</li>")
· $추가/이동 노드.appendTo($부모노드) ex) $("<li>New Node</li>").appendTo("ul")
◎노드 생성 제거
- 특정 노드 제거 $대상.remove()
- 모든 자식 노드 제거 $대상.children().remove()
◎노드 내용 읽기 및 변경
- 노드 내용을 이용해 여러 개의 자식 노드 추가하기
· $대상.html("추가할 태그 문자열")
- 노드 내용을 이용해 모든 자식 노드 제거하기