首页登陆欢迎您!
首页登陆 > 运维知识 > jQuery动态追加页面数据以至事件委托精解_jquery_脚本之家

jQuery动态追加页面数据以至事件委托精解_jquery_脚本之家

时间:2019-12-17

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

从本节开始,我们探讨如何使用VUE和WebPack开发一款类似于植物大战僵尸的前端游戏,当游戏完成后,情况如下:

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

图片 1

 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代码如下

游戏的设定如下,一系列外星飞船从天而降入侵地球,为了保护地球,玩家需要使用各种道具防止外星飞船落入底部的地球。如图所示,这些道具可以是箱子,也可以是卫星。当外星飞船被成功阻挡时,界面会弹出一系列奖章,也就是图片里面的"E",点击这些奖章后,玩家可以获得积分,一旦积分达到要求,玩家就可以选择炮台,也就是图片中红色的物体,炮台可以发射子弹,一旦子弹打中外星飞船,飞船就会从界面上消失,游戏的玩法其实和植物大战僵尸是如出一辙。本节,我们先完成代码基本架构的设计。

   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  

先在本地目录新建一个VUE工程,在工程目录下打开index.html做如下修改:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="./static/tweenjs-0.5.1.min.js"></script>
    <script type="text/javascript" src="./static/easeljs-0.7.1.min.js"></script>
    <script type="text/javascript" src="./static/movieclip-0.7.1.min.js"></script>
    <script type="text/javascript" src="./static/assets.js"></script>
    <script type="text/javascript">
      window.createjs = createjs
      window.assetsLib = lib
    </script>
    <title>Space Defender</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

首先引入一个jquery库

