jQuery 노드 선택자

jquery

1. jQuery와 $

window.jQuery =  window.$ = jQuery;

2. 기본 선택자

$(선택자).메서드();

$('p').css('color', 'yellow');

전체선택자	$(*)
태그선택자	$('태그')
아이디 선택자	$('#아이디명')
클래스 선택자	$('.클래스명')
자손 선택자	$('body > * ')
후손 선택자	$('요소a 요소b')

https://jsfiddle.net/jywoo/70s60ks0/

속성 선택자

선택자 형태	설명
요소[속성=값]	속성과 값이 같은 문서 객체를 선택합니다
요소[속성|=값]	속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다.
요소[속성~=값]	속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택합니다.
요소[속성^=값]	속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택합니다.
요소[속성$=값]	속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택합니다.
요소[속성*=값]	속성 안의 값이 특정 값을 포함하는 문서 객체를 선택합니다.

https://jsfiddle.net/jywoo/sov2jbw5/4/

선택자 형태	설명
요소:button	input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택
요소:checkbox	input 태그중 type 속성이  checkbox 인 문서 객체를 선택
요소:file	input 태그중 type 속성이  file인 문서 객체를 선택
요소:image	input 태그중 type 속성이 image인 문서 객체를 선택
요소:password	input 태그중 type 속성이 password인 문서 객체를 선택
요소:radio	input 태그중 type 속성이 radio인 문서 객체를 선택
요소:reset	input 태그중 type 속성이 reset인 문서 객체를 선택
요소:submit	input 태그중 type 속성이 submit인 문서 객체를 선택
요소:text	input 태그중 type 속성이 text인 문서 객체를 선택

선택자 형태	설명
요소:checked	체크된 입력 양식을 선택
요소:disabled	비활성화된 입력 양식 선택
요소:enabled	활성화된 입력 양식 선택
요소:focus	초점이 맞춰져 있는 입력 양식 선택
요소:input	모든 입력 양식을 선택(input, textarea, select, button)
요소:selected	option 객체 중 선택된 테그를 선택

 - 찾은 요소 개수 구하기 :  $(대상).size() / $(대상).length

 

- 찾은 요소 n번째 접근하기 : $(대상).eq(index) / $(대상).each(function(index){  });

https://jsfiddle.net/jywoo/ndq99q64/

 - 자바스크립트 DoM객체 접근하기 : $(대상).get(index) / $(대상)[index]

 - 순차적으로 노드 찾기 : $(대상).each(function(index){

$(this) / $(대상).eq(index); 

});

   https://jsfiddle.net/jywoo/b2a0pm3e/4/

 - 찾은 요소에서 특정요소만을 찾기 : $(대상).filter("선택자")

   https://jsfiddle.net/jywoo/5oon4t8o/2/

 - 찾은 요소에서 특정 자식요소만 찾기 :  $(대상).find("선택자")

 - 인덱스 값 구하기 : $(대상).index(); / $(목록).index($대상); / $(목록).index(대상 DOM객체);

-  자식노드 찾기 : 

  - 전체 자식 노드 찾기

    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 

    https://jsfiddle.net/jywoo/ndq99q64/2/