溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“jQuery怎么動態追加頁面數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
我們要執行的任務是頁面起初有一部分圖片，我們在底下有一個More Photos的鏈接，點擊后，向當前頁面后加載一部分圖片，再點擊該鏈接，繼續加載，直到將我們列出的頁面加載完成，此時該鏈接也消失了。
首先效果圖如下：
這個只截取了最底下的一部分頁面。在鼠標懸停在圖片上時，還會有文字出現，鼠標移出時文字消失。
我們現在要做的就是點擊底下的MorePhotos鏈接時，再加載一部分數據，然后再點擊在加載一部分數據，直到數據加載完。
首先body中代碼如下：
<div id = "container"> <h2> Photo Gallery</h2> <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進行動態追加數據。
首先引入一個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
當當前頁面的總數小于總數時，進行鏈接更新。
if(pageNum < 10){
$link.attr('href', './'+pageNum+'.html');
}
//當將所有片段追加完成后，移除鏈接。
else{
$link.remove();
}
}
})
});以上的代碼就可以進行動態的向頁面追加數據了。
但是在谷歌的瀏覽器中會出現以下的錯誤：
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的環境下進行測試的，沒問題。
解決辦法就是裝一個web服務器，然后將文件拷到項目中，以web服務器中的路徑訪問，就沒有問題啦！形如http://localhost:8080/ajax/ajaxLoad.html
由于還有鼠標懸浮事件，當我們將鼠標懸浮在某個圖片上時，就會出現文字，移出時，圖片上的文字消失。
$(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');
}
})
});當我們使用上面的兩種代碼為每個圖片添加鼠標懸浮事件時，只有最初頁面上的那些圖片才會被綁定事件，而經過動態加載的圖片上卻沒能綁定上事件。因為事件處理程序只會添加到調用方法時已經存在的元素上，像通過這種動態追加的元素，不會綁定那些事件。
所以有兩種解決方案：
1. 在動態加載后重新綁定事件處理程序
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'作為第二個參數的情況下，.on()方法會把 this映射到 gallery中與該選擇符匹配的元素。換句話說，就是this指向gallery中的 div class= ‘photo'的元素。
所以在最后追加的頁面中，由于都屬于gallery 下的元素，所以每一個圖片都會加上相應的事件。
或許在你不知道要添加的頁面屬于哪個父級元素的話，可以將$(‘#gallery').on( )中的'#gallery'替換成document。這樣就不必擔心選錯容器。因為document是頁面中所有元素的祖先。
但使用document有弊端：
當DOM嵌套結構很深，事件冒泡通過大量的祖先元素會有較大的性能損失。
但是還會有其他的原因讓我們選擇document作為委托作用域。
一般來說，只有當相應的DOM元素加載完畢，才會給它綁定事件處理程序。這就是為什么我們要把代碼放到$(document).ready(function(){}內部的原因。可是document元素是隨著頁面加載幾乎就立即可以調用的。把處理程序綁定到document不用等到完整的DOM構建結束。如上面的代碼可以寫為：‘
(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'>元素只要呈現在頁面上，就可以應用mouseenter 和mouseleave行為。
上面就是關于利用jQuery動態追加頁面數據以及事件委托的全部知識。下面附上源代碼；
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>動態加載</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%;
}
h2{
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">
<h2> Photo Gallery</h2>
<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>“jQuery怎么動態追加頁面數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
