이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌2 - jQuery - 2년 전 등록 / 5달 전 수정

제이쿼리 선택자(jQuery selector)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

제이쿼리를 선택하는 가장 큰 이유가 제이쿼리 선택자입니다. 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)을 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

1개의 댓글이 있습니다.
2년 전
안녕하세요! 강좌 내용 중 자식 선택자와 후손 선택자에 나온 자바스크립트 예제에 대해서 궁금한 점이있습니다. 두 자바스크립트 예제 코드의 의미가 비슷하다고 생각되는데 다른점이 있나요???
2년 전
자식 태그는 자신 바로 아랫 단계의 태그들 중에서만 고르는 거고, 후손 태그는 자식 태그를 포함하여 손자, 증손자, 고손자... 등등 모두 중에서 선택하는 방식입니다.
2년 전
답변 감사드립니다. 저의 질문은 제이쿼리 예제 말고 document.getElementById('zero').getElementsByTagName('p'), document.getElementById('#zero').getElementsByTagName('div') 위 두 코드에 대한 질문이였습니다!
2년 전
아하 그렇군요. 사실 자손 선택자를 순수 자바스크립트로 선택하는 건 한 줄로 코드가 끝나지 않습니다. 일단 수정해보겠습니다.
2년 전
Array.prototype.filter를 사용하는 방식으로 수정했습니다~