首先,针对API的所属进行分类:
HTML DOM属性:
- innerHTML
- innerText
- outerHTML
- outerText
- document.write
- document.writeIn
jQuery API:
- text()
- html()
- val()
innerHTML、innerText、outerHTML、outerText
innerXXXX和outerXXXX的区别在于:
innerXXXX设置和读取的内容不包含操作的对象本身,outerXXXX则包含
XXXXHTML和XXXXText的区别在于:
XXXXHTML设置和读取的范围包括html标签以及文本内容,而XXXXText则只针对文本内容
document.write与document.writeIn
作用基本相同,唯一的区别:document.writeIn输出时会产生换行,document.write则不会。
但要注意的一点是,除非特殊需要,尽量避免使用document.write与document.writeIn.因为这两个API可能会导致页面整体重绘。
<body>
<p>我是第一个段落</p>
<script>document.write('<p>我是第二个段落</P>')</script>
<p>我是第三个段落</p>
</body>
嵌入在html文档内部时效果显示:
我是第一个段落
我是第二个段落
我是第三个段落
当紧贴放置在</head>
标签前:
我是第二个段落
我是第一个段落
我是第三个段落
当紧贴</body>
标签前:
我是第一个段落
我是第三个段落
我是第二个段落
或使用setTimeout执行document.write时,页面会被重绘,只剩下write()的内容:
我是第二个段落
浏览器在渲染html文件时,会产生一个文档流,从上至下顺序进行渲染,在遇到<script>
后,会立即解析里面的脚本内容(同时阻塞html的渲染),当渲染完毕后浏览器关闭文档流,此时setTimeout执行的脚本会导致浏览器重新打开一个文档流,原来的内容则全部被清空。
text()、val()、html()
这三个API都是jq封装的类似于innerHTML、innerText用于设置和读取内容的,html()和text()一个作用到html标签、另一个只作用于文本内容、val()则是针对于input元素进行操作。
html()
当html()匹配多个元素时,读取内容只会读取到第一个符合的元素,而设置则会将全部符合条件的元素都按规定改变。
text()
text()匹配多个元素时,不论是读取还是设置都会针对到每一个元素。
val()
针对于type=radio的input元素,类似html(),当有多个选项时,若想获得选取的input的value值时:
$('#button').on('click',function(){
var checked = $('input').val();
console.log(checked);
});
此时,获取到的总是第一个input元素的value值(该情况同样发生于type=checkbox的input元素)。若要获取被选择的input元素的value值,请使用:checked
$('#button').on('click',function(){
var checked = $('input:checked').val();
console.log(checked);
});
对于type=checkbox的Input元素,请使用each()进行遍历:
$('#button').on('click',function(){
$('#box input:checked').each(function(){
console.log($(this).val());
})
});
对于multipe=multipe的select元素则又有不同:
$('#button').on('click',function(){
var checked = $('#box').val();
for(var key in checked){
console.log(checked[key]);
}
});
此时,val()返回的是包含每个被选中的option的数组。