jQuery - 컨텐츠 셀렉터

컨텐츠 셀렉터는 다음 표를 사용할 수 있습니다.

선택자	설 명
:header	<Hn> 인 제목 요소를 모두 선택
:contains(str)	지정된 내용과 일치하는 모든 요소를 선택
$().contents()	선택한 요소의 텍스트 및 주석 노드를 포함한 모든 자식 요소를 선택. (iframe 에 접근 가능)
:has(s) $().has(s)	선택한 요소 중에서 지정한 하위 요소를 포함하는 요소를 선택 (모든 종류의 선택자를 허용하며, 쉼표로 복수 지정가능)
$().filter(s)	선택한 요소 중에서 특정 요소를 선택할 때 (모든 종류의 선택자를 허용하며 쉼표로 복수 지정가능)
$().find(s)	선택한 요소의 하위 요소 중에서 특정 요소를 선택할 때 (모든 종류의 선택자를 허용하며 쉼표로 복수 지정가능)
$().end()	이미 선택되었던 이전 요소로 되돌립니다.
:lang(language)	지정한 언어 코드를 갖는 요소 Ex.) :lang(ko)
:hidden	display="none", type="hidden" 인 숨겨진 모든 요소를 찾음
:visible	보이는 모든 요소를 찾음

:header 선택자

<Hn> 제목 요소를 모두 선택합니다.

<script>
$(function(){
  $(":header").css("background", "yellow");
});
</script>

<h1>안녕 하보니</h1>
<div>
  <h5>제목</h5>
  <p>내용</p>
</div>

:contains(str) 선택자

지정된 내용과 일치하는 모든 요소를 찾습니다. 다음 예시는 내용이 "크롬"인 요소에 스타일을 지정합니다.

<script>
$(function(){
  $("#use-nth :contains('크롬')").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

:has(s) 선택자

선택한 요소 중에서 지정한 하위 요소를 포함하는 요소를 선택합니다. 예를 들어 span 요소를 갖고 있는 div 요소를 선택합니다.

<script>
$(function(){
  $("#use-nth div").has("span").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>안녕 <span>하보니</span></div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().filter(s) 메소드

선택한 요소 중에서 "s"와 일치하는 모든 요소를 찾을 수 있습니다.

<script>
$(function(){
  $("#use-nth div").filter(":eq(2), :eq(3)").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <!-- 선택된 요소 -->
  <div>크롬</div>
  <!-- 선택된 요소 -->
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

다음은 홀수 번째 요소를 찾아 스타일을 지정합니다.

<script>
$(function(){
  $("#use-nth div").filter(":even").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

함수를 이용해 위 예제와 같이 요소를 필터할 수 있습니다. 다음은 짝수 번째 요소에 스타일을 지정합니다.

<script>
$(function(){
    var vars = function(index){
      return index % 2 == 1;
    };
  $("#use-nth div").filter(vars).css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().find(s) 메소드

선택한 요소의 하위 요소 중에서 "s"와 일치하는 모든 요소를 찾을 수 있습니다. 쉼표로 여러 개 지정 가능합니다.

<script>
$(function(){
  $("#use-nth").find(":eq(2), :eq(3)").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

$().end() 메소드

체이닝 기법으로 앞서 이미 선택되었던 요소로 되돌립니다.

<script>
$(function(){
  $("#use-nth").find(":even").css("background", "yellow")
  .end().find(":odd").css("background", "red")
  .end().find(":eq(3)").css("background", "blue");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>

이미 선택되었던 요소로 돌아갈 수 없으면 위 예제의 결과를 얻을 수 없습니다. 따라서 체이닝 기법으로 연결된 메서드는 end() 를 이용해 이전에 선택되었던 요소로 얼마든지 되돌아갈 수 있습니다.

<script>
$(function(){
  $('#use-nth').find('.foo').css('background-color', 'red')
    .end().find('.bar').css('background-color', 'green').end();
});
</script>

<div id="use-nth">
  <div class="foo">PHP</div>
  <div>ASP</div>
  <div class="bar">JAVA</div>
</div>

:hidden 과 :visible

숨겨진 모든 요소를 찾고, 찾은 개수를 콘솔에 출력합니다.

<script>
$(function(){
  var element = $("#use-nth").find(":hidden");
  /* 숨겨진 요소는 2개입니다. */
  console.log(element.length + "개를 찾았습니다.");
});
</script>

<div id="use-nth">
  <div class="hide">안녕 하보니</div>

  <img src="..." style="display:none"/>
  <input type="hidden" value="habony"/>
</div>

다음은 보이는 모든 요소를 찾은 개수를 콘솔에 출력합니다.

<script>
$(function(){
  var element = $("#use-nth").find(":visible");
  /* 보이는 요소는 2개입니다. */
  console.log(element.length + "개를 찾았습니다.");
});
</script>

<div id="use-nth">
  <div class="hide">안녕 하보니</div>
  <img src="..." style="display:block"/>

  <input type="hidden" value="habony"/>
</div>