선택자
· $(선택자) 함수 : 태그를 검색해서 반환한다.
· 제이쿼리는 태그를 찾을 때 BOM or DOM을 사용하지 않고 CSS 선택자를 사용한다.
1. 태그 선택자
선택자에 태그명을 적어 사용한다.
$('div').css('color', 'pink');
2. id 선택자
선택자에 #과 id명을 적어 사용한다.
id는 키 역할을 하므로 특정 요소, 객체, 태그를 제어하기 위하여 사용한다.
$('#id').css('color', 'pink');
3. class 선택자
선택자에 .과 class명을 적어 사용한다.
class는 공통적인 속성을 가진 즉, 그룹핑 되어 있는 요소들을 묶어서 제어하기 위하여 사용함.
$('.class').css('color', 'pink');
4. 자식 선택자 / 자손 선택자
4-1) CSS 선택자 : 선택자에 css 자식, 자손 선택자를 사용하여 사용한다.
$('div span').css('display', 'block'); // div 안에 있는 모든 span 태그 선택
$('div > span').css('display', 'block'); // div 한단계 안에 있는 span 태그 선택
4-2) 선택 요소의 모든 자식 노드 선택자 : children()
$('div').children().css('display', 'block');
4-3) 선택 요소의 특정 자식 노드만 찾기 : children('선택자')
$('div').children('span').css('display', 'block');
4-4) 선택 요소의 첫번째 자식 노드 찾기 : children().first()
$('div').children('span').first().css('display', 'block');
4-5) 선택 요소의 마지막 자식 노드 찾기 : children().last()
$('div').children('span').last().css('display', 'block');
4-6) 선택 요소의 n번째 자식 노드 찾기 : children().eq(index)
$('div').children('span').eq(index).css('display', 'block');
4-7) 선택 요소의 자식 노드 중 매개변수에 해당하는 요소 : find()
$('div').find('span').css('display', 'block');
5. 부모 선택자 / 조상 선택자
5-1) 선택 요소의 모든 부모 선택자 : parent()
$('div').parent().css('display', 'none');
5-2) 선택 요소의 부모 노드 요소중 가장 가까운 요소를 찾는 선택자 : closest()
$('div').closest().css('display', 'none');
5-3) 선택 요소의 모든 조상 선택자 : parents()
$('div').parents().css('display', 'none');
6. 형제 선택자
6-1) 선택 요소와 같은 노드 위치에서 이전 요소 1개만 선택하는 선택자 : prev()
$('div').prev().css('margin', '10px');
6-2) 선택 요소와 같은 노드 위치에서 이전 요소 모두를 선택하는 선택자 : prevAll()
$('div').prevAll().css('margin', '10px');
6-3) 선택 요소와 같은 노드 위치에서 다음 요소 1개만 선택하는 선택자 : next()
$('div').next().css('margin', '10px');
6-4) 선택 요소와 같은 노드 위치에서 다음 요소 모두를 선택하는 선택자 : nextAll()
$('div').nextAll().css('margin', '10px');
6-5) 선택 요소와 같은 노드 위치에서 선택된 요소를 제외한 나머지 요소 모두를 선택하는 선택자 : siblings()
$('div').siblings().css('margin', '10px');
7. 속성 선택자
선택자 중에 특정 [속성명]이 있는 노드만 선택하는 선택자
$('div[title]').css('padding', '10px');