차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:jquery:jquery_note:jquery_selectors [2021/04/15 11:00]
emblim98 만듦
+++ wiki:javascript:jquery:jquery_note:jquery_selectors [2023/01/13 18:44] (현재)
@@ 줄 48: / 줄 48: @@
 ====예제====
 사용자가 버튼을 클릴하면, id="test"를 가진 요소는 숨겨집니다.
-<code jqeury>
+<code jquery>
 $(document).ready(function() {
   $("button").click(function() {
@@ 줄 55: / 줄 55: @@
 });
 </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>

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

사용자 도구

사이트 도구

차이

문서 도구