jQuery 获取/設定

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

jQueryは、HTML要素や属性を効果的に操作するための方法を提供しています。

本章では、jQueryがどのように要素内容や属性値を取得および設定するかを説明します。

HTML DOM（ドキュメントオブジェクトモデル）

ドキュメントオブジェクトモデル、通常DOM、これは、ウェブサイトのインタラクティブ性を提供する重要な部分です。

ドキュメントオブジェクトモデル表示されているHTMLドキュメントを表します。

これは、jQueryがウェブサイトの内容、構造、スタイルを操作するためのインターフェースです。

jQueryで内容を取得または設定-html()，text()とval()

使用jQuery，我们可以轻松地操纵HTML元素。

我们有以下用于DOM操作的jQuery方法：

• html()

• text()

• val()

下一节将向您展示如何使用每种方法。

jQuery html()メソッド

jQuery html()方法获取或设置所选元素的内容（innerHTML）。

下面的示例在单击按钮时获取第一段的内容：

$("button").click(function(){
　　alert($("p").html());
});

下面的示例在单击按钮更改所有段落的内容：

$("button").click(function(){
　　$("p").html("我想说:　<b>Hello　world</b>
});

jQuery text()メソッド

jQuery text()方法获取或设置选定元素（包括其后代）的文本内容。

下面的示例在单击按钮时获取所有段落的文本内容：

$("button").click(function(){
　　alert($("p").text());
});

下面的示例在单击按钮时更改所有段落的文本内容：

$("button").click(function(){
　　$("p").text("我想说:　Hello　world");
});

html()とtext()の違い

html()和text()方法都可以设置或获取HTML元素的内容，但是有以下区别：

html()：

• 设置或获取所选元素的内容（テキスト+ HTMLマークアップ）

• 当使用html()方法获取内容时，它将返回第一个选定元素的内容

text()：

• 设置或获取所选元素的内容（仅文本）

• 当使用text()方法获取内容时，它将返回所有选定元素的文本内容

下面的示例演示html()方法和text()方法之间的区别：

$("#btn1").click(function(){
　　$("p").html("我想说:　<b>Hello　world</b>
});
$("#btn2").click(function(){
　　$("p").text("我想说:　<b>Hello　world</b>
});

jQuery val()メソッド

jQuery val()方法获取或设置所选表单元素的value属性。

以下示例获取<input>フィールドの値：

$("button").click(function(){
　　$("input:text").val();
});

以下の例では設定<input>フィールドの値：

$("button").click(function(){
　　$("input").val("Hello　world");
});

jQueryは属性を取得または設定します-attr()

jQuery attr()メソッドは、選択された要素の属性と値を取得または設定します。

以下の例では、画像のsrc属性の値：

$("button").click(function(){
　　$("img").attr("src");
});

以下の例では、画像のsrc属性の値：

$("button").click(function(){
　　$("img").attr("src",　"logo_jquery.png");
});

以下の例では、複数の属性と値を設定します：

$("button").click(function(){
　　$("img").attr({
　　　　alt:　"Seagull　Icon",
　　　　title:　"Image　by　Seagull",
　　　　width:　"350px",
　　　　height:　"300px"
　　});
});

jQueryのHTMLリファレンス

完全なHTMLメソッドのリファレンスについては、以下のURLを参照してくださいjQueryのHTML / CSSリファレンス。