zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    netty之微信-Netty 环境配置(四)
    netty之微信-Netty 是什么?(三)
    netty之微信-IM简介(二)
    netty之微信-效果展示(一)
    为什么选择netty?
    [转]Python调用(运行)外部程序
    聚会游戏
    JavaScript点击事件-一个按钮触发另一个按钮
    文本框输入事件:onchange 、onblur 、onkeyup 、oninput
    js如何使两个input里的内容实时变化
  • 原文地址:https://www.cnblogs.com/siwy/p/4950470.html
Copyright © 2011-2022 走看看