在代码中,我们先把需要使用的若干类库给加载进来,在本项目中,我们新增了两个类库,一个是movieclip-0.7.1.min.js,另一个是assets.js,后者是一个资源类库,我们游戏所有的图片资源都压缩在这个类库里,后面我们会详细解读它的作用。

 $.ready{ //&#39318;&#20808;&#23450;&#20041;&#19968;&#20010;&#21464;&#37327;&#26469;&#35760;&#24405;&#24403;&#21069;&#26159;&#22810;&#23569;&#39029; var pageNum = 1; //&#32473;&#38142;&#25509;&#28155;&#21152;&#28857;&#20987;&#20107;&#20214; $.click{ event.preventDefault(); var $link = $; //&#33719;&#24471;&#24403;&#21069;&#25152;&#28857;&#38142;&#25509;&#30340;url var url = $link.attr; //&#22914;&#26524;&#35813;&#38142;&#25509;&#30340;url&#23384;&#22312;&#65292;&#36827;&#34892;&#39029;&#38754;&#36861;&#21152; if{ $.get{ $.append; pageNum ++; //&#24635;&#20849;&#26377;&#21313;&#20010;&#29255;&#27573;&#35201;&#36861;&#21152;&#65292;&#21517;&#31216;&#20998;&#21035;&#20026;1.html,2.html ...10.html &#24403;&#24403;&#21069;&#39029;&#38754;&#30340;&#24635;&#25968;&#23567;&#20110;&#24635;&#25968;&#26102;&#65292;&#36827;&#34892;&#38142;&#25509;&#26356;&#26032;&#12290; if{ $link.attr('href', './'+pageNum+'.html'); } //&#24403;&#23558;&#25152;&#26377;&#29255;&#27573;&#36861;&#21152;&#23436;&#25104;&#21518;&#65292;&#31227;&#38500;&#38142;&#25509;&#12290; else{ $link.remove;&lt;/pre&gt;&lt;p&gt;&#20197;&#19978;&#30340;&#20195;&#30721;&#23601;&#21487;&#20197;&#36827;&#34892;&#21160;&#24577;&#30340;&#21521;&#39029;&#38754;&#36861;&#21152;&#25968;&#25454;&#20102;&#12290;&lt;/p&gt;&lt;p&gt;&#20294;&#26159;&#22312;&#35895;&#27468;&#30340;&#27983;&#35272;&#22120;&#20013;&#20250;&#20986;&#29616;&#20197;&#19979;&#30340;&#38169;&#35823;&#65306;&lt;/p&gt;&lt;p&gt;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.&lt;/p&gt;&lt;p&gt;&#22312;IE10&#30340;&#29615;&#22659;&#19979;&#36827;&#34892;&#27979;&#35797;&#30340;&#65292;&#27809;&#38382;&#39064;&#12290; &lt;/p&gt;&lt;p&gt;&lt;strong&gt;&#35299;&#20915;&#21150;&#27861;&lt;/strong&gt;&#23601;&#26159;&#35013;&#19968;&#20010;web&#26381;&#21153;&#22120;&#65292;&#28982;&#21518;&#23558;&#25991;&#20214;&#25335;&#21040;&#39033;&#30446;&#20013;&#65292;&#20197;web&#26381;&#21153;&#22120;&#20013;&#30340;&#36335;&#24452;&#35775;&#38382;&#65292;&#23601;&#27809;&#26377;&#38382;&#39064;&#21862;&#65281;&#24418;&#22914;http://localhost:8080/ajax/ajaxLoad.html&lt;/p&gt;&lt;p&gt;&#30001;&#20110;&#36824;&#26377;&#40736;&#26631;&#24748;&#28014;&#20107;&#20214;&#65292;&#24403;&#25105;&#20204;&#23558;&#40736;&#26631;&#24748;&#28014;&#22312;&#26576;&#20010;&#22270;&#29255;&#19978;&#26102;&#65292;&#23601;&#20250;&#20986;&#29616;&#25991;&#23383;&#65292;&#31227;&#20986;&#26102;&#65292;&#22270;&#29255;&#19978;&#30340;&#25991;&#23383;&#28040;&#22833;&#12290;&lt;/p&gt;&lt;pre &gt;$.ready{ $.hover.find.fadeTo; },function.find.fadeOut;&lt;/pre&gt;&lt;p&gt;&#25110;&#32773;&#21487;&#20197;&#23558;&#19978;&#38754;&#30340;&#20195;&#30721;&#32452;&#21512;&#36215;&#26469;&#20943;&#23569;&#20887;&#20313;&#20195;&#30721;&#65306;&lt;/p&gt;&lt;pre &gt;$.ready{ $.on('mouseenter mouseleave', function{ var $details = $.find; if(event.type == 'mouseenter'){ $details.fadeTo; //0.7&#20195;&#34920;&#30340;&#26159;&#36879;&#26126;&#24230; } else{ $details.fadeOut;&lt;/pre&gt;&lt;p&gt;&#24403;&#25105;&#20204;&#20351;&#29992;&#19978;&#38754;&#30340;&#20004;&#31181;&#20195;&#30721;&#20026;&#27599;&#20010;&#22270;&#29255;&#28155;&#21152;&#40736;&#26631;&#24748;&#28014;&#20107;&#20214;&#26102;&#65292;&#21482;&#26377;&#26368;&#21021;&#39029;&#38754;&#19978;&#30340;&#37027;&#20123;&#22270;&#29255;&#25165;&#20250;&#34987;&#32465;&#23450;&#20107;&#20214;&#65292;&#32780;&#32463;&#36807;&#21160;&#24577;&#21152;&#36733;&#30340;&#22270;&#29255;&#19978;&#21364;&#27809;&#33021;&#32465;&#23450;&#19978;&#20107;&#20214;&#12290;&#22240;&#20026;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#21482;&#20250;&#28155;&#21152;&#21040;&#35843;&#29992;&#26041;&#27861;&#26102;&#24050;&#32463;&#23384;&#22312;&#30340;&#20803;&#32032;&#19978;&#65292;&#20687;&#36890;&#36807;&#36825;&#31181;&#21160;&#24577;&#36861;&#21152;&#30340;&#20803;&#32032;&#65292;&#19981;&#20250;&#32465;&#23450;&#37027;&#20123;&#20107;&#20214;&#12290; &lt;/p&gt;&lt;p&gt;&#25152;&#20197;&#26377;&#20004;&#31181;&#35299;&#20915;&#26041;&#26696;&#65306; &lt;/p&gt;&lt;p&gt;1. &#22312;&#21160;&#24577;&#21152;&#36733;&#21518;&#37325;&#26032;&#32465;&#23450;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207; 2. &#19968;&#24320;&#22987;&#23601;&#25226;&#20107;&#20214;&#32465;&#23450;&#22312;&#23384;&#22312;&#30340;&#20803;&#32032;&#19978;&#65292;&#20381;&#36182;&#20110;&#20107;&#20214;&#20882;&#27873;&#12290;&lt;/p&gt;&lt;p&gt;&#25509;&#19979;&#26469;&#23601;&#26159;&#20351;&#29992;jquery&#30340;&#22996;&#25176;&#26041;&#27861;;&lt;/p&gt;&lt;pre &gt;$.ready{ $.on('mouseenter mouseleave', 'div.photo', function{ var $details = $.find; if(event.type == 'mouseenter'){ $details.fadeTo; } else{ $details.fadeOut&lt;/pre&gt;&lt;p&gt;$.on(&#8216;mouseenter mouseleave', &#8216;div.photo', function&#20013;&#65292;&#22312;&#23558;'div.photo'&#20316;&#20026;&#31532;&#20108;&#20010;&#21442;&#25968;&#30340;&#24773;&#20917;&#19979;&#65292;.on()&#26041;&#27861;&#20250;&#25226; this&#26144;&#23556;&#21040; gallery&#20013;&#19982;&#35813;&#36873;&#25321;&#31526;&#21305;&#37197;&#30340;&#20803;&#32032;&#12290;&#25442;&#21477;&#35805;&#35828;&#65292;&#23601;&#26159;this&#25351;&#21521;gallery&#20013;&#30340; div class= &#8216;photo'&#30340;&#20803;&#32032;&#12290;&lt;/p&gt;&lt;p&gt;&#25152;&#20197;&#22312;&#26368;&#21518;&#36861;&#21152;&#30340;&#39029;&#38754;&#20013;&#65292;&#30001;&#20110;&#37117;&#23646;&#20110;gallery &#19979;&#30340;&#20803;&#32032;&#65292;&#25152;&#20197;&#27599;&#19968;&#20010;&#22270;&#29255;&#37117;&#20250;&#21152;&#19978;&#30456;&#24212;&#30340;&#20107;&#20214;&#12290; &lt;/p&gt;&lt;p&gt;&#25110;&#35768;&#22312;&#20320;&#19981;&#30693;&#36947;&#35201;&#28155;&#21152;&#30340;&#39029;&#38754;&#23646;&#20110;&#21738;&#20010;&#29238;&#32423;&#20803;&#32032;&#30340;&#35805;&#65292;&#21487;&#20197;&#23558;$&#20013;&#30340;'#gallery'&#26367;&#25442;&#25104;document&#12290;&#36825;&#26679;&#23601;&#19981;&#24517;&#25285;&#24515;&#36873;&#38169;&#23481;&#22120;&#12290;&#22240;&#20026;document&#26159;&#39029;&#38754;&#20013;&#25152;&#26377;&#20803;&#32032;&#30340;&#31062;&#20808;&#12290; &lt;/p&gt;&lt;p&gt;&#20294;&#20351;&#29992;document&#26377;&#24330;&#31471;&#65306; &lt;/p&gt;&lt;p&gt;&#24403;DOM&#23884;&#22871;&#32467;&#26500;&#24456;&#28145;&#65292;&#20107;&#20214;&#20882;&#27873;&#36890;&#36807;&#22823;&#37327;&#30340;&#31062;&#20808;&#20803;&#32032;&#20250;&#26377;&#36739;&#22823;&#30340;&#24615;&#33021;&#25439;&#22833;&#12290; &#20294;&#26159;&#36824;&#20250;&#26377;&#20854;&#20182;&#30340;&#21407;&#22240;&#35753;&#25105;&#20204;&#36873;&#25321;document&#20316;&#20026;&#22996;&#25176;&#20316;&#29992;&#22495;&#12290; &#19968;&#33324;&#26469;&#35828;&#65292;&#21482;&#26377;&#24403;&#30456;&#24212;&#30340;DOM&#20803;&#32032;&#21152;&#36733;&#23436;&#27605;&#65292;&#25165;&#20250;&#32473;&#23427;&#32465;&#23450;&#20107;&#20214;&#22788;&#29702;&#31243;&#24207;&#12290;&#36825;&#23601;&#26159;&#20026;&#20160;&#20040;&#25105;&#20204;&#35201;&#25226;&#20195;&#30721;&#25918;&#21040;$.ready{}&#20869;&#37096;&#30340;&#21407;&#22240;&#12290;&#21487;&#26159;document&#20803;&#32032;&#26159;&#38543;&#30528;&#39029;&#38754;&#21152;&#36733;&#20960;&#20046;&#23601;&#31435;&#21363;&#21487;&#20197;&#35843;&#29992;&#30340;&#12290;&#25226;&#22788;&#29702;&#31243;&#24207;&#32465;&#23450;&#21040;document&#19981;&#29992;&#31561;&#21040;&#23436;&#25972;&#30340;DOM&#26500;&#24314;&#32467;&#26463;&#12290;&#22914;&#19978;&#38754;&#30340;&#20195;&#30721;&#21487;&#20197;&#20889;&#20026;&#65306;&#8216;&lt;/p&gt;&lt;pre &gt;{ $.on('mouseenter mouseleave', 'div.photo', function{ var $details = $.find; if(event.type == 'mouseenter'){ $details.fadeTo; } else{ $details.fadeOut;&lt;/pre&gt;&lt;p&gt;&#22240;&#20026;&#27809;&#26377;&#31561;&#21040;&#25972;&#20010;&#25991;&#26723;&#23601;&#32490;&#65292;&#25152;&#20197;&#21487;&#20197;&#30830;&#20445;&#25152;&#26377;&lt;div class= 'photo'&gt;&#20803;&#32032;&#21482;&#35201;&#21576;&#29616;&#22312;&#39029;&#38754;&#19978;&#65292;&#23601;&#21487;&#20197;&#24212;&#29992;mouseenter &#21644;mouseleave&#34892;&#20026;&#12290;&lt;/p&gt;&lt;p&gt;&#19978;&#38754;&#23601;&#26159;&#20851;&#20110;&#21033;&#29992;jQuery&#21160;&#24577;&#36861;&#21152;&#39029;&#38754;&#25968;&#25454;&#20197;&#21450;&#20107;&#20214;&#22996;&#25176;&#30340;&#20840;&#37096;&#30693;&#35782;&#12290;&#19979;&#38754;&#38468;&#19978;&#28304;&#20195;&#30721;&#65307;&lt;/p&gt;&lt;pre &gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&#21160;&#24577;&#21152;&#36733;&lt;/title&gt; &lt;script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;  *{ 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%; } h1{ text-align: center; }   $.ready{ var pageNum = 1; $.click{ event.preventDefault(); var $link = $; var url = $link.attr; console.log{ $.get{ $.append; pageNum ++; if{ $link.attr('href', './'+pageNum+'.html'); } else{ $link.remove // $.ready{ // $.hover{ // $.find.fadeTo; // },function.find.fadeOut $.ready{ $.on('mouseenter mouseleave', 'div.photo', function{ var $details = $.find; if(event.type == 'mouseenter'){ $details.fadeTo; } else{ $details.fadeOut  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 >> 

接着进入src/目录,在里面修改App.vue:

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

<template>
  <div id="app">
    <game-container></game-container>
  </div>
</template>

<script>
import GameContainer from './components/gamecontainer'
export default {
  name: 'app',
  components: {
    GameContainer
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

它的主要作用是引入GameContainer组件,游戏的启动将由GameContainer组件加载如页面后开始,我们再看看该组件的实现,进入component/目录,在里面新增一个文件名为:gamecomponent.vue,然后添加如下代码:

<template>
  <div>
    <header>
      <div class="row">
        <h1>Space Defender</h1>
      </div>
    </header>
    <div>
      <game-scene></game-scene>
    </div>
  </div>
</template>

<script>
  import GameScene from './GameSceneComponent'
  export default {
    components: {
      GameScene
    }
  }
</script>

<style scoped>
  body, h1, h2, p {
    margin: 0;
    padding: 0;
  }

</style>

它的逻辑简单,主要是在页面显示游戏标题,它最重要的作用是将GameScene引入页面,游戏的所有特效,场景都将由GameScene组件来完成,接着,我们重点查看GameScene的实现,在目录下新建一个文件名为gamescenecomponent.vue,打开后先完成以下代码:

<template>
  <section id="game" class="row">
    <canvas id="canvas" width="640" height="1000">
    </canvas>
    ...
</template>

template部分的代码主要用来设计游戏界面,在上面代码中,我们现在页面加载一个html5的’画布‘组件,也就是canvas,游戏所有的特效显示将依赖canvas组件来完成。继续在template部分添加如下代码:

<template>
  ....
   <div id="hud">
      <div>Lives: </div>
      <div>E: </div>
      <div>Waves: </div>
    </div>
</template>

上面代码的作用是在页面头部显示与游戏相关的数据,上面代码完对应的就是前面游戏界面截图中的头部显示内容:

图片 2

这里写图片描述

在游戏舞台的底部,我们添加按钮,以便玩家在页面上添加各种能消灭或阻止外星飞船入侵地球的障碍物,相关代码如下:

<template>
  ....
  <div class="add-buttons">
      <a class="add-button" title="space Junk" data-type="SpaceJunk">J</a>
      <a class="add-button" title="Satellite" data-type="Satillite">S</a>
      <a class="add-button" title="Satellite+" data-type="Satellite2">S+</a>
      <a class="add-button" title="Castle" data-type="Castle">C</a>
      <a class="add-button" title="Castle+" data-type="Castle2">C+</a>
    </div>
</template>

上面代码完成后,在游戏界面的下方会出现一系列按钮,情形如下:

图片 3

这里写图片描述

接着,我们添加style标签代码,这部分代码其实是一段css,用来对template部分的html代码进行界面美化:

<style scoped>
  #game {
    position: relative;
    width:  640px;
    height: 1000px;
    border: 1px solid black;
  }
  #canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #94A9B0;
  }

  #hud {
    position: absolute;
    width: 100%;
    height: 60px;
    background: rgba(0,0,0,0.5);
    color: white;
  }

  .add-buttons {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .add-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    curosr: pointer;
  }

  .add-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
  }
</style>

现在我们开始集中精力完成程序的主逻辑代码,也就是script标签部分的代码,在文件中先添加如下代码:

上一篇:简要介绍AngularJS中$http服务的用法,简单介绍angularjs 下一篇:没有了