我們要執(zhí)行的任務是頁面起初有一部分圖片，我們在底下有一個More Photos的鏈接，點擊后，向當前頁面后加載一部分圖片，再點擊該鏈接，繼續(xù)加載，直到將我們列出的頁面加載完成，此時該鏈接也消失了。
首先效果圖如下：
這個只截取了最底下的一部分頁面。在鼠標懸停在圖片上時，還會有文字出現(xiàn)，鼠標移出時文字消失。
我們現(xiàn)在要做的就是點擊底下的MorePhotos鏈接時，再加載一部分數(shù)據(jù)，然后再點擊在加載一部分數(shù)據(jù)，直到數(shù)據(jù)加載完。
首先body中代碼如下：
<div id = "container"><h1> Photo Gallery</h1><div id = "gallery"> <div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div>//若干圖片</div> <div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div> </div>
然后在同一根目錄下寫幾個HTML代碼片段，用于加載。
如，我這有一個1.html代碼如下
<div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/4.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/5.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/6.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div>
在這個HTML片段中我引入了6個圖片。其他的片段如2.html等等都可以仿照上面的這個來寫。在定義好了許多個HTML片段后，利用jQuery進行動態(tài)追加數(shù)據(jù)。
首先引入一個jquery庫 http://libs.baidu.com/jquery/1.9.0/jquery.js
<script> $(document).ready(function(){ //首先定義一個變量來記錄當前是多少頁 var pageNum = 1; //給鏈接添加點擊事件 $("#more-photos").click(function(event){ event.preventDefault(); var $link = $(this); //獲得當前所點鏈接的url var url = $link.attr('href'); //如果該鏈接的url存在，進行頁面追加 if(url){ $.get(url, function(data){ $("#gallery").append(data); }); pageNum ++; //總共有十個片段要追加，名稱分別為1.html,2.html ...10.html 當當前頁面的總數(shù)小于總數(shù)時，進行鏈接更新。 if(pageNum < 10){ $link.attr('href', './'+pageNum+'.html'); } //當將所有片段追加完成后，移除鏈接。 else{ $link.remove(); } } }) });以上的代碼就可以進行動態(tài)的向頁面追加數(shù)據(jù)了。
但是在谷歌的瀏覽器中會出現(xiàn)以下的錯誤：
jquery.js:8475 XMLHttpRequest cannot load file:///C:/Users/%E9%95%BF%E5%AD%99%E4%B8%B9%E5%87%A4/Desktop/webtest/1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
在IE10的環(huán)境下進行測試的，沒問題。
解決辦法就是裝一個web服務器，然后將文件拷到項目中，以web服務器中的路徑訪問，就沒有問題啦！形如http://localhost:8080/ajax/ajaxLoad.html
由于還有鼠標懸浮事件，當我們將鼠標懸浮在某個圖片上時，就會出現(xiàn)文字，移出時，圖片上的文字消失。
$(document).ready(function(){ $('div .photo').hover(function(){ $(this).find('.details').fadeTo('slow', 0.7); },function(){ $(this).find('.details').fadeOut('slow'); }) });或者可以將上面的代碼組合起來減少冗余代碼：
$(document).ready(function(){ $('div.photo').on('mouseenter mouseleave', function(event){ var $details = $(this).find('.details'); if(event.type == 'mouseenter'){ $details.fadeTo('slow', 0.7); //0.7代表的是透明度 } else{ $details.fadeOut('slow'); } })});當我們使用上面的兩種代碼為每個圖片添加鼠標懸浮事件時，只有最初頁面上的那些圖片才會被綁定事件，而經(jīng)過動態(tài)加載的圖片上卻沒能綁定上事件。因為事件處理程序只會添加到調(diào)用方法時已經(jīng)存在的元素上，像通過這種動態(tài)追加的元素，不會綁定那些事件。
所以有兩種解決方案：
1. 在動態(tài)加載后重新綁定事件處理程序
2. 一開始就把事件綁定在存在的元素上，依賴于事件冒泡。
接下來就是使用jquery的委托方法;
$(document).ready(function(){ $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){ var $details = $(this).find('.details'); if(event.type == 'mouseenter'){ $details.fadeTo('slow', 0.7); } else{ $details.fadeOut('slow'); } }) })$(‘#gallery').on(‘mouseenter mouseleave', ‘div.photo', function(event)中，在將'div.photo'作為第二個參數(shù)的情況下，.on()方法會把 this映射到 gallery中與該選擇符匹配的元素。換句話說，就是this指向gallery中的 div class= ‘photo'的元素。
所以在最后追加的頁面中，由于都屬于gallery 下的元素，所以每一個圖片都會加上相應的事件。
或許在你不知道要添加的頁面屬于哪個父級元素的話，可以將$(‘#gallery').on( )中的'#gallery'替換成document。這樣就不必擔心選錯容器。因為document是頁面中所有元素的祖先。
但使用document有弊端：
當DOM嵌套結(jié)構(gòu)很深，事件冒泡通過大量的祖先元素會有較大的性能損失。
但是還會有其他的原因讓我們選擇document作為委托作用域。
一般來說，只有當相應的DOM元素加載完畢，才會給它綁定事件處理程序。這就是為什么我們要把代碼放到$(document).ready(function(){}內(nèi)部的原因。可是document元素是隨著頁面加載幾乎就立即可以調(diào)用的。把處理程序綁定到document不用等到完整的DOM構(gòu)建結(jié)束。如上面的代碼可以寫為：‘
(function($){ $(document).on('mouseenter mouseleave', 'div.photo', function(event){ var $details = $(this).find('.details'); if(event.type == 'mouseenter'){ $details.fadeTo('slow', 0.7); } else{ $details.fadeOut('slow'); } }) })(jQuery);因為沒有等到整個文檔就緒，所以可以確保所有<div class= 'photo'>元素只要呈現(xiàn)在頁面上，就可以應用mouseenter 和mouseleave行為。
上面就是關(guān)于利用jQuery動態(tài)追加頁面數(shù)據(jù)以及事件委托的全部知識。下面附上源代碼；
<!DOCTYPE html><html><head><meta charset = "utf-8" /> <title>動態(tài)加載</title> <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ position: relative; width: 1300px; margin: 0 auto; /*background-color: #ccc; height: auto;*/ } #gallery{ position: relative; width: 1300px; margin: 0 auto; } .details{ display: none; } .photo{ padding: 20px; border-radius: 5px; border:1px solid #ccc; box-shadow: 0 0 5px #ccc; float: left; margin: 8px; } .photo img{ /*z-index: 1;*/ width: 200px; height: 300px; clear: both; } .photo .details{ position: absolute; z-index: 2; padding-left: 20px; margin-top:-200px; /*clear: both;*/ overflow: hidden; } .description{ overflow: hidden; width: 200px; color: lightgreen; font-size: 18px; font-weight: bold; } .date{ font-size:16px; margin: 20px 0px; color: red; } .photographer{ font-size:14px; font-family: "Arial" ; } .link a{ clear: both; text-decoration: none; padding-left: 90%; } h1{ text-align: center; } </style> <script> $(document).ready(function(){ var pageNum = 1; $("#more-photos").click(function(event){ event.preventDefault(); var $link = $(this); var url = $link.attr('href'); console.log(url); if(url){ $.get(url, function(data){ $("#gallery").append(data); }); pageNum ++; if(pageNum < 4){ $link.attr('href', './'+pageNum+'.html'); } else{ $link.remove(); } } }) }) // $(document).ready(function(){ // $('div .photo').hover(function(){ // $(this).find('.details').fadeTo('slow', 0.7); // },function(){ // $(this).find('.details').fadeOut('slow'); // }) // }) $(document).ready(function(){ $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){ var $details = $(this).find('.details'); if(event.type == 'mouseenter'){ $details.fadeTo('slow', 0.7); } else{ $details.fadeOut('slow'); } }) }) </script></head><body><div id = "container"><h1> Photo Gallery</h1><div id = "gallery"> <div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/4.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye .....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/5.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/6.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ...</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/7.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/8.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye..... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/9.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ...... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/10.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/11.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/12.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/13.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/14.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/15.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div></div> <div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div> </div></body></html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
