JQuery html(),val(),text()之間的區別

1. html()：取得第一个匹配元素的html内容

html页面代码：<div><p>Hello</p></div><div>World</div>

jquery代码：$("div").html();

结果：<p>Hello</p>

2. text（）：取得所有匹配元素的文本内容。结果是由所有匹配元素包含的文本内容组合起来的文本.

html页面代码：<div><p>Hello</p></div><div>World</div>

jquery代码：$("div").text();

结果：HelloWorld

3. val(): 获得第一个匹配元素的当前值,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值

<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>

$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);

结果：<p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>

4. html（val）：设置每一个匹配元素的html内容

html页面代码：<div><p>Hello</p></div><div>World</div>

jquery代码：$("div").html("<b>Nice to meet you</b>");

结果：：<div><b>Nice to meet you</b></div><div><b>Nice to meet you</b></div>

5. text（val）：设置每一个匹配元素的內容，與html(val)相同,不同的是将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体

html页面代码：<div><p>Hello</p></div><div>World</div>

jquery代码：$("div").text("<b>Nice to meet you</b>");

结果：：<div>&lt;b&gt;Nice to meet you&lt;/b&gt;</div><div>&lt;b&gt;Nice to meet you&lt;/b&gt;</div>

6. val(val):设置每一个匹配元素的值