2014. 10. 7. 15:55 IT/jquery_javascript
jquery 노드(node)
1. 노드 찾기
- 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자")
- 클래스 이름으로 노드 찾기 : $(".클래스이름")
- ID로 노드 찾기 : $("선택자")
- 속성으로 노드 찾기 : $("[속성이름=값]")
- 찾은 요소 개수 구하기 : .size() , .length
- 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){});
- 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")
- 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자")
2. 자식 노드 찾기
- 전체 자식 노드 찾기
-- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents()
-- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")
- n번째 자식 노드 접근
-- $("선택자").children().eq(N)
-- $("선택자").children(":eq(N)")
- 첫번째 자식 노드 접근
-- $("선택자").children().first()
-- $("선택자").children(":first")
-- $("선택자").children().eq(0)
-- $("선택자").children(":eq(0)")
- 마지막 자식 노드 접근
-- $("선택자").children().last()
-- $("선택자").children(":last")
3. 부모 노드 찾기
- 바로 위의 부모 : $("선택자").parent()
- 모든 부모 찾기
-- $("선택자").parents() 모든 부모
- 모든 부모 중 선택자에 해당하는 부모 찾기
-- $("선택자").parents("선택자")
4. 형제 노드 찾기
- 이전 형제 노드 찾기
-- $("선택자").prev()
-- $("선택자").prevAll("선택자");
- 다음 형제 노드 찾기
-- $("선택자").next()
-- $("선택자").nextAll("선택자");
5. 노드 생성,추가,이동,삭제
- 생성
-- $("노드")
-- $("선택자").html("<노드>...</노드>")
-- $("노드").clone()
- 추가
-- $기준노드.append($추가노드)
-- $추가노드.appendTo($기준노드)
-- $기준노드.prepend($추가노드)
-- $추가노드.prependTo($기준노드)
-- $추가노드.insertBefore($기준노드)
-- $기준노드.before($추가노드)
-- $추가노드.insertAfter($기준노드)
-- $기준노드.after($추가노드)
- 삭제
-- $("선택자").remove()
- 이동
-- $기준노드.append($이동노드)
-- $이동노드.appendTo($기준노드)
-- $이동노드.insertBefore($기준노드)
-- $기준노드.before($이동노드)
-- $이동노드.insertAfter($기준노드)
-- $기준노드.after($이동노드)
6. 텍스트 노드 다루기
- 텍스트 노드 생성 : $("텍스트")
- 텍스트 노드 추가 : $기준노드.append("텍스트")
- 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")
7. .children()과 .find() 차이
div.starter
.child
.child
.child
.child
.child
.child
$('.starter').children('.child'); => 빨간색만 검색된다. 바로 하위 레벨만 검색된다.
$('.starter').find('.child'); => 빨간색과 파란색 모두 검색된다. (하위 레벨 모두)
'IT > jquery_javascript' 카테고리의 다른 글
javascript로 동적 rowspan, colspan (0) | 2014.11.06 |
---|---|
jQuery API 정복 - 자식 요소들 찾기, children(), find() (0) | 2014.10.10 |
jquery input radio, checkbox (0) | 2014.10.06 |
동적 생성 객체 이벤트 할당 (0) | 2014.08.05 |
jquery 테이블 높이 구하기. Table height 구하기. (0) | 2014.07.31 |