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

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

首先效果图如下：

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

 Photo Gallery


  
    
    
      The Cullin Mountains, Isle of skye ....
      12/24/2000
Alasdair Dougall
    
  

  
    
    
      The Cullin Mountains, Isle of skye.... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye.... 
      12/24/2000
Alasdair Dougall
    
  
//若干图片



  More Photos >> 

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

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

    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

  
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

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

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

  
  *{
    margin: 0px;
    padding: 0px;
  }


  #container{
    position: relative;
    width: 1300px;
    margin: 0 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{

    
    width: 200px;
    height: 300px;
    clear: both;
  }

  .photo .details{
    position: absolute;
    z-index: 2;
    padding-left: 20px;
    margin-top:-200px;
    
    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; 
  }
  

  



 Photo Gallery


  
    
    
      The Cullin Mountains, Isle of skye ....
      12/24/2000
Alasdair Dougall
    
  

  
    
    
      The Cullin Mountains, Isle of skye.... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye.... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye .....
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye ....
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye ...
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye.... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye..... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye ...... 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  


    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  

    
    
    
      The Cullin Mountains, Isle of skye 
      12/24/2000
Alasdair Dougall
    
  



  More Photos >> 

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