加载中...

text()

概述    .text()

返回值：String

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

  • V : 1.0.text()

    • 这个方法不接受任何参数

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

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

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

Demonstration Box list item 1 list item 2

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

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

示例

无参数 实例

返回p元素的文本内容。

jQuery 代码: 
  1. $('p').text();

实例

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. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>text demo</title>
  6.   <style>
  7.   p {
  8.     color: blue;
  9.     margin: 8px;
  10.   }
  11.   b {
  12.     color: red;
  13.   }
  14.   </style>
  15.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  16. </head>
  17. <body>
  18.  
  19. <p><b>Test</b> Paragraph.</p>
  20. <p></p>
  21.  
  22. <script>
  23. var str = $( "p:first" ).text();
  24. $( "p:last" ).html( str );
  25. </script>
  26.  
  27. </body>
  28. </html>

运行一下

概述    .text( textString )

返回值：jQuery

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

  • V : 1.0.text( text )

    • text
      类型: String or Number or Boolean
      用于设置匹配元素内容的文本。当提供的是一个数值或布尔值得时候，那么将被转换成一个字符串表现形式，提供给这个方法。

  • V : 1.4.text( function(index, text) )

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

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

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

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

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

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

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

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

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

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

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

给定一个拥有3个<li>元素，在这个示例中将输出下面的DOM： 

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

示例

参数val 实例

设置所有 p 元素的文本内容

jQuery 代码: 
  1. $("p").text("Hello world!");

回调函数 实例

使用函数来设置所有匹配元素的文本内容。

jQuery 代码: 
  1. $("p").text(function(n){
  2.     return "这个 p 元素的 index 是：" + n;
  3.     });

实例

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>text demo</title>
  6.   <style>
  7.   p {
  8.     color: blue;
  9.     margin: 8px;
  10.   }
  11.   </style>
  12.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  13. </head>
  14. <body>
  15.  
  16. <p>Test Paragraph.</p>
  17.  
  18. <script>
  19. $( "p" ).text( "<b>Some</b> new text." );
  20. </script>
  21.  
  22. </body>
  23. </html>
运行一下

还没有评论.