jQuery - コンテンツと属性の取得

❮ 前章へ 次章へ ❯

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


jQuery DOM 操作

jQuery の非常に重要な部分の 1 つは、DOM を操作することができることです。

jQuery には、要素と属性にたいしアクセスや操作がしやすいよう、DOM 関連メソッド群が付属しています。

DOM = Document Object Model

DOM は、HTML や XML 文書へアクセスするための標準を定義します:

「W3C Document Object Model (DOM) は、プログラムとスクリプトが文書のコンテンツ、構造、およびスタイルへ 動的にアクセスし、更新を可能にする、プラットフォームや言語に依存しないインターフェースです。」


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

この3つは、単純ですが便利なメソッドです。DOM 操作のための jQuery メソッドは次のとおりです:

次の例は、jQuery text() と html() メソッドでコンテンツを取得する方法のデモです:

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

次の例は、jQuery val() メソッドで 入力フィールドの値を取得する方法のデモです:

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

属性の取得 - attr()

jQuery attr() メソッドは、属性値を取得するために使用します。

次の例は、リンク内の href 属性値を取得する方法のデモです:

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

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


練習問題で確認テスト!

練習問題 1 »  練習問題 2 »  練習問題 3 »  練習問題 4 »


jQuery HTML リファレンス

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


❮ 前章へ 次章へ ❯