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 구조로 래핑합니다.