안녕하세요. 이번 시간에는 제이쿼리 선택자에 대해서 알아보겠습니다.
제이쿼리를 선택하는 가장 큰 이유가 제이쿼리 선택자입니다. css 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 요즘 들어서는 document.querySelector과 document.querySelectorAll이 나와서 가치가 좀 떨어졌긴 하지만 구형 브라우저에서는 탁월한 선택입니다.
그 전에 알아둘 것은 제이쿼리 선택자는 $( ) 모양인데 이게 그냥 나온 것이 아닙니다. $라는 변수(함수)의 괄호 안에 인자를 제공하는 겁니다. 이 함수가 실행된 후에 내부적인 과정을 거쳐 결과를 반환합니다.
아이디(#)
document.getElementById('zero');정말 깁니다. zero라는 id를 가진 태그를 선택하려고 23글자나 되는 document.getElementById를 쳐야하는군요. 포스팅하는 데도 짜증이 납니다. 제이쿼리로 바꾸면
$('#zero');이게 바로 사람들이 제이쿼리에 중독되는 이유입니다. 한 번 이렇게 줄여쓰면 벗어날 수가 없죠. #을 앞에 붙여 zero라는 id를 선택합니다. ES5에서는 대안이 나왔습니다.
document.querySelector('#zero')클래스(.)
document.getElementsByClassName('zero');아이디보다 더 심각하네요.
$('.zero');점을 앞에 붙여 zero라는 클래스를 선택한다는 것을 알려줄 수 있습니다.
document.querySelectorAll('.zero')태그
앞에서는 id나 class가 붙은 특정한 태그를 선택했다면 이제는 그냥 평범한 태그를 선택해봅시다.
document.getElementsByTagName('p');역시 분노가 끌어오릅니다.
$('p');이렇게 간단하게 선택할 수 있습니다.
속성([])
id도 아니고, class도 아니고, 태그 이름도 아니고 태그의 속성으로 검색할 수도 있습니다.
document.getElementsBy...? 없습니다. 직접 만들어야합니다...
$('[value]'); // value라는 속성을 가진 태그
$('[value="zero"]');반면 제이쿼리는 이미 만들어져 있기 때문에 쉽게 선택할 수 있습니다. [ ] 사이에 속성 이름을 넣어주면 됩니다. 속성 값까지 선택하고 싶다면 [속성명=속성값]하면 되고요. 다행히 ES5에서 코드가 나왔습니다.
document.querySelectorAll('[value]')
document.querySelectorAll('[value="zero"]')자식 선택자
이번에는 좀 다르게 자식 태그를 선택해보겠습니다. #zero 태그의 자식인 p 태그를 선택해보죠.
Array.prototype.filter.call(document.getElementById('zero').children, function(item) {
return item.tagName === 'P';
});할 말을 잃게 만드는 코드 길이입니다.
$('#zero > p');로 줄일 수 있습니다. > 기호가 자식 태그임을 알려줍니다. ES5에서도 아래와 같이 가능합니다.
document.querySelectorAll('#zero > p');후손 선택자
이번에는 후손 태그입니다. (후손이란 해당 태그 아래에 포함된 모든 태그를 일컫습니다. 자식 태그는 해당 태그 바로 아래의 태그만 말합니다.) 이제 #zero 태그 아래의 모든 div를 선택해보겠습니다.
document.getElementById('zero').getElementsByTagName('div');제이쿼리로는 띄어쓰기 한 칸으로 후손태그임을 알려줄 수 있습니다.
$('#zero div')
document.querySelectorAll('#zero div');형제자매 선택자
형제자매 태그를 선택합니다. + 는 다음 하나만 선택하고, ~는 형제자매 중 일치하는 것을 모두 선택합니다.
$('#zero + div'); // #zero 바로 다음 div를 선택합니다.
$('#zero ~ p'); // #zero의 형제자매 p를 모두 선택합니다.
document.querySelectorAll('#zero + div');
document.querySelectorAll('#zero ~ p');가짜 선택자
pseudo selector라고 불리는 선택자들입니다. 많은 종류가 있는 데 그 중 자주 쓰이는 것만 알려드리겠습니다. 주로 :가짜선택자 구문으로 앞에 :를 붙입니다. 앞에 다른 선택자를 붙여서 조합할 수 있습니다. 예를 들면 #zero:parent 이렇게요.
$(':input'), $(':button'), $(':image'), $(':checkbox'), $(':radio'), $(':text'); // 각각 모든 인풋, 버튼, 이미지, 체크박스, 라디오, 텍스트인풋 태그를 선택합니다.
$(':odd'), $(':even'), $(':gt(순서)'), $(':lt(순서)'), $(':last') // 각각 홀수 번째, 짝수 번째 태그, 주어진 순서보다 순서가 큰 태그, 순서가 작은 태그, 선택된 것들 중에 마지막 태그를 선택합니다.
$(':focus'), $(':parent'), $(':empty');, $(':disabled'), $(':enabled'), $(':visible'), $(':hidden'); // 각각 현재 포커스된 태그, 자식이 하나라도 있는 태그, 자식이 없는 태그, 비활성화된 태그, 활성화된 태그, 투명이 아닌, 숨겨진 태그를 선택합니다.
$(':visible'), $(':checked'), $(':selected'), $(':only-child');, $(':first-child'), $(':last-child') // 각각 체크된(체크박스), 선택된(select), 부모의 유일한 자식인 태그, 첫 번째 자식인 태그, 마지막 자식인 태그를 선택합니다.
$(':nth-child(순서)'), $(':nth-of-type(순서)'), $(':eq(순서)'); // 각각 순서 번째 자식 태그, 해당 타입 중 순서 번째 자식 태그, 순서 번째 태그를 찾습니다. eq는 0부터 시작하고, nth-child는 1부터 시작합니다.
$(':has(선택자)'), $(':contains(텍스트)'); // 각각 선택자를 자식으로 갖고 있는 태그나 해당 텍스트를 갖고 있는 태그를 선택합니다.정말 많죠? 그래도 다양한 옵션이 있어 원하는 선택자를 찾기 편합니다.
조합
좋은 점은 위의 선택자들을 조합할 수 있습니다. 만약 태그 이름이 p면서 id는 zero고 checkbox인 태그를 선택하고 싶다하면 $('p#zero:checkbox'); 하면 됩니다. 또한 여러 개의 선택자를 동시에 선택할 수 있습니다. 쉼표를 사용해서요. $('#zero, .nero, p') 하면 #zero와 .nero 그리고 p 태그를 모두 선택합니다.
다음 시간에는 이렇게 선택한 태그에서 다른 태그로 넘어가는 방법(traversing)을 알아보겠습니다!
익명
