jQuery 선택자
참고 : $ 는 jQuery의 약자
1) 전체 선택자
* : 전체 선택자, 모든 태그가 적용됨
예) $('*').css('color', 'Blue');
2) 태그 선택자
태그 : 특정 태그를 선택하는 선택자
예) $('h2').css('color', 'Blue');
$('h2,h2').css('color', 'Blue');
3) 아이디 선택자
ID : 특정한 id 속성을 가지고 있는 태그를 선택하는 선택자
예) $('#top').css('color', 'Blue');
$('h2#top').css('color', 'Blue');
4) 클래스 선택자
className : 특정 class 속성을 가지고 있는 태그를 선택하는 선택자
예) $('.menu').css('color', 'Blue');
$('h2.menu').css('color', 'Blue');
5) 자식 선택자
부모>자식 : 태그의 상하 관계에서 자식태그를 선택하는 선택자
예) $('h2>ul').css('color', 'Blue');
6) 후손 선택자
조상 후손 : 태그의 상하 관계에서 하위 관계 이하 모든 태그를 선택하는 선택자
예) $('h2 ul').css('color', 'Blue');
7) 속성 선택자
요소[속성] : 특정 속성을 가지고 있는 태그를 선택하는 선택자
요소[속성=값] : 특정 속성과 값이 같은 태그를 선택하는 선택자
요소[속성^=값] : 즉성 속성과 특정값으로 시작하는 태그를 선택하는 선택자
요소[속성$=값] : 즉성 속성과 특정값으로 끝나는 태그를 선택하는 선택자
요소[속성*=값] : 즉성 속성과 특정값을 포함하는 태그를 선택하는 선택자
예) $('input[type=text]').val('1');
8) 필터 선택자
요소:odd : 홀수 번째 위치한 태그를 선택하는 선택자
요소:even : 짝수 번째 위치한 태그를 선택하는 선택자
요소:first : 첫 번째 위치한 태그를 선택하는 선택자
요소:last : 마지막 번째 위치한 태그를 선택하는 선택자
예) $('tr:odd').css('background', 'Blue');
$('tr:even').css('background', 'Red');
$('tr:first').css('background', 'Black').css('color', 'Blue');
|