jQuery-DOM 조작

JQuery는 효율적인 방식으로 DOM을 조작하는 방법을 제공합니다. 요소의 속성 값을 수정하거나 단락 또는 부서에서 HTML 코드를 추출하기 위해 큰 코드를 작성할 필요가 없습니다.

JQuery는 getter 역할을하는 .attr (), .html () 및 .val ()과 같은 메소드를 제공하여 나중에 사용하기 위해 DOM 요소에서 정보를 검색합니다.

콘텐츠 조작

그만큼 html( ) 메소드는 첫 번째로 일치하는 요소의 html 내용 (innerHTML)을 가져옵니다.

방법의 구문은 다음과 같습니다.

selector.html( )

다음은 .html () 및 .text (val) 메소드를 사용하는 예제입니다. 여기서 .html ()은 객체에서 HTML 내용을 검색 한 다음 .text (val) 메소드는 전달 된 매개 변수를 사용하여 객체의 값을 설정합니다.

<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() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

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

DOM 요소 교체

완전한 DOM 요소를 지정된 HTML 또는 DOM 요소로 바꿀 수 있습니다. 그만큼replaceWith( content ) 방법은이 목적에 아주 잘 부합합니다.

방법의 구문은 다음과 같습니다.

selector.replaceWith( content )

여기 콘텐츠는 원래 요소 대신 원하는 내용입니다. HTML 또는 간단한 텍스트 일 ​​수 있습니다.

다음은 분할 요소를 "<h1> JQuery is Great </ h1>"로 대체하는 예입니다.

<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() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

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

DOM 요소 제거

문서에서 하나 이상의 DOM 요소를 제거하려는 상황이있을 수 있습니다. JQuery는 상황을 처리하는 두 가지 방법을 제공합니다.

그만큼 empty( ) 메서드는 일치하는 요소 집합에서 모든 자식 노드를 제거합니다. remove( expr ) 메소드는 DOM에서 일치하는 모든 요소를 ​​제거합니다.

방법의 구문은 다음과 같습니다.

selector.remove( [ expr ])

or 

selector.empty( )

선택적 매개 변수 expr 을 전달 하여 제거 할 요소 세트를 필터링 할 수 있습니다.

다음은 요소가 클릭되는 즉시 제거되는 예입니다.

<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() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

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

DOM 요소 삽입

기존 문서에 새 하나 이상의 DOM 요소를 삽입하려는 상황이있을 수 있습니다. JQuery는 다양한 위치에 요소를 삽입하는 다양한 방법을 제공합니다.

그만큼 after( content ) 메서드는 일치하는 각 요소 뒤에 콘텐츠를 삽입합니다. before( content ) 메서드는 일치하는 각 요소 앞에 콘텐츠를 삽입합니다.

방법의 구문은 다음과 같습니다.

selector.after( content )

or

selector.before( content )

여기에 삽입하려는 내용이 있습니다. HTML 또는 간단한 텍스트 일 ​​수 있습니다.

다음은 클릭 한 요소 바로 앞에 <div> 요소가 삽입되는 예입니다.

<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() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

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

DOM 조작 방법

다음 표는 DOM 요소를 조작하는 데 사용할 수있는 모든 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 이후 (내용)

일치하는 각 요소 뒤에 콘텐츠를 삽입합니다.

2 추가 (내용)

일치하는 모든 요소의 내부에 콘텐츠를 추가합니다.

appendTo (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 세트에 추가합니다.

4 이전 (내용)

일치하는 각 요소 앞에 콘텐츠를 삽입합니다.

5 클론 (bool)

일치하는 DOM 요소와 모든 이벤트 핸들러를 복제하고 복제를 선택합니다.

6 클론 ()

일치하는 DOM 요소를 복제하고 복제를 선택합니다.

7 비어 있음 ()

일치하는 요소 집합에서 모든 자식 노드를 제거합니다.

8 html (발)

일치하는 모든 요소의 HTML 콘텐츠를 설정합니다.

9 html ()

일치하는 첫 번째 요소의 html 콘텐츠 (innerHTML)를 가져옵니다.

10 insertAfter (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 뒤에 삽입합니다.

11 insertBefore (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 앞에 삽입합니다.

12 prepend (내용)

일치하는 모든 요소의 내부에 콘텐츠를 추가합니다.

13 prependTo (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 앞에 추가합니다.

14 제거 (expr)

DOM에서 일치하는 모든 요소를 ​​제거합니다.

15 replaceAll (선택자)

지정된 선택기와 일치하는 요소를 일치하는 요소로 바꿉니다.

16 replaceWith (내용)

일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 바꿉니다.

17 텍스트 (발)

일치하는 모든 요소의 텍스트 내용을 설정합니다.

18 텍스트 ()

일치하는 모든 요소의 결합 된 텍스트 콘텐츠를 가져옵니다.

19 랩 (elem)

일치하는 각 요소를 지정된 요소로 래핑합니다.

20 랩 (html)

일치하는 각 요소를 지정된 HTML 콘텐츠로 래핑합니다.

21 wrapAll (elem)

일치하는 집합의 모든 요소를 ​​단일 래퍼 요소로 래핑합니다.

22 wrapAll (html)

일치하는 집합의 모든 요소를 ​​단일 래퍼 요소로 래핑합니다.

23 wrapInner (elem)

일치하는 각 요소 (텍스트 노드 포함)의 내부 자식 콘텐츠를 DOM 요소로 래핑합니다.

24 wrapInner (html)

일치하는 각 요소 (텍스트 노드 포함)의 내부 자식 콘텐츠를 HTML 구조로 래핑합니다.