button元素在过去一直没有被重视,其实它比<input type="button">的语义强许多,制定性也好许多。不过IE浏览器的button元素存在一个可怕的bug。它总是把其innerHTML神经错乱地当成其value值,因此,如果用它来提交表单时,可能产生一些负作用,会把正确的键值对覆盖了。
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" <a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/403/5947403.shtml" target="_bank">content</a>="IE=7">
<title>button <a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/325/5947825.shtml" target="_bank">element</a> bug by 司徒正美</title>
<<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/425/5948925.shtml" target="_bank">script</a> src="http://common.cnblogs.<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/307/5947307.shtml" target="_bank">com</a>/script/jquery.js" type="<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/162/6092662.shtml" target="_bank">text</a>/javascript"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function(){
var el = document.getElementById("bb");
alert(el.getAttribute("value"))
alert("下面是jQuery1.3.2取得的值");
alert($("#bb").attr("value"))
alert($("#bb").val())
}
</script>
</head>
<body>
<button value="正确的值" id="bb">
<span style="color:red;">错误的值</span>
</button>
</body>
</html>
这恶性bug即使是jQuery1.3.2也没有修正它,因此不要迷信jQuery。不过,这bug也不是那么难修正的。如果光是想获得正确的value值,我们可以简单地使用如下代码:
var el = document.getElementById("bb"); el.attributes["value"].nodeValue
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7">