jQuery-DOM操作

JQueryは、効率的な方法でDOMを操作するためのメソッドを提供します。要素の属性の値を変更したり、段落や分割からHTMLコードを抽出したりするために、大きなコードを記述する必要はありません。

JQueryは、ゲッターとして機能する.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要素の削除

ドキュメントから1つ以上のDOM要素を削除したい場合があります。JQueryは、状況を処理するための2つのメソッドを提供します。

ザ・ 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要素の挿入

既存のドキュメントに新しい1つ以上の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要素を操作するために使用できるすべてのメソッドを示します-

シニア番号	方法と説明
1	after（コンテンツ）一致した各要素の後にコンテンツを挿入します。
2	append（content）一致したすべての要素の内部にコンテンツを追加します。
3	appendTo（セレクター）一致したすべての要素を、指定された別の要素のセットに追加します。
4	before（コンテンツ）一致した各要素の前にコンテンツを挿入します。
5	clone（bool）一致したDOM要素とそのすべてのイベントハンドラーのクローンを作成し、クローンを選択します。
6	clone（）一致したDOM要素のクローンを作成し、クローンを選択します。
7	空の（）一致した要素のセットからすべての子ノードを削除します。
8	html（val）一致したすべての要素のhtmlコンテンツを設定します。
9	html（）最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
10	insertAfter（セレクター）一致したすべての要素を、指定された要素のセットの後に挿入します。
11	insertBefore（セレクター）一致したすべての要素を、指定された別の要素セットの前に挿入します。
12	prepend（content）一致するすべての要素の内側にコンテンツを付加します。
13	prependTo（セレクター）一致したすべての要素を、指定された別の要素のセットの前に追加します。
14	remove（expr）一致したすべての要素をDOMから削除します。
15	replaceAll（セレクター）指定されたセレクターによって一致した要素を一致した要素に置き換えます。
16	replaceWith（content）一致したすべての要素を、指定されたHTMLまたはDOM要素に置き換えます。
17	text（val）一致したすべての要素のテキストコンテンツを設定します。
18	text（）一致したすべての要素の結合されたテキストコンテンツを取得します。
19	wrap（elem）一致した各要素を指定された要素でラップします。
20	wrap（html）一致した各要素を指定されたHTMLコンテンツでラップします。
21	wrapAll（elem）一致したセット内のすべての要素を単一のラッパー要素にラップします。
22	wrapAll（html）一致したセット内のすべての要素を単一のラッパー要素にラップします。
23	wrapInner（elem）一致した各要素（テキストノードを含む）の内部の子コンテンツをDOM要素でラップします。
24	wrapInner（html）一致した各要素（テキストノードを含む）の内部の子コンテンツをHTML構造でラップします。

シニア番号	方法と説明
1	after（コンテンツ）一致した各要素の後にコンテンツを挿入します。
2	append（content）一致したすべての要素の内部にコンテンツを追加します。
3	appendTo（セレクター）一致したすべての要素を、指定された別の要素のセットに追加します。
4	before（コンテンツ）一致した各要素の前にコンテンツを挿入します。
5	clone（bool）一致したDOM要素とそのすべてのイベントハンドラーのクローンを作成し、クローンを選択します。
6	clone（）一致したDOM要素のクローンを作成し、クローンを選択します。
7	空の（）一致した要素のセットからすべての子ノードを削除します。
8	html（val）一致したすべての要素のhtmlコンテンツを設定します。
9	html（）最初に一致した要素のhtmlコンテンツ（innerHTML）を取得します。
10	insertAfter（セレクター）一致したすべての要素を、指定された要素のセットの後に挿入します。
11	insertBefore（セレクター）一致したすべての要素を、指定された別の要素セットの前に挿入します。
12	prepend（content）一致するすべての要素の内側にコンテンツを付加します。
13	prependTo（セレクター）一致したすべての要素を、指定された別の要素のセットの前に追加します。
14	remove（expr）一致したすべての要素をDOMから削除します。
15	replaceAll（セレクター）指定されたセレクターによって一致した要素を一致した要素に置き換えます。
16	replaceWith（content）一致したすべての要素を、指定されたHTMLまたはDOM要素に置き換えます。
17	text（val）一致したすべての要素のテキストコンテンツを設定します。
18	text（）一致したすべての要素の結合されたテキストコンテンツを取得します。
19	wrap（elem）一致した各要素を指定された要素でラップします。
20	wrap（html）一致した各要素を指定されたHTMLコンテンツでラップします。
21	wrapAll（elem）一致したセット内のすべての要素を単一のラッパー要素にラップします。
22	wrapAll（html）一致したセット内のすべての要素を単一のラッパー要素にラップします。
23	wrapInner（elem）一致した各要素（テキストノードを含む）の内部の子コンテンツをDOM要素でラップします。
24	wrapInner（html）一致した各要素（テキストノードを含む）の内部の子コンテンツをHTML構造でラップします。