jquery DOMの追加・削除・変更・確認の実装方法

jQuery は現在最も人気のある JavaScript ライブラリの 1 つで、DOM 要素の操作を容易にする一連の API が含まれています。 jQuery では、CSS セレクターと同様のメソッドを通じて DOM 要素を取得または操作できるため、操作全体が非常にシンプルかつ高速になります。

この記事では、jQuery でよく使用される DOM の追加、削除、変更、検索メソッドを紹介し、jQuery の DOM 操作をより明確に理解できることを願っています。

1. DOM 要素の取得

jQuery では、次のような一般的な CSS セレクターを使用して DOM 要素を取得できます。

$('p') // 获取所有的p标签
$('.img') // 获取class名为img的元素
$('#box') // 获取ID为box的元素

これらの一般的に使用されるセレクターに加えて、 , jQuery には、DOM 要素を取得するための一連のメソッドも提供されています。たとえば、find() メソッドを使用して、指定された要素の子孫要素を検索できます。

$('.container').find('.box') // 获取class名为container的元素中所有class名为box的后代元素

parent を使用して、指定された要素の親要素を取得することもできます。 () メソッド ：

$('.box').parent() // 获取所有class名为box的元素的父元素

2. 要素の追加

DOM 操作を実行するとき、新しい要素を追加する必要があることがよくあります。 jQuery は、DOM に要素を追加するための一連のメソッドを提供します。

1. append() および appendTo()

これら 2 つのメソッドは、指定された要素に子要素を追加するために使用されます。 . 、例:

// 方法1
$('.container').append('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').appendTo('.container');

2. prepend() と prependTo()

これら 2 つのメソッドは、追加するために使用されます。指定された要素に子要素を追加します。ただし、子要素は子要素の前に追加します。例:

// 方法1
$('.container').prepend('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').prependTo('.container');

3. after() および insertAfter()

これら 2 つのメソッドは、指定された要素の後に兄弟要素を追加するために使用されます。例:

// 方法1
$('.box').after('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertAfter('.box');

4. before() と insertBefore()

これら 2 つのメソッドは、指定された要素の前に兄弟要素を追加するために使用されます (例:

// 方法1
$('.box').before('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertBefore('.box');

3. 要素の削除

##) #DOM に要素を追加するだけでなく、DOM 内の要素を削除する必要もよくあります。 jQuery には、要素を削除するための一連のメソッドも用意されています。

1. remove()

このメソッドは、指定された要素を削除するために使用されます。例:

$('.box').remove() // 删除所有class名为box的元素

2. empty()

このメソッドは、指定された要素の下にあるすべての子要素を削除するために使用されます (例:

$('.container').empty() // 删除class名为container的元素下所有子元素

3)。 ##DOM 要素を変更する これは、よく考えなければならない問題でもあります。 jQueryでは要素の属性、テキスト、スタイルなどを変更できます。

属性の変更

1. attr()

メソッドを使用して、要素の属性を変更できます。例:

$('.box').attr('title', '新的标题') // 修改所有class名为box的元素的title属性

テキストの変更

2. text()

メソッドを使用して要素のテキストを変更できます。例:

$('.box').text('新的文本内容') // 修改所有class名为box的元素的文本

スタイルの変更

3. css()

メソッドを使用して要素のスタイルを変更できます。たとえば、次のようになります。

$('.box').css('color', 'red') // 修改所有class名为box的元素的文本颜色为红色

Set 属性

4. 要素の属性を設定するには
prop()

メソッドを使用できます。例:

$('input[type="checkbox"]').prop('checked', true) // 将所有type为checkbox的input元素的checked属性设置为true

概要この記事では、一般的なjQuery で DOM の追加、削除、変更、クエリ メソッドを使用しました。この記事を通じて、読者の皆様が jQuery の DOM 操作をより明確に理解し、実際のプロジェクトに適用できることを願っています。もちろん、jQuery は DOM を操作するための他の強力なメソッドもいくつか提供しており、読者は公式ドキュメントを通じてそれらについて詳しく学ぶことができます。

以上がjquery DOMの追加・削除・変更・確認の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。