利用Jquery的load函式實現頁面的動態載入
js的強大功能相信大家都知曉,今天通過jquery的庫函式load可以更加方便的實現頁面的動態重新整理,經過幾天的研究與探索,終於有所成效!吾心甚蔚!
一、基本語法為:
$(‘#區域id’).load(‘頁面名稱’);
具體來說,此事件有4個方法,格式分別是:
1、load(url)
2、load(url,[data])
3、load(url,[callback])
4、load(url,[data],[callback])
url (String) : 待裝入 HTML 網頁網址。
data (Map) : (可選) 傳送至伺服器的 key/value 資料。
callback (Callback) : (可選) 載入成功時回撥函式。
二、下面以具體例項來分析其效果:
例項1,用第一個方法載入一個檔案:
$(“#box”).load(“testa.html”); //在id為box的元素里加載testa.html頁面執行後的結構!
例項2,用第二個方法載入一個檔案(需要引數):
$(“#box”).load(“testa.html”,{name:”bingo”,sex:”man”}); //傳2個引數到testa.html頁面,並在id為box的元素里加載testa.html頁面執行後的結構!
例項3,用第三種方法載入一個檔案:
$(“#box”).load(“testa.html”,function(){alert(“OK!”);}); //在id為box的元素里加載testa.html頁面執行後的結構,並在執行完之後觸發後面的function!
三、接下來是一個本人具體的程式碼例項:
1.包含庫函式,類似於C語言檔案包含命令,同css包含
<script src="js/jquery-2.1.4.min.js"></script>
綠色部分為js路徑
2.定義load函式功能:
<script>
$(document).ready(function()
{
$("#button").click(function()
{
$('#home').load("ok.html");
})
})
</script>
功能指的是在id為button的屬性,發生click時,讓id為Home的div載入ok.html這個網頁
3.具體位置程式碼如下:
<a id="button">OK</a>
<div id="home"></div>
其中Home為提前定義好的div
四、其他注意事項:
1.load函式最好在php網頁中應用,也就是說要在php伺服器上執行,本地除錯需要搭建php本地環境,相對麻煩但是可以百度到;
2.在load的url里加上空格後面就可以跟選擇器了。
例如:$(“#box”).load(“testa.html #test”); //載入testa.html檔案中id為”test”的元素內容!
這個世界上沒有知識是學不會的,不是嗎?如果一開始學不會,就可以把問題細化分解,然後學習更基本的知識。最後,所有問題都能變得和1+1=2一樣簡單,我們需要的只是時間。好了,最後給大家推薦一個學習Java的好網站JAVA自學網站–how2j.cn