jQuery-DOM 탐색

jQuery는 다양한 DOM 탐색 방법을 제공하는 매우 강력한 도구로, 문서의 요소를 순차적으로 선택하거나 무작위로 선택할 수 있도록 도와줍니다. 대부분의 DOM 탐색 메서드는 jQuery 객체를 수정하지 않으며 주어진 조건에 따라 문서에서 요소를 필터링하는 데 사용됩니다.

색인으로 요소 찾기

다음 HTML 내용이있는 간단한 문서를 고려하십시오.

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

모든 목록 위에는 자체 색인이 있으며 다음을 사용하여 직접 찾을 수 있습니다. eq(index) 아래 예와 같이 방법.
모든 자식 요소는 0부터 인덱스를 시작하므로 목록 항목 2 는 다음을 사용하여 액세스됩니다.$("li").eq(1) 등등.

예

다음은 두 번째 목록 항목에 색상을 추가하는 간단한 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

요소 필터링

그만큼 filter( selector )메서드를 사용하여 지정된 선택기와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 필터링 할 수 있습니다. 선택은 어떤 선택 구문을 사용하여 기록 할 수 있습니다.

예

다음은 중산층과 관련된 목록에 색상을 적용하는 간단한 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

하위 요소 찾기

그만큼 find( selector )메서드를 사용하여 특정 유형의 요소의 모든 하위 요소를 찾을 수 있습니다. 선택은 어떤 선택 구문을 사용하여 기록 할 수 있습니다.

예

다음은 다른 <p> 요소 내에서 사용할 수있는 모든 <span> 요소를 선택하는 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

JQuery DOM 필터 메서드

다음 표는 DOM 요소 목록에서 다양한 요소를 필터링하는 데 사용할 수있는 유용한 방법을 나열합니다.

Sr. 아니.	방법 및 설명
1	eq (인덱스) 일치하는 요소 집합을 단일 요소로 줄입니다.
2	필터 (선택기) 지정된 선택기와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 제거합니다.
삼	필터 (fn) 지정된 함수와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 제거합니다.
4	is (선택자) 표현식에 대해 현재 선택을 확인하고 선택한 요소 중 하나 이상이 주어진 선택기에 맞는 경우 true를 반환합니다.
5	지도 (콜백) jQuery 객체의 요소 집합을 jQuery 배열의 다른 값 집합 (요소를 포함하거나 포함하지 않을 수 있음)으로 변환합니다.
6	not (선택자) 일치하는 요소 집합에서 지정된 선택기와 일치하는 요소를 제거합니다.
7	슬라이스 (시작, [끝]) 일치하는 요소의 하위 집합을 선택합니다.

JQuery DOM 탐색 방법

다음 표는 DOM에서 다양한 요소를 찾는 데 사용할 수있는 다른 유용한 방법을 나열합니다.

Sr. 아니.	방법 및 설명
1	추가 (선택자) 주어진 선택자와 일치하는 더 많은 요소를 일치하는 요소 집합에 추가합니다.
2	andSelf () 현재 선택에 이전 선택을 추가합니다.
삼	children ([선택기]) 일치하는 각 요소 집합의 고유 한 직계 자식을 모두 포함하는 요소 집합을 가져옵니다.
4	가장 가까운 (선택자) 지정된 선택기와 일치하는 가장 가까운 부모 요소 (시작 요소 포함)를 포함하는 요소 집합을 가져옵니다.
5	내용 () 일치하는 요소 (텍스트 노드 포함) 또는 콘텐츠 문서 (요소가 iframe 인 경우) 내에서 모든 하위 노드를 찾습니다.
6	끝 () 가장 최근의 '파괴적'작업을 되돌려 일치하는 요소 집합을 이전 상태로 변경합니다.
7	찾기 (선택기) 지정된 선택자와 일치하는 하위 요소를 검색합니다.
8	다음 ([선택기]) 주어진 요소 집합 각각의 고유 한 다음 형제를 포함하는 요소 집합을 가져옵니다.
9	nextAll ([선택기]) 현재 요소 뒤의 모든 형제 요소를 찾습니다.
10	offsetParent () 일치하는 첫 번째 요소의 위치가 지정된 부모가있는 jQuery 컬렉션을 반환합니다.
11	부모 ([선택기]) 요소의 직접 부모를 가져옵니다. 요소 집합에서 호출되면 parent는 고유 한 직접 상위 요소 집합을 반환합니다.
12	부모 ([선택기]) 일치하는 요소 집합의 고유 조상을 포함하는 요소 집합을 가져옵니다 (루트 요소 제외).
13	prev ([선택기]) 일치하는 각 요소 집합의 고유 한 이전 형제를 포함하는 요소 집합을 가져옵니다.
14	prevAll ([선택기]) 현재 요소 앞에있는 모든 형제 요소를 찾습니다.
15	형제 ([선택기]) 일치하는 각 요소 집합의 고유 한 형제를 모두 포함하는 요소 집합을 가져옵니다.