网站建设服务商_凡科商城官网_线上商城_商标免费设计在线生成_微商城
当前位置:建站首页 > 新闻资讯 > 网站优化 >

小程序点餐系统_jQuery动态追加页面数据以及工作

发表日期:2021-01-12 11:32文章编辑:jianzhan浏览次数: 标签:    

jQuery动态追加页面数据以及事件委托详解       这篇文章主要为大家详细介绍了jQuery动态追加页面数据以及事件委托的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

首先效果图如下:

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完。
首先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 
 " More Photos /a /div 
 /div 

然后在同一根目录下写几个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片段后,利用jQuery进行动态追加数据。

首先引入一个jquery库

 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 ++;
 //
 当当前页面的总数小于总数时,进行链接更新。
 if(pageNum 10){
 $');
 //当将所有片段追加完成后,移除链接。
 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/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, htt凡科抠图.

在IE10的环境下进行测试的,没问题。

解决办法就是装一个web服务器,然后将文件拷到项目中,以web服务器中的路径访问,就没有问题啦!

由于还有鼠标悬浮事件,当我们将鼠标悬浮在某个图片上时,就会出现文字,移出时,图片上的文字消失。

$(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 '的元素。

所以在最后追加的页面中,由于都属于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 'photo' 元素只要呈现在页面上,就可以应用mouseenter 和mouseleave行为。

上面就是关于利用jQuery动态追加页面数据以及事件委托的全部知识。下面附上源代码;

 !DOCTYPE html 
 html 
 head 
 meta charset = "utf-8" / 
 title 动态加载 /title 
 script type="text/javascript" src = "jquery/1.9.0/jquery.js" /script 
 style type="text/css" 
 margin: 0px;
 padding: 0px;

$(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 = "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 " More Photos /a /div /div /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关新闻