jquery.more.js的应用-码动未来

1.基本文件的引入。

<script src="local/jquery-2.3.3.min.js"> </script>

<script src='local/jquery.more.js'> </script>

2.Html文档结构

<div id="more">

<div id="vlist" class='p single_item'>

<p class='name'></p>

</div>

<a href="javascript:;" id='more_info'>::点击加载更多内容::</a>

</div>

3.Js写法

<script>

 $(function(){

  $("#more").more({'address':'more.php'});

 })

</script>


原理:在写Html代码时不需要填充数据,数据是文档加载完成后,通过Ajax请求后台,并且后台返回数据。通过Jquery.more.js文件追加到$("#more")的里面,先前写好的模版是隐藏掉的。需要注意的是模版中需要填充数据的标签的Class名要和Ajax返回数据的键值对应相同。

这一块就是Jquery.more.js文件的追加部分。可以看出是通过.key。key对应的就是Class的名字。

 $(data).each(function() {

                    counter++;

                    var s = template;

                    $.each(this, function(key, value) {

                        if (s.find('.' + key))

                            s.find('.' + key).html(value);

                    });


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,610评论 1 45
  • /*! jQuery JavaScript Library v1.4.2 http://jquery.com/ C...
    ssttIsme阅读 1,969评论 2 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,046评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 又一年8月了,还记得年初写下的计划吗?抬头看一眼写在桌上日历首页顶端最简洁的计划:运动,早睡(11:00-11:3...
    时间是那一片海阅读 277评论 0 1