jQuery Selectors(JQuery선택자)

jQuery Selectors(JQuery 선택자)

« Previous

Next Chapter »

---

jQuery selectors are one of the most important parts of the jQuery library.

JQuery 선택자들은 JQuery라이브러리의 가장 중요한 부분중 하나이다.

---

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

JQuery선택자들은 당신에게 HTML요소들을 선택하고 조작할 수 있게 한다.

JQuery선택자들은 id, 클래스, 속성, 속성의 값이나 더많은 항목들로부터 HTML요소들을 찾는(또는 선택하는)데 사용된다.

이것은 기존의 CSS 선택자를 기반으로 하며, 추가적으로, 약간의 자체적인 선택자를 가지고 있다.

JQuery의 모든 선택자들은 달러 신호와 괄호로 시작된다 : $()

---

The element Selector(요소 선택자)

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

JQuery요소 선택자는 요소의 이름에 기반하여 요소를 선택한다.

당신은 페이지모든 <P>요소들을 다음과 같이 선택할 수 있다 : 

$("p")

Example(예)

When a user clicks on a button, all <p> elements will be hidden:

유저가 버튼을 클릭할때, 모든 <P>요소들이 숨겨질것이다 : 

Example

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

Try it yourself »

---

The #id Selector(#id 선택자)

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

JQuery의 #id선택자는 특정한 요소를 찾기 위해 HTML태그의 id속성을 사용한다.

id는 대개 페이지안에서 유일한것이므로,  당신은 #id선택자를 페이지내에서 유일한 단일요소를 찾기 원할때 사용할 수 있을것이다.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

특정 ID와 함께 요소를 찾기 위해, 해시문자를 쓰고, 이어서 HTML요소의 ID를 쓴다.

$("#test")

Example(예)

When a user clicks on a button, the element with id="test" will be hidden:

유저가 버튼을 클릭할때, 요소의 id가 "test"인것이 숨겨질것이다.

Example

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

Try it yourself »

---

The .class Selector(.class 선택자)

The jQuery class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

JQuery 클래스 선택자는 특정 클래스이름을 갖는 요소들을 찾는다.

특정클래스를 찾기 위해, 마침표를 쓰고, 이어서 클래스 이름을 적는다.

$(".test")

Example(예)

When a user clicks on a button, the elements with class="test" will be hidden:

유저가 버튼을 클릭ㅎㄹ때, 클래스 이름이 "test"인 요소들을 숨긴다 : 

Example

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

Try it yourself »

---

More Examples of jQuery Selectors(JQuery선택자들에 대한 더많은 예제)

Syntax	Description	Example
$("*")	Selects all elements(모든요소선택)	Try it
$(this)	Selects the current HTML element(현재 HTML요소를 선택)	Try it
$("p.intro")	Selects all <p> elements with class="intro"(모든 p요소들중 클래스가 intro인것들 선택)	Try it
$("p:first")	Selects the first <p> element(첫번째 <p>요소 선택)	Try it
$("ul li:first")	Selects the first <li> element of the first <ul>(첫번째 <ul>요소의 첫번째 <li>선택)	Try it
$("ul li:first-child")	Selects the first <li> element of every <ul>(모든 <ul>요소들의 첫번째 <li>선택)	Try it
$("[href]")	Selects all elements with an href attribute(href속성의 요소들 선택)	Try it
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"(타겟속성이 "_blank"인모든 <a>요소들 선택	Try it
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all <button> elements and <input> elements of type="button"	Try it
$("tr:even")	Selects all even <tr> elements	Try it
$("tr:odd")	Selects all odd <tr> elements	Try it

Use our jQuery Selector Tester to demonstrate the different selectors.

For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.

다른 선택자들의 차이점들에 대해 실습해보기 위해 우리의 JQuery선택자 테스터를 사용해라.

JQuery선택자들의 완전한 참조를 위해 우리의 JQuery선택자 참조로 이동하라.

---

Functions In a Separate File(분리된 파일에서의 함수들)

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.

When we demonstrate jQuery in this tutorial, the functions are added directly into the <head> section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):

만일 당신의 사이트가 많은 페이지들을 담고 있고, 당신이 JQuery 함수들이 쉽게 관리되기를 원한다면, 당신은 JQuery 함수들을 분리된 .js파일에 놓을 수 있다.

우리는 이튜토리얼에서 JQuery실습을 할때, 함수들을 <head>섹션 내부에 추가했었다. 하지만, 때로는 다음과 같이 그것을 분리된 위치에 놓는것이 유용할때가 있다(.js 파일을 참조하기위해 src속성을 사용한다): 

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>