(Overview 03) 선택자

SoloLearn jQuery 번역


Selectors

선택자


  • The most basic selector is the element selector, which selects all the elements based on the element name.
    • 가장 기본적인 선택자는 element 선택자이다.
    • element 이름을 기반으로 모든 element를 선택한다.
$("div")	// 모든 <div> element를 선택한다.


  • Next are the id and class selectors, which select the elements by their id and class name:
    • 다음은 id와 class 선택자이다.
    • id와 class 이름으로 element를 선택한다.
$("#test")	// id="test" element를 선택한다.
$(".menu")	// class="menu" element를 선택한다.


  • You can also use the following syntax for selectors:
    • 선택자로 다음 구문을 사용할 수도 있다.
$("div.menu")	// 모든 class="menu" <div> element를 선택한다.
$("p:first")	// 첫 번째 <p> element를 선택한다.
$("h1, p")	// 모든 <h1> element와 모든 <p> element를 선택한다.
$("div p")	// <div> element의 자손인 모든 <p> element를 선택한다.
$("*")	// DOM의 모든 element를 선택한다.


Selectors make accessing HTML DOM elements easy compared to pure JavaScript.

선택자는 순수 JS에 비해 HTML DOM element에 쉽게 액세스할 수 있다.



Useful Selectors

유용한 선택자들


$("*")	// 모든 element를 선택한다.
$("#div")	// id="div" element를 선택한다.
$(".div")	// 모든 class="div" element를 선택한다.
$("p")	// 모든 <p> element를 선택한다.
$("h1, h2, h3")	// 모든 <h1>, <h2>, <h3> element를 선택한다.
$("h1:first")	// 첫 번째 <h1> element를 선택한다.
$("h1:last")	// 마지막 <h1> element를 선택한다.
$("b:first-child")	// 부모의 첫 번째 자식인 모든 <b> element를 선택한다.
$("b:last-child")	// 부모의 마지막 자식인 모든 <b> element를 선택한다.
$("div:nth-child(2)")	// 부모의 두 번째 자식인 모든 <div> element를 선택한다.
$("div > p")	// <div> element의 직접적인 자식인 모든 <p> element를 선택한다.
$("span p")	// <span> element의 자손인 모든 <p> element를 선택한다.
$("ul li:eq(2)")	// list의 세 번째 element를 선택한다.
$(":contains('solo')")	// 'solo' 텍스트를 포함하는 모든 element를 선택한다.
$("[src]")	// 모든 src 속성 element를 선택한다.
$(":input")	// 모든 input element를 선택한다.
$(":text")	// 모든 type="text" input element를 선택한다.


QUIZ

  • Which of the following selects all elements with class=”demo”?
    • 모든 class=”demo” element를 선택하는 것은 무엇인가?

[ ] $(“#demo”)

[ ] $(“demo”)

[ ] $(".demo")


  • Select all <a> links which are inside paragraph tags.
    • p 태그 내의 모든 <a> 링크를 선택해라.

$("p a")


  • Select all elements that are direct children of div elements.
    • div element의 직접적인 자식인 모든 element를 선택해라.

$("div > *")