2. jQuery Selector (제이쿼리 선택자)

 

바닐라 자바 스크립트 (프레임워크, 라이브러리를 사용하지 않고 순수한 자바스크립만 사용한 것을 말함) 를 선택해서 해당 엘리먼트를 선택할 수 있지만, 제이쿼리 포스트인 만큼 제이쿼리 위주로 하나씩 설명하겠습니다.

 

기본은 $() 형태입니다. $ 는 함수이며 () 안에 인자로 넘겨주면 됩니다. 심플하죠?

 

All *

$('*'); // 모든 elements 전부 선택.

아이디  #

$('#wow'); // jQuery

document.querySelector('#wow'); // ES5

document.getElementById('wow'); 

 

클래스   .

$('.wow'); // jQuery

document.querySelectorAll('.wow'); //ES5

document.getElementByClassName('wow');

 

태그 p, div, span...

$('div') // jQuery

document.getElementByTagName('div')

 

속성 name, value, href ...

$('[name="wow"]'); // name 이라는 속성을 가진 값이 wow 인 경우

$('[name!="wow"]'); // name 이라는 속성을 가진 값이 wow 가 아닌 경우

$('[name^="wow"]'); // name 이라는 속성을 가진 값이 wow 로 시작 (정규표현식의 ^)

$('[name$="wow"]'); // name 이라는 속성을 가진 값이 wow 로 끝나는 (정규표현식의 $)

$('[name*="wow"]'); // name 이라는 속성을 가진 값이 wow 를 포함하는 경우

$('[name~="wow"]'); // name 이라는 속성을 가진 값이 wow 를 단어를 포함하는 경우 (단어는 공백으로 구분)

/*
 - 다중 속성 선택 -
 input 태그 선택자 중에서
 id 라는 속성을 가지고 있으면서
 name 이라는 속성을 가진고 있으면서 그 값이 man 이라는 문자열로 시작하는 element(s) 를 찾아서 
 그 value 속성의 값에 only this one 을 넣기
*/

$('input[id][name$="man"]').val( "only this one" ); 

 

자식 parent > child

/*
자식 선택자란 id가 wow 인 element 
바로 한 단계 아래 레벨의 elements 중에서 div 태그만 선택합니다.
*/

$('#wow > div'); //jQuery 

document.querySelectorAll('#wow > div') // es5

 

후손 ancestor desendant

/*
후손 선택자란 id가 wow 인 element 
아래 레벨의 모든 elements 중에서 div 태그만 선택합니다.
*/

$('#wow div'); //jQuery 

document.querySelectorAll('#wow div') // es5

 

형제 자매 선택자 prev + next, prev ~ siblings

/*
형제 자매란 자신과 같은 레벨의 element(s) 를 선택할 때 사용합니다.
+ 는 하나만 선택
~ 는 일치하는 모든 것을 선택
*/

$('#wow + p'); // 바로 다음 p 선택
$('#wow ~ p'); // 형제자매 레벨의 모든 p 를 선택

document.querySelectorAll('#wow + p'); // es5
document.querySelectorAll('#wow ~ p'); // es5

 

pseudo (가짜) 선택자 

많은 종류가 있습니다. 가짜 선택자는 앞에 :를 붙힙니다. 

 

$(':odd'); // $( "tr:odd" ).css( "background-color", "#bbf" ) 홀수 tr 에 css 적용
$(':even'); // $( "tr:even" ).css( "background-color", "#bbf" ) 짝수 tr 에 css 적용
$(':eq(index)'); // index번째에 해당하는 element
$(':gt(index)'); // index보다 큰 해당하는 elements
$(':lt(index)'); // index보다 작은 해당하는 elements
$(':first'); // $( "tr:first" )
$(':last'); // $( "tr:last" )

/* form 관련 */

$(':button'); // $(":button").addClass( "marked" ); 모든 button 에 marked css class 를 더한다.
$(':checkbox');
$(':checked'); // $("input:checked").length : 체크된 input 이 몇개인지?
$(':disabled');
$(':enabled');
$(':file');
$(':focus');
$(':image');
$(':input');
$(':password');
$(':radio');
$(':reset');
$(':selected'); // $("select option:selected") : 선택한 select option 구하기
$(':submit');
$(':text');

/* Content 관련 */

$(':contains("text")') /// $('div:contains("wow")') <div> wow that's good </div> 선택됨.
$(':empty') // children (text nodes 포함하여) 이 없는 모든 elements 선택, $('td:empty')
$(':has()') // $('div:has("p")') p 태그를 가지고 있는 div elements
$(':parent') // :empty 와 반대, 적어도 하나 이상의 자식 노드를 가지고 있는 (text node 포함)

/* Visibility 관련 */

$(':hidden'); // 보이지 않는 모든 elements
$(':visible'); // 보이는 모든 elements

 

다음 포스팅에는 Traversing 에 대해서 적겠습니다.