• text() 获取节点的文本.
  • html() 获取 html 文本

jQuery的API设计非常巧妙:

  • 无参数 → 获取文本,
  • 有参数 → 设置文本

获取文本和HTML:

$('#test-ul li[name=book]').text();    // 'Java & JavaScript'
$('#test-ul li[name=book]').html();    // 'Java & JavaScript'

$('div').html()  =>  document.querySelecotr('div').innerHTML
$('div').text()  =>  var t = document.querySelector('div');

修改文本和HTML

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

<!-- JS -->

$('#test-ul li').text('JS'); 

// 是不是两个节点都变成了JS?
// 如果id不存在: 代码不会报错,这意味着jQuery帮你免去了许多if语句。


$('div').html('<span>abc</span>');  =>  document.querySelecotr('div').innerHTML = '<span>abc</span>';
$('div;).text('abc')  =>  document.querySelecotr('div').textContent = 'abc'

获取包含元素本身的内容

$('<div>').append($('#test').clone()).html() => document.getElementById('test').outerHTML
$('<div>').append($('#test').clone()).html('<span>abc</span>') => document.getElementById('test').outerHTML = '<span>abc</span>' 

获取设置表单值

$(‘input’).val() => document.querySelector(‘input’).value $(‘input’).val(‘abc’) => document.querySelector(‘input’).value = ‘abc’