源码解读jQ中浏览器兼容模块support第1/2页

2020-05-27 17:57:35易采站长站整理

window.l = (function() {
var el = document.createElement("div"), index = 0;
el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";
return function(message) {
if( message ) {
var span = document.createElement("span");
span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";
el.appendChild( span );
};
//IE低版本直接通过createElement创建的元素有parentNode;
if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {
document.body.appendChild(el);
};
return l;
};
})();

</script>
IE678中自动过滤了元素前后的空格,
而且空格不包含在childNodes里面,
<script type="text/javascript">
var el = document.createElement("div");
el.innerHTML = " <div id="null"> </div> ";
l(el.childNodes.length);
</script>
</body>
</html>

标准浏览器中是遵守用户输入, el应该包含三个节点 :[“”, “<div id=”null”> </div>”, “”]节点;

IE678中却只有1个节点, 这个节点就是那个DIV:

$.support.checkOn属性

标准浏览器中的checkbox默认value为”on”,IE5678也都是”on”, 但是在某些webkit中checkbox的值默认为””字符串,现在的浏览器版本都很高了, 基本没有这个问题, 如果你有chrome低版本的话可以用下面这个demo测试看看有没有问题:


<html>
<head>
<meta charset="utf-8" />
<title>兼容</title>
</head>
<body>
<script type="text/javascript">

window.l = (function() {
var el = document.createElement("div"), index = 0;
el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";
return function(message) {
message = message.toString();
if( message ) {
var span = document.createElement("span");
span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";
el.appendChild( span );
};
//IE低版本直接通过createElement创建的元素有parentNode;
if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {
document.body.appendChild(el);
};
return l;
};
})();

</script>
<input id="ck" type='checkbox'/>