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)
SHARE