jqueryはdom値を変更します

Web 開発のプロセスでは、通常、DOM 要素を追加、削除、変更、確認する必要があります。その中でも、DOM 要素の値の変更は一般的な操作です。人気の JavaScript ライブラリである jQuery は、DOM 要素の値を変更するための豊富な API を提供します。

この記事では、要素の値を取得する方法、要素の値を変更する方法、チェーン呼び出しを通じて複数の要素を操作する方法など、jQuery が DOM 値を変更する方法を紹介します。

要素の値を取得する

jQuery では、セレクターを通じて DOM 要素を取得し、API を通じて要素の値を取得できます。以下に、要素の値を取得するための一般的な API をいくつか示します。

1. val(): input、select、または textarea 要素の値を取得します。

たとえば、テキスト ボックスの値を取得します。

var value = $('#input-id').val();

2. text(): 要素のテキスト コンテンツを取得します。

たとえば、p 要素のテキスト コンテンツを取得します。

var text = $('p').text();

3. html(): 要素の HTML コンテンツを取得します。

たとえば、div 要素の HTML コンテンツを取得するには:

var html = $('div').html();

4. attr(): 要素の属性値を取得します。

たとえば、img 要素の src 属性を取得するには:

var src = $('img').attr('src');

上記の API は、要素の値をカスタマイズするためのパラメータとして関数を受け入れることもできます。例:

var value = $('input').val(function(index, value) {
  return value.toUpperCase();
});

複数の要素の値を取得する場合、 each() 関数を使用して要素を走査し、その値を取得できます。たとえば、すべてのテキスト ボックスの値を取得します:

$('input[type="text"]').each(function() {
  console.log($(this).val());
});

要素の値を変更する

要素の値の取得は、DOM 要素を変更する操作の一部にすぎません。一般的な方法は、DOM 要素の値を変更することです。 DOM 要素を変更するための一般的な API をいくつか示します。

1. val(): input、select、または textarea 要素の値を設定します。

たとえば、テキスト ボックスの値を「hello」に設定します。

$('#input-id').val('hello');

2. text(): 要素のテキスト コンテンツを設定します。

たとえば、p 要素のテキスト コンテンツを「world」に設定するには:

$('p').text('world');

3. html(): 要素の HTML コンテンツを設定します。

たとえば、div 要素の HTML コンテンツを「

title

」に設定します。

$('div').html('<h1>title</h1>');

4. attr(): 属性を設定します。要素の値の。

たとえば、img 要素の src 属性を「image.jpg」に設定します。

$('img').attr('src', 'image.jpg');

複数の要素に対する操作

これで、学習について理解できました。単一の DOM 要素の値を取得および変更する方法。ただし、通常は、複数の要素に対して同じまたは異なる操作を実行する必要があります。 jQuery は、複数の要素を操作するための連鎖呼び出しとフィルターを提供します。

連鎖呼び出しの使用

JQuery の連鎖呼び出しを使用すると、1 つのステートメントで複数の要素を操作できます。たとえば、すべての h1 要素の背景色を赤に変更します:

$('h1').css('background-color', 'red');

すべてのテキスト ボックスの値を空に設定します:

$('input[type="text"]').val('');

複数の属性を同時に変更します:

$('img').attr({
  'src': 'image.jpg',
  'alt': 'image'
});

フィルターの使用

フィルターは、一連の要素のサブセットを選択できる jQuery によって提供される強力なセレクターです。たとえば、クラスが「active」のすべての要素を選択します:

$('.active')

最初の p 要素を選択します:

$('p:first')

最初の 3 つの div 要素を選択します:

$('div:lt(3)')

ハンドラーは、選択された要素を操作するために API と組み合わせて使用​​されます。たとえば、クラス "highlight" のテキスト ボックスの値を空に設定します:

$('input.highlight:text').val('');

上記の例は、さまざまなフィルターの使用法を示しています。フィルターの使用法に慣れることで、必要な要素を柔軟に選択できます。操作されます。

概要

この記事の導入部を通じて、jQuery が DOM 要素の値を取得および変更する方法と、チェーン呼び出しとフィルターを通じて複数の要素を操作する方法を学びました。これらの手法により、DOM 要素をより迅速に操作できるようになり、開発効率が向上します。同時に、jQuery の操作方法を学ぶことで、他の JavaScript ライブラリやフレームワークを学ぶための基礎を築くこともできます。

以上がjqueryはdom値を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。