문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======jQuery Selectors======
<WRAP left notice 80%>
  * description : jQuery Selectors
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-15
</WRAP>
<WRAP clear></WRAP>
\\
%%jQuery%% 셀렉터(selectors)는 %%jQuery%% 라이브러이의 가장 중요한 부분들 중 하나입니다.\\

=====jQuery Selectors=====
%%jQuery%% 셀렉터를 사용하면 %%HTML%% 요소를 선택하고 조작할 수 있습니다.\\
\\
%%jQuery%% 셀렉터는 이름, id, 클래스, 유형(types), 속성(attributes), 속성 값 등을 기반으로 %%HTML%% 요소를 "찾기(즉, 선택)"에 사용됩니다.\\ 
기존의 %%CSS%% 셀렉터를 기반으로 하고, 추가로 사용자 지정 셀텍터가 있습니다.\\
\\
%%jQuery%%의 모든 셀렉터는 달러 기호와 괄호 **%%$()%%**로 시작합니다.\\

=====The element Selector=====
%%jQuery%% 요소 셀렉터는 요소 이름을 기반으로 요소를 선택합니다.\\
\\
다음과 같이 페이지에서 모든 ''%%<p>%%'' 요소를 선택할 수 있습니다.\\
<code jquery>
$("p")
</code>

====예제====
사용자가 버튼을 클릭하면, 모든 ''%%<p>%%'' 요소들이 숨겨집니다.\\
<code jquery>
$(document).ready(function() {
  $("button").click(function() {
    $("p").hide();
  });
});
</code>

=====The #id Selector=====
%%jQuery%% ''%%#id%%'' 셀렉터는 %%HTML%% 태그의 id 속성을 사용하여 특정 요소를 찾습니다.\\
\\
id는 페이지 내에서 유일해야 해서, 단 하나의 유일한 요소를 찾으려면 %%#id%% 셀렉터를 사용해야 합니다.\\
\\
특정 id를 가진 요소를 찾으려면, 해시 문자와 %%HTML%% 요소의 id를 차례로 작성하십시오.\\
<code jquery>
$("#test")
</code>

====예제====
사용자가 버튼을 클릴하면, id="test"를 가진 요소는 숨겨집니다.
<code jquery>
$(document).ready(function() {
  $("button").click(function() {
    $("#test").hide();
  });
});
</code>

=====The .class Selector=====
%%jQuery%% ''%%.class%%'' 셀렉터는 특정 클래스를 가진 요소를 찾습니다.\\
\\
특정 클래스를 가진 요소를 찾으려면, 마침표 문자(period character)를 먼저 쓴 이후 클래스 이름을 작성하십시오.\\
\\
<code jquery>
$(".test")
</code>

====예제====
사용자가 버튼을 클릭하면 class = "test"를 가진 요소가 숨겨집니다.\\
<code jquery>
$(document).ready(function() {
  $("button").click(function() {
    $(".test").hide();
  });
});
</code>

=====More Examples of jQuery Selectors=====
^ Syntax                    ^ Description                                                             ^
^ $("*")                    ^ 모든 요소들을 선택합니다.                                                 ^
| $(this)                   | 현재의 HTML 요소를 선택합니다.                                            |
^ $("p.intro")              ^ class="intro"를 가진 모든 <p> 요소들을 선택합니다.                         ^
| $("p:first")              | 첫 번째 <p> 요소를 선택합니다.                                             |
^ $("ul li:first")          ^ 첫 번째 <ul>의 첫 번째 <li> 요소를 선택합니다.                             ^
| $("ul li:first-child")    | 모든 <ul>의 첫 번째 <li> 요소를 선택합니다.                                |
^ $("[href]")               ^ href 속성을 가진 모든 요소들을 선택합니다.                                 ^
| $("a[target='_blank']")   | "_blank"와 동일한 타겟 속성 값을 가진 모든 <a> 요소들을 선택합니다.         |
^ $("a[target!='_blank']")  ^ "_blank"와 동일하지 않은 타겟 속성 값을 가진 모든 <a> 요소들을 선택합니다.   ^
| $(":button")              | 모든 <button> 요소들과 type=button인 <input> 요소들을 선택합니다.          |
^ $("tr:even")              ^ 모든 짝수번째의 <tr> 요소들을 선택합니다.                                  ^ 
| $("tr:odd")               | 모든 홀수번째의 <tr> 요소들을 선택합니다.                                  |
\\
[[https://www.w3schools.com/jquery/trysel.asp|jQuery 셀렉터 테스터]]를 사용하여 다양한 셀렉터를 확인하세요.\\
\\
모든 jQuery 셀렉터를 참조하려면, [[https://www.w3schools.com/jquery/jquery_ref_selectors.asp|jQuery Selectors Reference]]로 이동하십시오.\\

=====Functions In a Separate File=====
웹 사이트에 많은 페이지가 포함되어 있고, %%jQuery%% 함수를 쉽게 유지 관리하려면,\\ 
%%jQuery%% 함수를 별도의 %%.js%% 파일에 넣을 수 있습니다.\\
\\
이 튜토리얼에서 %%jQuery%%를 시연할 때, 함수는 %%<head>%% 섹션에 직접 추가됩니다.\\ 
그러나 때로는 다음과 같이 별도의 파일에 배치하는 것이 좋습니다 (**%%.js%%** 파일을 참조하도록 %%src%% 속성을 사용합니다):\\
\\
<code jquery>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
</code>












{{tag>오션 jQuery Selectors}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
