new一个实例出现的问题?

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部分没有内容,同时页面样式也未能生效。(已确定引入样式)
图片描述

阅读 1.4k
2 个回答

为什么要使用$('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空了,bodyscript标签也没有了吗。

所以首先把$('html,body')修改为$('body'),然后把.html方法替换为.prepend或者.append方法:

$('body').prepend(layer);

是否用.prepend方法替换.html方法要看你的需求,如果你的需求就是完全替换,那么用.html方法就行,如果是添加的话,还是换为.prepend或者.append比较好。

新手上路,请多包涵

从你下面发的那个图,说明layer已经插入到body中了,你的代码中layer并没有内容,所以网页是空白的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题