jQuery 기본 시리즈(一): jQuery 선택기

본 시리즈 설명: 이 시리즈는 주로 jQuery 기초 지식을 총결하고 지속적으로 업데이트되며 내용도 점차적으로 깊이 들어가겠습니다. 주목해 주십시오!jQuery 선택기는 기본 선택기, 등급 선택기, 필터 선택기와 폼 선택기로 분류할 수 있다.jQuery 선택기를 통해 우리는 대응하는 요소나 요소 그룹을 더욱 빠르고 편리하게 선택하여 관련 DOM 노드 조작을 할 수 있다.
1: jQuery 기본 선택기

1.id      $('#id')
    eg:$('#app')
2.class      $('.class')
    eg:$('.blue')
3.element      $('element')
    eg:$('p')
4.*   (*           )   $('*')
    eg:$('*')
5.        $('#id,.class,element...')
    eg:$('div,.blue,#app')

2: jQuery 계층 선택기

1.        （parent>child）
    eg:$('div>span')    div   span  
2.       （grandparent parent child）
    eg:$('div p span')     ，  div   p，  p    span
3.         （prev+next）
    eg:$('p+div')     p        p      div  ,   next()  
4.         （prev~siblings）
    eg:$('p~div')     p         p     div  ，  jQuery nextAll()  

3:jQuery 필터 선택기

1.        
（1）:first :last（    ，      ）
    eg:$('p:first')，$('.active:first')，$('p:last')，$('.active:last')
（2）:not（    ）
    eg:$('div:not(.active)')
（3）:even :odd（            ，   0  ，even    ，odd    ）
    eg:$('div:even')	$('div:odd')
（4）:eq(x) （        ， 0  ）
    eg:$('li:eq(2)')
（5）:gt(x) :lt(x)（   x     x     ）
    eg:$('li:lt(2)')	$('li:gt(2)')
（6）:header（ H1~H6    ）
    eg:$(':header')
2.        
（1）:empty（               ）
    eg:$('P:empty')
（2）:contains(text)（           ）
    eg:$(':contains(text)')
（3）:has(selector)（            ）
    eg:$('p:has(span)')	 $('div:has(span,p,a)')
（4）:parent（            ，      ）
    eg:$('div:parent')
 3.         
 （1）:hidden（       ， display:none type=hidden     ）
    eg:$('div:hidden')
 （2）:visible（      ）
    eg:$('div:visible')
 4.        
 (1)[attribute]（   attribute     ）
    eg:$('a[title]')
 (2)[attribute = value] [attribute != value]（ attribute     value    value   ）
    eg:$('a[class=item]')	$('a[class!=item]')
 (3)[attribute ^= value], [attribute $= value] [attribute *= value]（attribute    value  ， value  ，   value ）
    eg:$('a[title^=jQuery]')	$('a[title$=jQuery]')	$('a[title*=jQuery]')
 (4)[selector1][selector2]（        ，        ）
    eg:$('a[title^=jQuery][class=item]')
 5.         
 (1):first-child（      ） :last-child（       ）
    eg:$('div:first-child')		$('div:last-child')          div  
 (2):only-child（              ）
    eg:$('div:only-child')           div  
 (3):nth-child(x)（ x   ，first-child last-child   ）
    eg:$('div:nth-child(x)') X   	$('div:nth-child(even)') $('div:nth-child(odd)')     1  ，           div  
       $('div:nth-child(xn+y)')  x>=0,y>=0

4: jQuery 양식 선택기(다음 내용은 양식 객체에만 해당)

(1):enabled :disabled（         ，  input, select, textarea  ）
    eg:$('input:enabled')	$('input:disabled')
(2):checked（    input type radio     checkbox   ）
(3):selected（ select          ）
(4):input（ input,textarea,select,button  ）
(5):text（        input type="text"） :password（      input type="password"）
(6):radio（      input type="radio"）
(7):checkbox（      input type="checkbox"）
(8):submit（       input type="checkbox"）
(9):reset（       input type="reset"）
(10):button（     input type="button"）
(11):file（      input type="file"）
(12):hidden（      input type="hidden"）