Question

jQuery中text val和html的区别实例详解

Answer 1

观察名字就差不多知道这个意思啦，先区别text和html，再说val

//html
<div class="box">123<b>4</b>567</div>

1. text ，就是不带标签的文本，例如上面的html，我们使用JQ

   console.log($('.box').text())

   我们使用这个代码的打印结果是1234567，会发现过滤了b标签

2. 而html则相反，是带标签的

   console.log($('.box').html())

   会发现打印的结果是123<b>4</b>567
   这个应该就能理解了

3. 而val则和前者的区别是它是用在表单元素，如input,select,textarea上面。
   注意：text,html用在表单元素上面是无效的

   //html
   <input type="text" value="123" class="input">
   //JQ
   console.log($('.input').val())

   打印的值就是123

Answer 2

text是指文本节点，比如<span><a>啦啦啦</a></span>这个标签，$('span').text()就是指span标签里面的文本“啦啦啦”。如果用html的话，$('span').html()就是指“<a>啦啦啦</a>”，会把里面的标签也带上。只要是span标签里面的东西 都包括在html里。
value是属性值，jQuery里面简化了value方法，直接是val()；比如<input type=‘text’value=‘aaa’>，这是一个单行文本输入框，$('input').val()就可以直接获取aaa，如果此时文本框输入了新的值1234，value值也会随着变化，$('input').val()获取的就成1234了。