這篇文章主要介紹了使用jQuery中l(wèi)oad方法加載外部HTML文件的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、納溪ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的納溪網(wǎng)站制作公司

 jQuery是JavaScript的一個(gè)庫(kù)，jQuery中的load方法可以用來加載外部HTML文件。

首先我們來看一下load是什么？

load可以在讀取另一個(gè)HTML上寫的內(nèi)容時(shí)使用。

例如，當(dāng)有的菜單欄是共用的時(shí)候，在每個(gè)頁(yè)面上都來寫一個(gè)菜單欄就會(huì)很麻煩，這時(shí)就可以利用jQuery的load方法來讀取其他頁(yè)面上菜單欄的HTML文件，這樣實(shí)現(xiàn)的代碼就不會(huì)很冗余。

接著我們來看如何使用load方法加載外部HTML文件？

假設(shè)你有一個(gè)標(biāo)題寫在了header.html文件中，如果你將“sample.html”作為外部文件讀取，則需要以下腳本。

$(function(){
  $("#cover").load("header.html");
});

另外，上面的html被加載到“sample.html”中設(shè)置的“id”位置。請(qǐng)注意，“header.html”和“sample.html”目前是不同的文件。

在“sample.html”中，即使指定了“header.html”，jQuery也可能無效。

因此，關(guān)于“Hader.html”的描述不是“sample.html”，而是直接在“Hample.html”中直接進(jìn)行。

我們來看具體的示例

代碼如下

HTML

HTML

header.html的標(biāo)題

JavaScript

$(function(){
  $("#cover").load("header.html");
});

運(yùn)行效果如下

“header.html”的內(nèi)容可以反映在“sample.html”中。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享使用jQuery中l(wèi)oad方法加載外部HTML文件的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!