jQuery 선택자

jQuery의 가장 기본적인 개념은 "최소한의 요소를 선택하여 처리"입니다.

jQuery 선택자는 웹 페이지에서의 HTML 요소를 "찾아서" (또는 선택)할 수 있도록 합니다.

jQuery는 대부분을 지원합니다CSS3선택자또한 일부 비표준 선택자도 있습니다.

jQuery의 모든 선택자는 달러 기호와 괄호로 시작합니다: $()。

요소 선택자

jQuery 요소 선택자는 요소 이름에 따라 요소를 선택할 수 있습니다.

페이지에서 모든<p>요소를 선택하고 다음과 같이 강조합니다:

$("p")

사용자가 버튼을 클릭할 때, 다음 jQuery 코드는 모든<p>요소:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("p").css("background-color", "yellow");
　　});
});

#id 선택자

jQuery #id선택자는 HTML 테그크의id 속성특정 요소를 찾기 위해 사용됩니다.

요소의 ID는 페이지에서 유일해야 하므로, ID 선택자는 유일한 요소를 선택하는 데 사용됩니다.

특정 ID를 가진 요소를 찾으려면, 나사 문자 (#)를 따라 HTML 요소의 ID를 적습니다:

$("#demo")

사용자가 버튼을 클릭할 때, 다음 jQuery 코드는 id="demo"를 가진 요소를 선택하고 강조합니다:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("#demo").css("background-color", "yellow");
　　});
});

.class 선택자

jQuery .class선택자는 특정 클래스 이름을 가진 요소를 찾습니다.

특정 클래스를 가진 요소를 찾으려면, 점 문자 (.)를 따라 클래스 이름을 적습니다:

$(".demo")

사용자가 버튼을 클릭할 때, 다음 jQuery 코드는 class="demo"의 모든 요소를 선택하고 강조합니다:

$("document").ready(function() {
　　$("button").click(function() {
　　　　$(".demo").css("background-color", "yellow");
　　});
});

다중 선택자

필요에 따라 여러 선택자를 선택할 수 있습니다. 선택자를 쉼표로 구분하세요.

다중 선택자는 모든 지정된 선택자의 조합 결과를 선택합니다:

$("selector"1, "selector"2, "selectorN")

다음 jQuery 코드는 각<h2>，<div>및<span>요소:

$("document").ready(function() {
　　$("h2, "div", "span").css("background-color", "lightgreen");
});

다른 선택자에 대해 동일한 작업을 수행하고 싶을 때 매우 유용합니다.

jQuery 선택자의 예제

jQuery는 특정 HTML 요소를 선택하는 여러 가지 방법을 제공합니다.

jQuery 선택자 참조

전체 선택자 참조에 대해 방문해 주세요jQuery 선택자 참조。