jquery 抽离公共页面

最新推荐文章于 2022-05-31 11:12:40 发布

置顶一个程序员的春天

最新推荐文章于 2022-05-31 11:12:40 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jquery js javascript 文章标签： jquery html javascript

本文链接：https://blog.youkuaiyun.com/weixin_44186787/article/details/106158954

js 同时被 3 个专栏收录

32 篇文章

订阅专栏

javascript

31 篇文章

订阅专栏

jquery

15 篇文章

订阅专栏

本文介绍了一种使用jQuery的load方法来实现公共页面元素的复用技术，通过将重复的页面部分如头部、尾部等抽取成独立的HTML文件，然后在需要的地方加载这些文件，从而减少代码冗余，提高网站的维护性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

抽离公共页面
a页面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="header-page"></div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        //注 load里面是header.html的文件路径，同个目录直接文件名称就可以了。
        $('.header-page').load('b.html');
        //注 load方法是异步的，如果你想对引入的文件dom进行操作 必须在其回调函数中操作 否则会获取不到dom节点
    </script>
</body>

</html>

	b页面
	不用写head
<header>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</header>