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. 要素の削除

1. remove()

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

2. empty()

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

属性の変更

1. attr()

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

2. text()

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

3. css()

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

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

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

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