jQuery获取文本内容和原生JS的异同之处

相关函数

• jQuery：$.text() 和 $.html()
• JavaScript：textContent 和 innerHTML

异同点

1. 语法

• jQuery语法： $(selector).text() 和 $(selector).html()
• JavaScript语法： element.textContent 和 element.innerHTML

2. 返回值

• jQuery返回调用的DOM元素的文本或HTML内容
• JavaScript返回值为字符串形式的文本或HTML内容

3. 区别

• jQuery可以对多个元素同时进行文本或HTML内容的获取和设置
• JavaScript需要对每个元素单独进行获取和设置

示例说明

示例1

HTML代码：

<div id="content">
  <p>这是一个jQuery选择器</p>
</div>

jQuery代码：

var content = $('#content');

// 获取元素内的文本内容
var textContent = content.text(); // 返回值为：这是一个jQuery选择器

// 获取元素内的HTML内容
var htmlContent = content.html(); // 返回值为：<p>这是一个jQuery选择器</p>

JavaScript代码：

var content = document.getElementById('content');

// 获取元素内的文本内容
var textContent = content.textContent; // 返回值为：这是一个jQuery选择器

// 获取元素内的HTML内容
var htmlContent = content.innerHTML; // 返回值为：<p>这是一个jQuery选择器</p>

示例2

HTML代码：

<ul>
  <li>jQuery</li>
  <li>JavaScript</li>
  <li>HTML</li>
</ul>

jQuery代码：

var list = $('ul li');

// 获取所有li元素的文本内容
var textContent = list.text(); // 返回值为：jQueryJavaScriptHTML

// 获取第一个li元素的HTML内容
var htmlContent = list.first().html(); // 返回值为：<li>jQuery</li>

JavaScript代码：

var list = document.getElementsByTagName('li');

// 获取所有li元素的文本内容
var textContent = '';
for (var i = 0; i < list.length; i++) {
  textContent += list[i].textContent;
} // 返回值为：jQueryJavaScriptHTML

// 获取第一个li元素的HTML内容
var htmlContent = list[0].innerHTML; // 返回值为：<li>jQuery</li>

以上就是jQuery获取文本内容和原生JS的异同之处的完整攻略。