jquery - 기본 선택자

jQuery 기본 탐색 선택자

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

jQuery 탐색 선택자는 다음과 같습니다.

선택자 종류	설명
children()	$("div").children()	div 요소의 자식요소를 선택합니다.
parent()	$("p").parent()	p요소의 부모 요소를 선택합니다.
parents	$("p").parents("div")	p 요소의 부모가 되는 모든 div 요소를 선택합니다.
closest()	$("p").closest("div")	p요소의 부모가 되는 첫 번째 div요소를 찾습니다.
next()	$("div.m").next()	div.m 요소의 다음 요소를 선택합니다.
nextAll()	$("div.m").nextAll()	div.m 요소의 다음 요소들을 모두 선택합니다.
nextUntil()	$("div.m").nextUntil("p")	div.m 요소의 다음 요소들부터 p 요소 전까지의 요소를 선택합니다.
prev()	$("div.m").prev()	div.m 요소의 이전 요소를 선택합니다.
prevAll()	$("div.m").prevAll()	div.m 요소의 이전 요소들을 모두 선택합니다.
prevUntil()	$("div.m").prevUntil("p")	div.m 이전 요소부터 p요소 다음 요소까지를 선택합니다
siblings()	$("div").siblings("p")	div 요소의 형제 요소 중 p 요소를 선택합니다.
find()	$("div").find("span")/td>	div 요소의 하위 요소 중 span 요소를 선택합니다.
filter()	$("div").filter(".m")/td>	div 요소 중 class가 "m 인 요소를 선택합니다.
not()	$("div").not(".m")/td>	div요소 중 class가 "m"이 아닌 요소를 선택합니다.
has()	$("div").has("span")/td>	div 요소 중 span요소를 포함하고 있는 요소를 선택합니다.
eq()	$("div").eq(0)/td>	div 요소 중 index가 0인 요소들을 선택합니다. index 0번은 첫 번째 요소입니다.
gt()	$("div").gt(0)/td>	index 가 0보다 큰 div 요소들을 선택합니다.
lt()	$("div").lt(3)/td>	index가 3보다 작은 div 요소들을 선택합니다.

JQuery를 사용한 예제 입니다.

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

$(document).ready(function () {
    $("#m1").children().css("border", "2px solid red");
    $("#m2").children().children("span").css("border", "2px solid orange");
    $("#m3 span").closest("div").css("border", "2px solid yellow");
    $("#m4 > span.m").filter("em").css("border", "2px solid green");
    $("#m5 > span").nextUntil("em").css("border", "2px solid blue");
    $("#m6 > div").has("span").css("border", "2px solid navy");
  });

html입니다.

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

<div id="m1">
    <a href="#">내용1_1</a><span>내용1_2</span>
  </div>
  <div id="m2">
    <a href="#">내용2_1</a><span>내용2_2</span>
  </div>
  <div id="m3">
    <div><span>내용3_1</span></div>
  </div>
  <div id="m4">
    <span class="m">내용4_1</span><span>내용4_2</span><span>내용4_3</span><em>내용4_4</em>
  </div>
  <div id="m5">
    <span class="m">내용5_1</span><span>내용5_2</span><span>내용5_3</span>
  </div>
  <div id="m6">
    <div><span>내용6_1</span></div>
    <div>내용6_2</div>
  </div>

결과