jquery - 필터 선택자

jQuery 필터 선택자

jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

jQuery 선택자 형식은 다음과 같습니다.

$("선택자")	$("#gnb")

선택자 종류	설명
:even	$("tr:even")	tr 요소 중 짝수 행만 선택합니다.
:odd	$("tr:odd")	tr 요소 중 홀 수 행만 선택합니다.
:first	$("td:first")	첫 번째 td 요소를 선택합니다.
:last	$("td:last")	마지막 td요소를 선택합니다.
:header	$(":header")	헤딩 (h1~h6) 요소를 선택합니다.
:eq()	$("li:eq(0)")	index가 0인 li 요소를 선택합니다. index는 0번이 첫 번쨰 요소 입니다.
:gt()	$("li:gt(0)")	index가 0보다 큰 li 요소들을 선택합니다.
.lt()	$("li:lt(2)")	index가 2보다 작은 li요소들을 선택합니다.
:not()	$("li:not(.bg)")	li 요소 중에서 class명 bg가 아닌 li 요소를 선택합니다.
:root	$(":root")	html을 의미합니다.
:animated	$(":animated")	움직이는 요소를 선택합니다.

기본 선택자를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function () {
    $("tr:even").css("background", "red");
    $("tr:odd").css("background", "orange");
    $("td:first").css("background", "yellow");
    $("td:last").css("background", "green");
    $("header").css("background", "blue");
    $("li:eq(0)").css("background", "navy");
    $("li:gt(0)").css("background", "purple");
    $("li:lt(3)").css("border", "4px solid gray");
    $(":root").css("background", "lightgray");
    (function upDown() {
        $("h2").slideToggle(2000, upDown);
    })();
    $(":animated").css("border", "4px solid darkred")
});

html입니다.

jquery를 사용하여 html에 값을 부여해 주었고 css로 모든 선택자에 margin을 5px를 주었습니다.

<h1>제목1</h1>
    <h2>제목2</h2>
    <table>
      <caption>기본 필터 선택자</caption>
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </tbody>
    </table>
    <ul>
      <li class="bg">내용1</li>
      <li class="bg">내용2</li>
      <li class="bg">내용3</li>
      <li>내용4</li>
    </ul>

결과

---

자식 필터 선택자

자식 필터 선택자 중 'child'가 붙은 서택자는 요소가 순차적으로 나열되어 있을 때 사용하고 'of-type'이 붙은 선택자는
요소가 순차적으로 나열되어 있지 않아도 동일 요소이면 선택이 가능합니다.

선택자 종류	설명
:first-child	$("span:first-child")	첫 번째 span 요소를 선택합니다.
:last-child	$("span:last-child")	마지막 span요소를 선택합니다.
:first-of-type	$("span:first-of-type")	span 요소 중에서 첫 번째 span 요소를 선택합니다.
:last-of-type	$("span:last-of-type")	span요소 중에서 마지막 span요소를 선택합니다.
:nth-child()	$("span:nth-child(2)")	두 번째 span 요소를 선택합니다. nth-child(2n)은 2,4,6... 번째 요소를 선택하고, nth-child(2n+1)은 1, 3, 5, ...번쨰 요소를 선택합니다.
:nth-last-child()	$("span:nth-last-child(2)")	마지막에서 두 번째 span 요소를 선택합니다.
:nth-of-type()	$("span:nth-of-type(2)")	span 요소 중에서 두번째 span 요소를 선택합니다.
:nth-last-of-type()	$("span:nth-last-of-type(2)")	span요소 중 마지막에서 두 번쨰 span 요소를 선택합니다.
:only-child	$("div >:only-child")	div 자식 요소에서 오직 span 요소가 하나만 있는 span 요소를 선택합니다.
:only-of-type	$("div >:only-of-child")	div의 자식 요소에서 span 요소가 하나만 있는 span 요소를 선택합니다.

자식필터선택자를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function () {
    $("#m1 > span:first-child").css("border","2px solid red");
    $("#m1 > span:last-child").css("border","2px solid red");
    $("#m2 > span:first-of-type").css("border","2px solid orange");
    $("#m2 > span:last-of-type").css("border","2px solid orange");
    $("#m3 > span:nth-child(1)").css("border","2px solid yellow");
    $("#m3 > span:nth-last-child(1)").css("border","2px solid yellow");
    $("#m4 > span:nth-of-type(1)").css("border","2px solid green");
    $("#m4 > span:nth-last-of-type(1)").css("border","2px solid green");
    $("#m5 > span:only-child").css("border","2px solid blue");
    $("#m6 > span:only-of-type").css("border","2px solid navy");
});

html입니다.

