jqueryでdivを更新する方法-フロントエンドQ&A-php.cn

jqueryでdivを更新する方法

PHPz

リリース： 2023-05-28 10:28:07

オリジナル

1963 人が閲覧しました

フロントエンド開発では、Web ページのコンテンツを動的に更新する必要がよくありますが、JQuery は非常に人気のある JavaScript ライブラリであり、ページ上の要素の更新を容易にする多くのツール関数を提供します。その中でも div の更新は比較的一般的な要件ですが、JQuery がどのように div を更新するかを見てみましょう。

まず第一に、refresh div とは何かを明確にする必要があります。一般に、div リフレッシュは、非同期リクエストがデータを返した後、ページ全体をリフレッシュせずに、特定の div 領域のコンテンツを更新する必要がある場合に使用されます。ページ全体を更新せずにコンテンツの一部のみを更新するこの方法により、フロントエンドフローがスムーズになり、ユーザーエクスペリエンスがよりスムーズになります。

次に、JQuery の基本的な使用法を理解する必要があります。まず明確にしておきたいのは、JQuery は JavaScript ライブラリであるため、JQuery の js ファイルを導入する必要があるということです。通常、HTML ファイルのヘッダーに次のコードを挿入します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

ログイン後にコピー

JQuery を導入した後、JQuery を使用して div 内のコンテンツを更新する方法を見てみましょう。一般に、div のコンテンツの更新は 2 つのステップに分かれています。最初のステップは、JQuery を介して更新する必要がある div 要素を取得することです。2 番目のステップは、JQuery が提供する API を介して div のコンテンツを更新することです。。

div 要素を取得する方法は非常に簡単です。更新する必要がある div 要素を取得するには、JQuery のセレクターを使用するだけです。例:

var divElement = $('div#updateDiv');

ログイン後にコピー

ここでは div を使用します。 updateDiv.selector の ID を持つ要素を取得して変数 divElement に割り当てます。

次に、JQuery が提供する API を使用して、この div のコンテンツを更新する必要があります。 JQuery は要素のコンテンツを更新するためのさまざまな API メソッドを提供します。一般的に使用されるメソッドは html() と text() です。

html() メソッドによる div のコンテンツの更新

html() メソッドは、選択した要素のコンテンツを設定または返すことができます。より具体的には、HTML の挿入に使用できます。 div 要素内に指定されたコードを挿入します。

たとえば、次のコードを使用して、Ajax を呼び出してデータを取得します。

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').html('任务名称：' + data.title + '<br>' + '任务状态：' + data.completed);
  }
});

ログイン後にコピー

ここでは、Ajax を呼び出してデータを取得し、title 属性と completed 属性の値を結合します。データをタスク名とタスクステータス文字列に取り込み、html() メソッドを呼び出してこの文字列を div 要素に更新します。

text() メソッドを使用して div のコンテンツを更新する

text() メソッドは、選択した要素のテキストコンテンツを設定または返すことができ、テキストコンテンツの更新に使用できます。指定された div 要素の。

たとえば、次のコードを使用して Ajax を呼び出してデータを取得します。

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').text('任务名称：' + data.title + '，' + '任务状态：' + data.completed);
  }
});

ログイン後にコピー

ここでも、Ajax を呼び出してデータを取得し、タイトルと完了の値を結合します。データの属性をタスク名とタスクのステータスの文字列に変換し、text() メソッドを呼び出してこの文字列を div 要素に更新します。

上記の方法により、フロントエンドの div コンテンツを簡単に更新できます。ただし、この更新メソッドは、div 内のコンテンツが複雑な HTML 構造ではない場合にのみ適用できることに注意してください。更新されたコンテンツがより複雑な場合は、Vue.js などのフロントエンドフレームワークを使用して、より良い開発エクスペリエンスを実現できます。

概要:

JQuery はフロントエンド開発でよく使われる JavaScript ライブラリの 1 つで、JQuery の API を利用することでページ要素を簡単に操作できます。 div リフレッシュを実装する場合、まず更新する必要がある div 要素を取得し、次に html() メソッドや text() メソッドなどの JQuery が提供する API メソッドを使用して div 内のコンテンツを更新することで、ページ全体を更新せずにページ全体を表示する部分的なコンテンツ効果。

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