jquery，js引入css文件，js引入头尾

jquery，js引入css文件，js引入头尾

今天在项目中，需要把20多个页面加上头和尾部，头和尾是我写的，所以小师傅把这个工作交给我了。

我开始往里面加，先引入common.css，在body开始标签下面添加<header></header>,在body结束标签的地方添加<footer></footer>，然后引入common.js文件，还有每行添加注释

例如：

<!-- header -->
<header></header>
<!-- footer -->
<footer></footer>
<!-- common.css -->
<link rel="stylesheet" href="../assets/css/common.css">
<!-- common.js -->
<script src="../assets/js/common.js"></script>

然后，改了三个文件之后，我怒了。。。。。。

既然这些要引入，以前做jsp的时候，这样引入公共文件：

<%@ include file="test.jsp"%>

而现在做php，这样写：

<?php 
   require  ROOT_PATH.'includes/header.inc.php';
?>

<?php 
   require  ROOT_PATH.'includes/footer.inc.php';

   ?>

作为一个前端，是不是可以达到同样的效果呢？果断百度，综合了一下，写成了这样：

$(function(){
    /* 添加头尾标签 */
    $("<header></header>").insertBefore("body div:first");
    $("<footer></footer>").appendTo("body");

    /* 加载头尾内容 */
    $("header").load("header.html");
    $("footer").load("footer.html");

    /* 添加样式表common.css */
    $("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: "../assets/css/common.css"
    });
})

然后，只需这样：

<script src="../assets/js/common.js"></script>

完事。这样前端出页面时，也不必苦苦等候后台的帮助了，也不用问他们怎么加入了，一行搞定~~~

转载于:https://www.cnblogs.com/siwy/p/4950470.html