jquery 学习之二 属性 文本与值(text,val)
作者：
jquery 学习之二 属性 文本与值(text,val)，学习jquery的朋友可以参考下。
text()
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
Get the text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.
返回值
String
示例
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
jQuery 代码:
$("p").text();
结果:
Test Paragraph.Paraparagraph
------------------------------------------------------------------------------------------------------------------------------
text(val)
设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
返回值
jQuery
参数
val (String) : 用于设置元素内容的文本
示例
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").text("<b>Some</b> new text.");
结果:
[ <p><b>Some</b> new text.</p> ]
------------------------------------------------------------------------------------------------------------------------------
val()
获得第一个匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
Get the content of the value attribute of the first matched element.
In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned.
返回值
String,Array
示例
获得单个select的值和多选select的值。
HTML 代码:
<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
jQuery 代码:
$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
结果:
[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
获取文本框中的值
HTML 代码:
<input type="text" value="some text"/>
jQuery 代码:
$("input").val();
结果:
some text
------------------------------------------------------------------------------------------------------------------------------
val(val)
设置每一个匹配元素的值。
在 jQuery 1.2, 这也可以为select元件赋值
Set the value attribute of every matched element.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
返回值
jQuery
参数
val (String) : 要设置的值。
示例
设定文本框的值
HTML 代码:
<input type="text"/>
jQuery 代码:
$("input").val("hello world!");
------------------------------------------------------------------------------------------------------------------------------
val(val)
check,select,radio等都能使用为之赋值
返回值
jQuery
参数
val (Array<String>) : 用于 check/select 的值
示例
设定一个select和一个多选的select的值
HTML 代码:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);