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>

完事。這樣前端出頁面時，也不必苦苦等候后台的幫助了，也不用問他們怎么加入了，一行搞定~~~