使用jQuery中l(wèi)oad方法加載外部HTML文件的方法

發(fā)布時(shí)間：2020-08-29 10:51:24 來(lái)源：億速云閱讀：737 作者：小新欄目：web開(kāi)發(fā)

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

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

首先我們來(lái)看一下load是什么？

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

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

接著我們來(lái)看如何使用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也可能無(wú)效。

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

我們來(lái)看具體的示例

代碼如下

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js">
      
    </script>
    <script src="sample.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <div id="cover">
      <div id="section1"></div>
      <div id="section2"></div>
    </div>
  </body>
</html>

HTML

<h2>header.html的標(biāo)題</h2>

JavaScript

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

運(yùn)行效果如下

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

使用jQuery中l(wèi)oad方法加載外部HTML文件的方法

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

向AI問(wèn)一下細(xì)節(jié)

使用jQuery中l(wèi)oad方法加載外部HTML文件的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