<div id="m1">
    <span>내용1_1</span>
    <span>내용1_2</span>
    <span>내용1_3</span>
  </div>
  <div id="m2">
    <strong>내용2_1</strong>
    <span>내용2_2</span>
    <strong>내용2_3</strong>
    <span>내용2_4</span>
  </div>
  <div id="m3">
    <span>내용3_1</span>
    <span>내용3_2</span>
    <span>내용3_3</span>
  </div>
  <div id="m4">
    <strong>내용4_1</strong>
    <span>내용4_2</span>
    <strong>내용4_3</strong>
    <span>내용4_4</span>
    <strong>내용4_5</strong>
    <span>내용4_6</span>
  </div>
  <div id="m5">
    <span>내용5_1</span>
  </div>
  <div id="m6">
    <strong>내용6_1</strong>
    <span>내용6_2</span>
  </div>

결과

콘텐츠 필터 선택자

 

선택자 종류	설명
:contain()	$("p:contains('html')")	첫 번째 span 요소를 선택합니다.
:empty	$("div:empty")	div요소 중에서 자식 요소가 없는 div요소를 선택합니다.
:parent	$("span:parent")	span요소 중에 자식 요소가 있는 span요소를 선택합니다.
:has()	$("section:has(article)")	section 요소 중에서 article을 하위 요소로 가지고 있는 section 요소를 선택합니다.

콘텐츠 필터 선택자를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function () {
    $("#m1 > p:contains('html')").css("border", "4px solid red");
    $("#m1 > p:empty").css("border", "4px solid orange");
    $("#m2 > span:parent").css("border", "4px solid yellow");
    $("#m3 > section:has(article)").css("border", "4px solid green");
});

html입니다.

<div id="m1">
    <p>html, css, javascript</p>
    <p>html5와 웹표준</p>
    <p></p>
</div>
<div id="m2">
    <span></span>
    <span>내용1</span>
</div>
<div id="m3">
    <section>
        <article>내용2_1</article>
    </section>
    <section>
        <div>
            <article>내용2_2</article>
        </div>
    </section>
</div>

결과

자식 필터 선택자

자식 필터 선택자 중 'child'가 붙은 서택자는 요소가 순차적으로 나열되어 있을 때 사용하고 'of-type'이 붙은 선택자는
요소가 순차적으로 나열되어 있지 않아도 동일 요소이면 선택이 가능합니다.

선택자 종류	설명
:text	$("input:text")	<"input type:text"> 요소를 선택합니다.
:password	$("input:password")	<"input type:password">요소를 선택합니다.
:image	$("input:image")	<"input type:image">요소를 선택합니다.
:file	$("input:file")	<"input type:file">요소를 선택합니다.
:button	$(":button")	<"input type:button">, <button>요소를 선택합니다
:checkbox	$("input:checkbox")	<"input type:checkbox">요소를 선택합니다.
:radio	$("input:radio")	<"input type:radio">요소를 선택합니다.
:submit	$("input:submit")	<"input type:submit">요소를 선택합니다.
:reset	$("input:reset")	<"input type:reset">요소를 선택합니다.
:input	$(":input")	<input>요소를 선택합니다.
:checked	$("input:checked")	<"input">에서 checked 속성이 있는 요소를 선택합니다.
:selected	$("option:selected")	<option>요소에 seleted속성이 있는 요소를 선택합니다.
:focus	$("input:focus")	현재 <input>에 포커스가 있는 요소를 선택합니다.
:disabled	$("input:disabled")	<input>요소에 disabled 속성이 있는 요소를 선택합니다.
:enabled	$("input:enabled")	<input> 요소 중 disabled가 아닌 요소를 선택합니다.

자식필터선택자를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function () {
    $("input:text").css("background","red");
    $("input:password").css("background", "orange")
    $(":button").css("background", "yellow");
    $("input:checked + label").css("background","green");
    $("option:selected").css("color","blue");
    $("textarea:disabled").css("background","pink");
});

html입니다.

<div><input type="text"></div>
    <div><input type="password"></div>
    <div><button>확인</button></div>
    <div><input type="checkbox" id="css" checked="checked"><label for="css">css</label></div>
    <div>
      <select>
          <option>과목선택</option>
          <option>javascript</option>
          <option selected="selected">jQuery</option>
      </select>
      <textarea cols="20" rows="5" disabled="disabled">javascript</textarea>
    </div>

결과

가시성 필터 선택자

보이는 것과 안보이는 것을 선택자 필터를 알아보겠습니다.

선택자 종류	설명
:hidden()	div:hidden	div 요소 중 hidden인 요소를 선택합니다.
:visible	div:visible	div요소 중 visible인 요소를 선택합니다.

가시성 필터 선택자를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function () {
    console.log($("div:hidden").text());
    $("div:visible").css("background","orange");
});

html입니다.

<div id="vis">내용1</div>
<div>내용2</div>    

결과