jquery提取頁面公共內容（如header，footer等）引入其他頁面【$('為引入內容建立的div的id名').load('引入的頁面l')】
阿新 • • 發佈：2018-12-21
在做專案時，通常頁面header部分是相同的，但如果複製貼上，程式碼量很大而且很冗餘，因此可以像vue一樣可以將頁面拆分成不同的元件，而header就是一個元件，可以單獨提取出來，最後再把不同元件合併呈現不同的頁面；
具體怎麼把頁面的一部分提取出來然後引入到需要的頁面，只需要使用jquery的load即可，先來看一下load是什麼，怎麼用
這是jquery文件的截圖，有時學到新的知識看視訊瞭解可能理解更好，但時間長，這時看看官方文件jquery API中文文件就是不錯的選擇，可以快速瞭解這個屬性和用法，移動端的w3c就非常好用，現在每天早上讓自己看半個小時文件，當做前端早讀課啦~
以例子來演示：
剛開始想header.html到底光寫body裡面的元素，從class為header開始寫還是先搭建html結構，後來想既然是html檔案，不搭建html基本結構怎麼知道是html檔案，而且css也沒有辦法引入，總不能直接<style></style>或者<link>也得瀏覽器知道寫的是什麼
<!--header.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>header</title> <link rel="stylesheet" href="reset.css"> <style type="text/css"> #header{ height: 45px; line-height: 45px; background: #000; color: #fff; padding: 0 70px; } #header .logo{ float: left; background: url(monkey.jpg) no-repeat left center; background-size: 30px 30px; padding-left: 35px; } #header .headnav{ float: right; } #header .headnav ul li{ float: left; width: 80px; margin-left: 10px; } #header .headnav ul li a{ text-decoration: none; color: #fff; } </style> </head> <body> <div id="header"> <div class="logo">悟空音樂</div> <div class="headnav"> <ul> <li><a href="header.html">nav one</a></li> <li><a href="javascript:;">nav two</a></li> <li><a href="javascript:;">nav three</a></li> <li><a href="javascript:;">nav four</a></li> <li><a href="javascript:;">nav five</a></li> </ul> </div> </div> </body> </html>
看一下這個頁面的效果
接下來就是如何吧這個header.html檔案引入到index.html中，注意因為用到jquery所以必須先引入jquery的依賴
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index引入head公共樣式</title> </head> <body> <div class="header"></div> <h1 class="container">因為我是大眾臉所以頭部可以刷臉，哪個頁面都可以顯示</h1> <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { $('.header').load('header.html') }) </script> </body> </html>
再來看一下結果吧！
