jQuery动态追加页面数据以及事件委托详解

时间：2019-01-07分类：jQuery作者：编程之家

我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。

首先效果图如下：

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。我们现在要做的就是点击底下的MorePhotos链接时，再加载一部分数据，然后再点击在加载一部分数据，直到数据加载完。首先body中代码如下：

rush:xhtml;">

Photo gallery

<div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye ....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

<div class = "photo"&gt;
<img src = "./images/3.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye.... </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

//若干图片

<div class = "link"><a id = "more-photos" href = "1.html"> More Photos >>

然后在同一根目录下写几个HTML代码片段，用于加载。

如，我这有一个1.HTML代码如下

rush:xhtml;">

gall

<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye

<div class = "date">12/24/2000
<div class = "photographer"> Alasdair Dougall

<div class = "photo"&gt;
<img src = "./images/3.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/4.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/5.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/6.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

在这个HTML片段中我引入了6个图片。其他的片段如2.html等等都可以仿照上面的这个来写。在定义好了许多个HTML片段后，利用jQuery进行动态追加数据。

首先引入一个jquery库 http://libs.baidu.com/jquery/1.9.0/jquery.js

rush:js;">

Photo gallery

<div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

<div class = "photo"&gt;
<img src = "./images/4.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye .....</div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/5.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye ....</div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/6.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye ...</div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/7.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye.... </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/8.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye..... </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/9.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye ...... </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/10.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/11.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/12.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/13.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/14.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "photo"&gt;
<img src = "./images/15.jpg"&gt;
<div class = "details"&gt;
  <div class = "description"&gt;The Cullin Mountains,Isle of skye </div>
  <div class = "date"&gt;12/24/2000</div>
  <div class = "photographer"&gt; Alasdair Dou<a href="https://www.jb51.cc/tag/gal/" target="_blank" class="keywords">gal</a>l</div>
</div>

<div class = "link"><a id = "more-photos" href = "1.html"> More Photos >>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

jQuery事件委托 jQuery动态追加页面数据 jQuery追加页面数据