jQuery怎么动态追加页面数据

2024-04-02 19:04:59 369人浏览薄情痞子

摘要

本篇内容介绍了“Jquery怎么动态追加页面数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们要执行的

本篇内容介绍了“Jquery怎么动态追加页面数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

首先效果图如下：

jQuery怎么动态追加页面数据

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。
我们现在要做的就是点击底下的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 &gt;&gt;</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;
    
  }
  #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%;


  }
  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 &gt;&gt;</a></div> 
</div>
</body>
</html>

“jQuery怎么动态追加页面数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery怎么动态追加页面数据

本文链接: https://www.lsjlt.com/news/77680.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jQuery怎么动态追加页面数据

本篇内容介绍了“jQuery怎么动态追加页面数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们要执行的...

99+

2024-04-02
使用jQuery怎么实时保存页面动态添加的数据

使用jQuery怎么实时保存页面动态添加的数据，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。实际情况：用户填写的表单，是通过 JavaScri...

99+

2024-04-02
jQuery如何为DOM动态追加事件

这篇文章将为大家详细讲解有关jQuery如何为DOM动态追加事件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。处理一个列表绑定，因为是一个展示项目，没有使用复杂的插件，直...

99+

2024-04-02
js/jquery如何控制页面动态加载数据和滑动滚动条自动加载事件

这篇文章主要介绍了js/jquery如何控制页面动态加载数据和滑动滚动条自动加载事件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。页面滚动动...

99+

2024-04-02
jQuery如何编辑实现动态加载页面

这篇文章主要介绍jQuery如何编辑实现动态加载页面，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！编辑实现动态加载页面function editFun(){ var&nbs...

99+

2024-04-02
jquery怎么爬取页面数据

本篇内容主要讲解“jquery怎么爬取页面数据”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery怎么爬取页面数据”吧! 　　搭建环境：　　（1）、...

99+

2024-04-02
jQuery中怎么实现动态添加表格数据

本篇文章给大家分享的是有关jQuery中怎么实现动态添加表格数据，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。关键代码(一)创建克隆单元格对象...

99+

2024-04-02
JQuery页面随滚动条动态加载效果的示例分析

这篇文章给大家分享的是有关JQuery页面随滚动条动态加载效果的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Google阅读器上有一个AJAX scollLoad效果很...

99+

2024-04-02
怎么在页面加载时启动Bootstrap模态

本篇内容主要讲解“怎么在页面加载时启动Bootstrap模态”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么在页面加载时启动Bootstrap模态”吧! 答...

99+

2024-04-02
jquery中怎么追加子元素

本文小编为大家详细介绍“jquery中怎么追加子元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery中怎么追加子元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 ...

99+

2024-04-02
jquery中怎么动态增加表格

这期内容当中小编将会给大家带来有关jquery中怎么动态增加表格，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。第一种，在表格上面有个删除按钮，删除下面复选框的选中的值。j...

99+

2024-04-02
ajax怎么动态加载json数据

这篇文章将为大家详细讲解有关ajax怎么动态加载json数据，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。jsp代码<form > 姓...

99+

2023-06-08
jQuery如何动态控制页面字体大小

小编给大家分享一下jQuery如何动态控制页面字体大小，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！动态控制页面字体大小用户可以改变页面字体大小$(document).ready(func...

99+

2024-04-02
Ajax中怎么动态加载数据库

这期内容当中小编将会给大家带来有关Ajax中怎么动态加载数据库，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。代码如下:<!DOCTYPE html PUBLIC &...

99+

2024-04-02
python追加写入数据怎么实现

在Python中，可以使用open()函数以追加模式打开文件，并使用write()函数写入数据。下面是一个示例代码： # 以追加模式...

99+

2024-02-29

python
使用Ajax请求动态填充页面数据

这期内容当中小编将会给大家带来有关使用Ajax请求动态填充页面数据，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。实现功能：点击页面上的按钮实现动态追加数据实现原理：点击页面按钮，通过Ajax提交请求到后台...

99+

2023-06-08
vue怎么实时往数组里追加数据

本篇内容介绍了“vue怎么实时往数组里追加数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！实时往数组里追加数据使用Vue.set()以下来...

99+

2023-06-30
怎样进行jQuery动态加载JS

怎样进行jQuery动态加载JS，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。如果您要创建一个web2.0的应用程序，那么你的网页会包括大...

99+

2024-04-02
jquery怎么访问servlet并返回数据到页面

本篇内容主要讲解“jquery怎么访问servlet并返回数据到页面”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery怎么访问servlet并返回数据到...

99+

2024-04-02
JS中如何使用localStorage防止页面动态添加数据刷新后数据丢失

这篇文章主要为大家展示了“JS中如何使用localStorage防止页面动态添加数据刷新后数据丢失”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS中如何使用l...

99+

2024-04-02