jQuery 노드 요소 탐색
jQuery 노드 찾기 (요소 탐색)
jQuery 셀렉터
$("*") // 모든 엘리먼트 선택
$("div") // Tag 이름으로 노드 찾기
$("#idName") // id 이름으로 노드 찾기
$(".className") // class 이름으로 노드 찾기
$("ul.className") // ul 엘리먼트 중 class 이름이 className 인 엘리먼트 선택
$("ul, div") // ul 및 div 태그 선택
$("div img") // div 의 자손노드 중 Tag이름이 img인 모든 엘리먼트 선택
$("ul .className") // ul의 자손노드 중 class 이름이 className 인 엘리먼트 선택
$("ul>li") // ul Tag 의 바로 아래 자식노드 중 li Tag 인 엘리먼트 선택
$("prev+next")
$("prev~siblings")
필터
:not(selector) // 셀렉터와 일치하지 않는 요소들 리턴
:first // 선택된 요소 중 첫 번째 요소
:last // 선택된 요소 중 마지막 요소
:even // 선택된 요소 중 짝수 인덱스 요소들
:odd // 선택된 요소 중 홀수 인덱스 요소들
:eq(index) // 선택된 요소 중 지정된 index 번호를 가진 요소
:gt(index) // 선택된 요소 중 지정된 index 번호보다 큰 인덱스 요소들
:lt(index) // 선택된 요소 중 지정된 index 번호보다 작은 인덱스 요소들
:header // <h1> ~ <h6> 요소들
:animated // 애니메이션이 적용된 모든 요소들
:focus // 현재 포커스를 가지고 있는 요소
:contains("text") // "text"를 가지고 있는 요소들
:empty // 자식 요소가 없는 모든 요소들
:parent // 자식 요소를 가지고 있는 모든 요소들
:has(selector) // selector에 부합하는 요소를 하나 이상 가지고 있는 요소들
:hidden // 화면에서 숨겨진 모든 요소들
:visible // 공간을 차지하고 있는 모든 요소들
:nth-child(expr) // expr 순번의 자식 요소
:first-child // 첫번째 자식 요소
:last-child // 마지막 자식 요소
:only-child // 요소의 자식 요소가 하나뿐인 요소
// 예시
$('div:not("#summary")') // #summary를 제외한 나머지 div 태그들을 선택
$("li").eq(3) // 찾은 노드 중 4 번째 노드에 접근하기
$("div:has(p)") // <p> 요소를 가진 모든 <div> 요소들
$("ul li:nth-child(2)") // 두 번째 <li> 요소
속성옵션 필터
$("[attr]") // attr 속성을 가진 모든 요소들
$("el[attr]") // 속성 attr 를 포함한 모든 el 노드 찾기
$("el[attr=val]") // 속성 attr 의 값이 val 인 모든 el 노드 찾기
$("el[attr!=val]") // 속성 attr 의 값이 val이 아닌 모든 el 노드 찾기
$("el[attr^=val]") // 속성 attr 의 값이 val 로 시작하는 모든 el 노드 찾기
$("el[attr$=val]") // 속성 attr 의 값이 val 로 끝나는 모든 el 노드 찾기
$("el[attr*=val]") // 속성 attr 의 값이 val 을 포함하고 있는 모든 el 노드 찾기
$("[attribute|='value']") // 속성값이 value값과 일치하거나 value- 으로 시작하는 요소들
$("[attr1][attr2]") // 지정된 속성중 하나를 가진 모든 요소들
// 예시
$("div[class*=test]") // class의 값이 test를 포함하고 있는 모든 div 노드
폼 요소
// 폼 요소의 값 조회하기
// <input>,<textarea>,<select> 요소의 값을 알아낸다.
.val()
/** 폼 필터
:input, :text, :password, :radio, :checkbox, :submit,
:image, :reset, :button, :file, :selected
:enabled, :disabled, :checked
*/
노드 Traversing
// DOM 객체에 직접 접근하기
$el.get(index)
var li_1 = $("ul li").get(1);
// 선택한 객체집합 내의 정보를 탐색, 조작하기
$elements.each(function(index, element) {});
// 예시
$("li").each(function (index){
var ids = this.id; // 그 노드의 id 속성에 접근할 때
var $target = $(this); // 그 요소에 jQuery 메서드를 사용할 때
$target.append("<em class='order'>" + ids + "</em>");
// or
var $target = $("li").eq(index);
});
// 현재 노드들의 조건 검사
$("li").is(".item")
//
$li.each(function() {
var $this = $(this);
if ($this.is(".item")) { // <li> 요소의 class값이 item인지 확인한다.
// code...
}
});
// 노드가 위치한 index 값 구하기
$(this).index()
$list.index($obj)
$list.index(DOM)
// 자식노드 탐색
$("ul").children() // 모든 자식 노드 찾기
$("ul").children(".select") // 특정 자식 노드 찾기
$("ul").children().first() // 첫번째 자식노드 찾기
$("ul").children(":first") // 첫번째 자식노드 찾기
$("ul").children().eq(0) // 첫번째 자식노드 찾기
$("ul").children().last() // 마지막 자식노드 찾기
$("ul").children(":last") // 마지막 자식노드 찾기
$("ul").children().eq(-1) // 마지막 자식노드 찾기
$("ul").children().eq(index) // n번째 자식노드 찾기
// 부모노드 탐색
$("ul.menu").parent() // 부모노드 찾기
$("ul.menu").parents() // 조상노드 찾기
$("ul.menu").parents(".header") // 특정 조상노드 찾기
// 형제노드 탐색
$("li.select").prev() // 특정 노드의 이전 형제노드 찾기
$("li.select").prevAll() // 특정 노드의 모든 이전 형제노드 찾기
$("li.select").prevAll("#info") // 이전 형제노드 중 #info를 가진 노드 찾기
$("li.select").next() // 특정 노드의 다음 형제노드 찾기
$("li.select").nextAll() // 특정 노드의 모든 다음 형제노드 찾기
$("li.select").nextAll("#info") // 다음 형제노드 중 #info를 가진 노드 찾기
$("li.select").siblings('.txt') // 형제 노드를 선택
요소 필터링
// 찾은 노드 중에서 특정 노드만 필터링 하기
$("li").filter(".select")
$liList.filter(".select").css('text-align', 'center');
// 현재 노드의 자손노드 중 특정 노드 찾기
$("ul").find("li.select")
$("#content").find('.test1').css('text-align', 'right');
// index 번호에 해당하는 요소를 리턴
$("li").eq(index)