今天在使用JavaScript时,用到了value值,忽然想到了jQuery中的html()、val()和text(),就查看了一下参考资料,整理下他们之间的差异,方便以后查看。
1.val():用来读取或者设置修改匹配的value值。(如果是select的多选项,则返回相匹配的数组)
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
2.text():用来读取或者设置匹配元素的文本内容,(如果元素中包含元素,则只会读取该元素的文本内容,不会读取标签,这是和html()最大的区别)
- 1
- 2
- 1
- 2
3.html():用来读取或者设置第一个匹配元素的内容(即标签内包含的所有内容,能够读取到所包含的标签)
- 1
- 2
- 1
- 2
说到jQuery的读取设置标签内容,很容易牵扯到JavaScript的innerHTML、outHTML、innerText:
1.innerHTML:这个是w3c标准的属性,能够读取或者设置元素的内容,jQuery中的html()功能是根据原生js的innerHTML实现的,不过因为innerHTML自身的兼容性问题,所以html()(如果innerHTML存在问题,则通过append()添加字符串)和innerHTML还有一定的差异性
- 1
- 2
- 1
- 2
innerHTML在IE6-9中动态给table添加内容会直接报错,这是因为col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects中的innerHTML只能读取,可以通过append来修改内容
2.innerText:获取设置匹配元素内的文本内容,这个不是w3c标准的属性,会有浏览器兼容性问题,在火狐下是不支持这个属性的,不过可以用textContent来替代
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
3.outHTML:获取或者设置匹配元素的html(包含匹配的标签,不仅仅是标签所包含的内容),这个不是w3c的标准属性,存在浏览器兼容性(ff 不支持该属性)