この記事は、H5EDU 組織の公式 HTML5 トレーニング チュートリアルであり、主に以下を紹介します: JavaScript 拡張チュートリアル - コンテンツと属性の取得
jQuery - コンテンツと属性の取得
jQuery には、HTML 要素と属性を操作するための強力なメソッドがあります。
jQuery DOM 操作
jQuery の非常に重要な部分は、DOM を操作する機能です。
jQuery は、要素や属性へのアクセスと操作を容易にする一連の DOM 関連のメソッドを提供します。
lamp DOM = ドキュメント オブジェクト モデル
DOM は、HTML および XML ドキュメントにアクセスするための標準を定義します。
「W3C ドキュメント オブジェクト モデルは、プログラムとスクリプトがドキュメントのコンテンツに動的にアクセスして更新できるようにする、プラットフォームおよび言語に依存しないインターフェイスです。構造とスタイル。
コンテンツの取得 - text()、html()、および val()
DOM 操作のための 3 つのシンプルで実用的な jQuery メソッド:
text() - 選択された要素のテキスト コンテンツを設定または返します
html( ) - 選択した要素のコンテンツ (HTML タグを含む) を設定または返します
val() - フォーム フィールドの値を設定または返します
次の例は、jQuery text() および html() メソッドを通じてコンテンツを取得する方法を示しています:
例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
}); ). click(function(){
alert("HTML: " + $("#test").html());
}); 次の例は、 jQuery val() メソッド:
例
$("#btn1").click(function(){
alert("値は次のとおりです: " + $("#test").val());
});
属性の取得 - attr( )
jQuery attr() メソッドは属性値を取得するために使用されます。
次の例は、リンク内の href 属性の値を取得する方法を示しています。
例
$("button").click(function(){
alert($("#runoob").attr("href") ));
});