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>
完事。这样前端出页面时,也不必苦苦等候后台的帮助了,也不用问他们怎么加入了,一行搞定~~~
慌慌张张 匆匆忙忙
为何生活总是这样
难道说我的理想
就是这样度过一生的时光
不卑不亢 不慌不忙
也许生活应该这样
难道说六十岁以后
再去寻找我想要的自由
其实我也常对自己说
人要学会知足而常乐
可万事都一笑而过
还有什么意思呢