wiki:javascript:jquery:jquery_note:jquery_descendants

차이

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

차이 보기로 링크

--- wiki:javascript:jquery:jquery_note:jquery_descendants [2021/04/19 13:16]
emblim98 만듦
+++ wiki:javascript:jquery:jquery_note:jquery_descendants [2023/01/13 18:44] (현재)
@@ 줄 9: / 줄 9: @@
 \\
 ====Source of the article====
-[[https://www.w3schools.com/jquery/jquery_traversing_ancestors.asp|jQuery Traversing - Ancestors]]\\
+[[https://www.w3schools.com/jquery/jquery_traversing_descendants.asp|jQuery Traversing - Descendants]]\\
 \\
+%%jQuery%%를 사용하면 %%DOM%% 트리 아래로 횡단하여 요소의 자손 요소들을 찾을 수 있습니다.\\
+\\
+자손은 자식(child), 손자(grandchild), 증손자(great-grandchild) 등이 될 수 있습니다.\\
+=====Traversing Down the DOM Tree=====
+%%DOM%% 트리를 아래로 횡단하는 데 유용한 두 가지 %%jQuery%% 메서드는 다음과 같습니다.\\
+  * ''child()''
+  * ''find()''
+=====jQuery children() Method=====
+''children()'' 메서드는 선택한 요소의 모든 직계 자식 요소들을 반환합니다.\\
+\\
+이 메서드는 DOM 트리 아래로 단일 수준만 횡단합니다.\\
+\\
+다음 예제는 각 %%<div>%% 요소의 직계 자식인 모든 요소를 반환합니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("div").children().css({ "color": "blue", "border": "2px solid red" });
+    })
+</code>
+\\
+매개 변수를 선택하여 자식요소 검색을 필터링 할 수도 있습니다.\\
+\\
+다음 예제는 ''%%<div>%%''의 직계 자식인 "first" 클래스명을 가진 모든 ''%%<p>%%'' 요소를 반환합니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("div").children("p.first").css({ "color": "blue", "border": "2px solid red" });
+    });
+</code>
+=====jQuery find() Method=====
+''find()'' 메서드는 선택한 요소의 마지막 하위 요소까지 아래에 있는 자손 요소들을 반환합니다.\\
+\\
+다음 예제에서는 ''%%<div>%%''의 자손 요소인 모든 ''%%<span>%%'' 요소들을 반환합니다.\\
+====예제====
+<code jquery>
+  <script>
+    $(document).ready(function () {
+      $("div").find("span").css({ "color": "red", "border": "2px solid red" });
+    });
+</code>
+\\
+다음의 예제는 ''%%<div>%%''의 모든 자손 요소들을 반환합니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("div").find("*").css({ "color": "red", "border": "2px solid red" });
+    });
+</code>
 =====jQuery Traversing Reference=====

/var/services/web/dokuwiki/data/attic/wiki/javascript/jquery/jquery_note/jquery_descendants.1618805787.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)