[jQuery] 기본 문법 & 선택자

jQuery

기본 문법

jQuery는 HTML 요소를 선택 하고 요소에 대해 일부 작업을 수행하기 위해 맞춤 제작되었다.

기본 문법 : $(selector).action()

• jQuery 정의/액세스를 위한 $ 기호
• (selector) 또는 "query (or find)" 로 HTML 요소 선택
• 요소에서 수행할 jQuery action()

예:

$(this).hide() : 현재 요소를 숨긴다.

$("p").hide() : 모든 <p> 요소를 숨긴다.

$(".test").hide() : class="test"인 모든 요소를 숨긴다.

$("#test").hide() : id="test"인 요소를 숨긴다.

---

선택자

• jQuery 선택자를 사용하면 HTML 요소를 선택하고 조작할 수 있다.
• jQuery 선택자는 이름, ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 찾는(또는 선택하는) 데 사용된다.
• 기존 CSS 선택자를 기반으로 하며 추가로 자체 사용자 지정 선택자가 있다.
• jQuery의 모든 선택자는 달러 기호와 괄호 $()로 시작한다.

Element 선택자

jQuery 요소 선택자는 요소 이름을 기반으로 요소를 선택한다.

<p>다음과 같이 페이지의 모든 요소를 선택할 수 있다.

$("p")

사용자가 버튼을 클릭하면 모든 <p>요소가 숨겨진다.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

 

#id 선택자

jQuery 선택자는 HTML 태그의 id 속성을 사용하여 특정 요소를 찾는다.

ID는 페이지 내에서 고유해야 하므로 고유한 단일 요소를 찾으려면 #id 선택자를 사용해야 한다.

특정 id를 가진 요소를 찾으려면 해시 문자를 쓰고 그 뒤에 HTML 요소의 id를 사용한다.

$("#test")

사용자가 버튼을 클릭하면 id="test"인 요소가 숨겨진다.

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

 

.class 선택자

jQuery .class선택자는 특정 클래스의 요소를 찾는다.

특정 클래스의 요소를 찾으려면 마침표와 클래스 이름을 사용한다.

$(".test")

사용자가 버튼을 클릭하면 class="test"인 요소가 숨겨진다.

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

 

jQuery 선택자의 더 많은 예

Syntax	Description
$("*")	Selects all elements
$(this)	Selects the current HTML element
$("p.intro")	Selects all <p> elements with class="intro"
$("p:first")	Selects the first <p> element
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button")	Selects all <button> elements and <input> elements of type="button"
$("tr:even")	Selects all even <tr> elements
$("tr:odd")	Selects all odd <tr> elements