总有人间一两风,填我十万八千梦

jQuery .text() 用法 手册 | 示例代码

jQuery开发手册 归档 367℃ 0评论

描述: 得到匹配元素集合中每个元素的合并文本,包括他们的后代

  • 添加的版本: 1.0.text()

    • 这个方法不接受任何参数。/div>

.html() 方法不同, .text() 在XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串,包含所有匹配元素的合并文本。  (由于在不同的浏览器中的HTML解析器的变化,返回的文本中换行和其他空白可能会有所不同。)考虑下面的html:

1
2
3
4
5
6
7
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>

代码$('div.demo-container').text() 将提供下面的结果:

Demonstration Box list item 1 list item 2

.text() 方法不能使用在 input 元素或scripts元素上。 inputtextarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值,使用.html()方法

从 jQuery 1.4开始, .text()方法返回文本内容和作为元素节点的CDATA 节点。

例子:

Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $("p:first").text();
$("p:last").html(str);
</script>
</body>
</html>

描述: 设置匹配元素集合中每个元素的文本内容为指定的文本内容。

  • 添加的版本: 1.0.text( textString )

    • textString
      类型: String
      用于设置匹配元素内容的文本
  • 添加的版本: 1.4.text( function(index, text) )

    • function(index, text)
      类型: Function()
      用来返回设置文本内容的一个函数。接收元素的索引位置和文本值作为参数。

.html() 方法不同, .text() 在XML 和 HTML 文档中都能使用。

我们必须意识到这种方法提供了必要的字符串从提供的正确的HTML中脱离出来。这样做, 他调用DOM 方法 .createTextNode(), 一种替代的特殊字符与HTML对应(比如< 替换为 &lt; )方法。考虑下面的html:

1
2
3
4
5
6
7
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>

$('div.demo-container').text('<p>This is a test.</p>');代码语句将输出以下 DOM :

1
2
3
<div class="demo-container">
&lt;p&gt;This is a test.&lt;/p&gt;
</div>

它会出现在渲染的页面上就好像标签被暴露,像这样:

1
<p>This is a test</p>

.text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。

从 jQuery 1.4开始, .text()方法允许我们通过函数来传递文本内容。

1
2
3
$('ul li').text(function(index) {
return 'item number ' + (index + 1);
});

给定一个拥有3个<li>元素,在这个例子中将输出下面的DOM:

1
2
3
4
5
<ul>
<li>item number 1</li>
<li>item number 2</li>
<li>item number 3</li>
</ul>

例子:

在段落中添加文本。注意这个<b>标签将从HTML中脱离出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Test Paragraph.</p>
<script>$("p").text("<b>Some</b> new text.");</script>
</body>
</html>

转载请注明:悠然品鉴 » jQuery .text() 用法 手册 | 示例代码

喜欢 (0)or分享 (0)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址