html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./showbox.css">
</head>
<body>
<script src="./jQuery-1.12.4.js"></script>
<script src="./showbox.js"></script>
<script>
$(function(){
var box = new ShowBox();
box.push('hello world');
});
</script>
</body>
</html>
js:
(function(){
function ShowBox(){};
ShowBox.prototype = {
push:function(content){
var layer = '<div class="showbox_layer"></div>';
if(content){
$('html,body').html(layer);
}
}
}
window.ShowBox = ShowBox;
}());
页面中的jquery正常引入。
问题:运行页面后,F12调出控制台。head部分没有内容,同时页面样式也未能生效。(已确定引入样式)
为什么要使用
$('html,body')
?$('html,body')
选中的是两个元素,也就是html
元素和body
元素,.html
方法是把元素的内容用.html
的参数完全覆盖。也就是首先
html
元素的内容完全被<div class="showbox_layer"></div>
替换,可能是给html
添加元素的时候,因为div
不是html
的有效元素,所以会生成一个空的head
标签,一个空的body
标签,然后把<div class="showbox_layer"></div>
放入body
里;然后是
body
元素的内容完全被<div class="showbox_layer"></div>
替换,因为替换前body
就只有<div class="showbox_layer"></div>
,所以替换后和替换前展示的内容是一样的。所以就导致了截图中的效果,你没有发现不仅
head
空了,body
的script
标签也没有了吗。所以首先把
$('html,body')
修改为$('body')
,然后把.html
方法替换为.prepend
或者.append
方法:是否用
.prepend
方法替换.html
方法要看你的需求,如果你的需求就是完全替换,那么用.html
方法就行,如果是添加的话,还是换为.prepend
或者.append
比较好。