게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌2 - jQuery - 8년 전 등록 / 7년 전 수정

제이쿼리 선택자(jQuery selector)

안녕하세요. 이번 시간에는 제이쿼리 선택자에 대해서 알아보겠습니다.

제이쿼리를 선택하는 가장 큰 이유가 제이쿼리 선택자입니다. css 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 요즘 들어서는 document.querySelectordocument.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)을 알아보겠습니다!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

4개의 댓글이 있습니다.
2년 전
와우
4년 전
좋은 글 감사합니다. 갑자기 프로젝트에 제이쿼리를 사용하게되어서 개념 정리가 필요했는데 알기 쉽게 잘 정리되어 있네요. 감사합니다.!!! 복 받으세요!!!
5년 전
안녕하세요! 따로 공부를 하다 찾다찾다 안나오는게 있어서 여기까지 와서 질문하나 남깁니당..
제이쿼리를 이용한 HTML 마크업 요소를 추가 하는 방식중에
var a = $("\u003ctag>\u003c/tag>").text("text")
로 변수 선언을 해놓고
append, prepend, after, before 등의 메서드로
a변수를 불러와서 새로운 요소를 추가하는 방식인데
여기서 $함수의 인자로 태그가 들어가는건 어떤 방식인지 궁금합니다. ㅜ-ㅜ
5년 전
태그를 새로 만드는 것입니다.
8년 전
안녕하세요! 강좌 내용 중 자식 선택자와 후손 선택자에 나온 자바스크립트 예제에 대해서 궁금한 점이있습니다. 두 자바스크립트 예제 코드의 의미가 비슷하다고 생각되는데 다른점이 있나요???
8년 전
자식 태그는 자신 바로 아랫 단계의 태그들 중에서만 고르는 거고, 후손 태그는 자식 태그를 포함하여 손자, 증손자, 고손자... 등등 모두 중에서 선택하는 방식입니다.
8년 전
답변 감사드립니다. 저의 질문은 제이쿼리 예제 말고 document.getElementById('zero').getElementsByTagName('p'), document.getElementById('#zero').getElementsByTagName('div') 위 두 코드에 대한 질문이였습니다!
8년 전
아하 그렇군요. 사실 자손 선택자를 순수 자바스크립트로 선택하는 건 한 줄로 코드가 끝나지 않습니다. 일단 수정해보겠습니다.
8년 전
Array.prototype.filter를 사용하는 방식으로 수정했습니다~