jQuery-コンテンツと属性を取得する


jQueryには、HTML要素と属性を変更および操作するための強力なメソッドが含まれています。


jQueryDOM操作

jQueryの非常に重要な部分の1つは、DOMを操作する可能性です。

jQueryには、要素や属性へのアクセスと操作を容易にするDOM関連のメソッドが多数付属しています。

DOM =ドキュメントオブジェクトモデル

DOMは、HTMLおよびXMLドキュメントにアクセスするための標準を定義します。

「W3Cドキュメントオブジェクトモデル(DOM)は、プログラムとスクリプトがコンテンツ、構造、およびドキュメントのスタイル。」


コンテンツの取得-text()、html()、およびval()

DOM操作のための3つのシンプルですが便利なjQueryメソッドは次のとおりです。

  • text() -選択した要素のテキストコンテンツを設定または返します
  • html() -選択した要素のコンテンツを設定または返します(HTMLマークアップを含む)
  • val() -フォームフィールドの値を設定または返します

次の例は、jQuerytext()html()メソッドを使用してコンテンツを取得する方法を示しています。

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

次の例は、jQueryval()メソッドを使用して入力フィールドの値を取得する方法を示しています。

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


属性の取得-attr()

jQueryattr()メソッドは、属性値を取得するために使用されます。

次の例は、リンクでhref属性の値を取得する方法を示しています。

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

次の章では、コンテンツと属性の値を設定(変更)する方法について説明します。


jQueryの演習

エクササイズで自分をテストする

エクササイズ:

jQueryメソッドを使用して、<div>要素のテキストコンテンツを返します。

$("div").();


jQueryHTMLリファレンス

すべてのjQueryHTMLメソッドの完全な概要については、 jQuery HTML / CSSリファレンスにアクセスしてください。