jqueryで要素の内容を取得する方法

jQuery は、JavaScript に基づいて開発された、高速、小型、強力な JavaScript ライブラリです。その核心は、HTML ドキュメント内の要素を選択および操作するための使いやすく強力なセレクターです。 jQuery では要素の内容を取得する方法が数多くありますが、この記事では最も一般的に使用されるメソッドのいくつかについて説明します。

1. text() メソッドは要素のテキスト コンテンツを取得します

jQuery では、text() メソッドを使用して要素のテキスト コンテンツを取得できます。この方法は、選択した要素に他のタグや要素が含まれていない状況に適しています。たとえば、次の HTML コードの場合:

<p>这是一个段落</p>

次のコードを使用して、段落のテキスト コンテンツを取得できます。

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

2. html() メソッドは、次の HTML コンテンツを取得します。要素

If 選択した要素には他のタグまたは要素が含まれており、その HTML コンテンツは html() メソッドを使用して取得できます。たとえば、次の HTML コードの場合:

    
标题
    <p>这是一个段落</p>

次のコードを使用して、div 要素の HTML コンテンツを取得できます:

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

3. val() メソッドは、次の値を取得します。フォーム要素

フォーム要素 (input、select、textarea など) の場合、val() メソッドを使用して値を取得できます。たとえば、次の HTML コードの場合:

<input type="text" value="这是输入框的值">

次のコードを使用して、入力ボックスの値を取得できます。

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

4. 要素属性を取得する attr() メソッドvalue

attr() メソッドを使用して、要素の属性値を取得できます。たとえば、次の HTML コードの場合:

<img src="image.png">

次のコードを使用して、img 要素の src 属性値を取得できます:

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

5. data() メソッドは要素を取得します。 data 属性値

データ属性を持つ要素の場合、data() メソッドを使用してデータ属性値を取得できます。たとえば、次の HTML コードの場合:

<div data-name="John" data-age="30"></div>

次のコードを使用して、div 要素の data-name および data-age 属性値を取得できます:

var name = $("div").data("name");
var age = $("div").data("age");

データは HTML 属性で定義されていることに注意してください。「data-name」のように、属性の前に「data-」を付ける必要があります。

概要

jQuery では、要素のコンテンツを取得する方法が多数あり、特定の一般的なシナリオに応じて選択できます。上記の方法でほとんどのアプリケーション シナリオをカバーできますが、この記事が読者の jQuery の理解と応用に役立つことを願っています。

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