我的前端笔记

最新推荐文章于 2024-01-27 00:14:05 发布
最新推荐文章于 2024-01-27 00:14:05 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44764027/article/details/117558188
版权

Javascript

​ 1 变量

​ 通常用var来声明变量

​ var可以省略 不加var就是一个全局变量 加了var就是一个局部变量

​ 运算符 typeof instanceof

​ 常用内置对象

​ 1 字符串

方法名备注
str.slice(0,4)字符串的截取
str.indexof(‘e’)返回’e’ 在str中的位置
str.trim()去除空格
str.toUpperCase()转换为大写
str.toLowerCase()转换为小写
str.spilt("|")按照|分割

​ 2 js对象

​ var obj ={}

​ delete obj.num; 删除对象obj的num属性

​ 3 数组

​ var arr = [];

arr.push() 在数组末端添加一个元素 会改变原数组

arr.pop() 删除数组的最后一个元素 会改变原数组

arr.join() join方法以参数作为分隔符，将所有数组成员组成一个字符串返回 如果不提供字符串则默认以逗号分隔

arr.shift()删除数组的第一个元素 并返回该元素 该方法会改变原数组

arr.unshift() 同于在数组的第一个位置添加元素并返回添加后新数组的长度

for … in遍历数组

var a = [1 ,2, 3];
for(var i in a ){
	console.log(a[i]);
}

函数

function print(s){
	console.log(s)
}
var print = function(s){
console.log(s)
}
print(s)

Math

Math.abs() //绝对值
Math.min(112,-2,2) //返回最小值
Math.max(112,-2,3)  //返回最大值 
Math.floor(3.2)  //向下取整 3
Math.ceil(3.2)  //向上取整  4
Math。random() 0~1的随机数

JSON格式

​ JSON 格式是一种用于数据交换的文本格式

​ 格式规则如下

  1. ​ 复合类的值可能是数组或对象 ，不能是函数 正则表达式 ，日期对象
  2. ​ 简单类型的值只有四种 字符串 ，数值 布尔值 和 null
  3. ​ 字符串必须是使用双引号表示 不能使用单引号
  4. ​ 对象的键名必须放在双引号里面
  5. ​ 数组或对象后面的最后一个成员的后面不能有逗号
  6. 数值前不能加0
  7. JSON格式描述的文件本身是字符串 并非对象

JSON.stringify() 此方法可以接收一个JavaScript值将转化成JSON字符串，此字符串可以被JSON.parse还原

正则表达式

var telRegex1 = /^1[3|5|7|8]\d{9}$/;
var telRegex2 = new RegExp('^1[3|5|7|8]\\d{9}$') //在字符串中需要转移

元字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeujjUUn-1622784305259)(D:\Program Files\Typora\typora-user-images\元字符)]

修饰符

g 全局匹配

i 忽略大小写

m ^ $ 会匹配行首和行尾 会之别换行 \n

正则对象方法

​ test（）输入一个字符串 返回一个boolean值 表示是否满足条件

​ exec() 返回匹配结果 如果匹配就返回一个数组 成员是每一个匹配成功的子字符串 否则返回null

BOM（浏览器对象模型）

window对象

​ 所有浏览器都支持window对象，他表示浏览器窗口

​ 所有的javascript全局对象，函数以及变量均自动成为window对象的成员

​ 全局变量是window对象的属性

​ 全局函数是window对象的方法

var w =window.innerWidth ||
    document.documentElement.clientWidth||
    document.body.clientWidth;
var h = window.innerHeight||
    document.doucmentElement.clientHeight||
    document.body.clientHeight
	console.log("浏览器的window宽度" + w + "高度" +h);

window.open() ; window .close();

window.moveTo() ; window.resizeTo();

location history.back() ; foraward();

计时事件

​ setInterval() -间隔指定的毫秒数补丁的执行指定的代码

​ clearIntval() 用于停止setIntval()方法执行的函数代码

​ setTimeout() 在指定的毫秒数后执行指定的代码

​ clearTimeout() 方法用于停止setTimeout()方法的函数代码

var time = null;
if(timer) setInterval(function(){
    console.log("hello")
} , 1000)

JQuery

1 Jquery选择器

​ 1 标签选择器

	<p>段落1</p>
 	<p class="cl1">段落2</p>
 	<p class="cl1" id="demo1">段落三</p>
	
	<script>
		var dom= $("p");
		console.log(dom);
		var dom= $(".cl1");
		console.log(dom);
		var dom= $("#demo1");
		console.log(dom);
	</script>

​ 2 属性选择器

<body>
		<p class="intro" text="">这里是段落1</p>
		<p class="intro" text="fullname">这里是段落2</p>
		<p class="intro" text="phone">这里是段落3</p>
	
</body>
	<script>
		var dom1 = $("[text]");
		console.log(dom1);
		var dom2 = $("[text=fullname]");
		console.log(dom2);
		var dom3 =$("p[text!=phone]");
		console.log(dom3);
		var dom4 = $("[text$=one]");
		console.log(dom4);
	</script>

3 层级选择器

<body>	<div class="box">
		<p class="intro" >这里是段落1</p>
		<div class="inter">
		<p class="intro" >这里是段落2</p>
		<p class="intro" >这里是段落3</p>
	</div>
	</div>
</body>
	<script>
		var dom1 = $(".box > p");
		console.log(dom1);
		var dom2 = $(".box p");
		console.log(dom2);
	</script>

4 基本筛选选择器

<body>	<div class="box">
		<p class="cl1" >这里是段落1</p>
		<div class="inter">
		<p class="cl2" >这里是段落2</p>
		<p class="cl1" >这里是段落3</p>
	</div>
	</div>
</body>
	<script>
		var dom1 = $("p:first");
		console.log(dom1);
		var dom2 = $("p:last");
		console.log(dom2);
		//not
		var dom3 = $("p:not('.cl2')");
		console.log(dom3)
		//索引从0开始
		var dom4 =$("p:eq(0)");
		console.log(dom4);
		var dom5 = $("p:even")
		//偶数  0 2 4 ...
		console.log(dom5);
		//奇数 1 3 5...
		var dom6 =$("p:odd");
		console.log(dom6);
	</script>

2jQuery属性和样式

1 对于html我们自己定义的**DOM属性，**在处理时我们建以使用attr方法

​ 1.attr()

​ 2removeAttr()

<body>
		<p id="demo" name ="epoint">这里是段落1</p>
</body>
	<script>
		var value = $("#demo").attr("name");
		console.log(value);
		//给属性重新命名
		var value1 =$("#demo").attr("name" ,"新点");
		//通过函数返回值给属性重新命名
		var value2 = $("#demo").attr("name" ,function(){
			var x = "dkb"
			return x;
		})
		//添加属性
		$("#demo").attr({
			name :"dai" ,
			key :"1",
			type: "4"
		})
		//移除属性
		$("#demo").removeAttr("key type name");
	</script>

2prop() 与 removeProp()

​ 在html本身就带有的固有属性 ，在处理时，使用prop方法

<body>
		<label>
			<input type="radio" name ="gender" id="male">
			<span>男</span>
			<input type="radio" name ="gender" id="female">
			<span>女</span>
		</label>
</body>
	<script>
		//操作固有属性
		var value = $("input").prop("name");
		console.log(value);
		$("input").prop("name" ,"xingming");
		//$("input").removeAttr("name");
		//checked  固有属性
		//$("#male").prop("checked" ,true);
		$("#female").prop("checked" ,true);
	</script>

3html()

​ html() 方法获取集合中第一个匹配的元素的html内容或设置每一个匹配元素的html内容，具体有三种方法

<body>
		<p id="demo"></p>
</body>
	<script>
		var html =$("#demo");
		console.log(html);
		$("#demo").html("<span style='color :red'>测试内容</span>")

		var html = $("#demo").html();
		console.log(html);
		$("#demo").html(function(i,e){
			var newHtml= e+"<span style='color :blue'>新增测试内容</span>"
			return newHtml;
		})
	</script>

.text()

​ 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容，具体有三种用法

<body>
		<p id="demo">
			<span style="color: red">hello</span>
			测试文字
		</p>
</body>
	<script>
		var text = $("#demo").text();
		console.log(text);  //输出hello  测试文本
		$("#demo").text("新的测试文字")
		$("#demo").text(function(index ,el){
			var value = "新增的函数测试文字"
			return value;
		})
	</script>

.html () 和 .text()方法的区别

​ 通过.html()方法添加的属性包括标签 .text()方法不包括标签

5.val() 主要是用于处理表单元素的值，比如input ,select 和textarea

<body>
		<select id="single">
			<option value="0">字段一</option>
			<option value="1">字段二</option>
		</select>
		<select id="multiple" multiple="multiple">
			<option value="0" selected="selected">字段一</option>
			<option value="1">字段二</option>
			<option value="2" selected="selected">字段三</option>
		</select>
		<input type="text" value="hello" id="text">

</body>
	<script>
		var value1 = $("#single");
		console.log(value1);
		$("#single").val("1");
		var value2 =$("#multiple").val();
		console.log(value2);

		$("#multiple").val([0,1,2]);

		var value3 =$("#text").val();
		console.log(value3);

		$("#text").val(function(i,e){
			var newText = e+"  " + "新增文本";
			return newText;
		})
	</script>

6.addClass() 和removeClass()

<body>
	<p class="intro icon1">段落一</p>
	<p class="intro icon2">段落二</p>
	<p class="intro icon3">段落三</p>

</body>
	<script>
		//$("p").addClass("text-bg");
		$("p.icon2").addClass("text-color text-bg");
		$("p").addClass(function(index,el){
			console.log(index,el);
			if (index==2) {
				return "text-bg"
			}
		})
		$("p.icon2").removeClass("text-color text-bg")

	</script>

7 toggleClass()

​ 在匹配的元素集合中的每个元素上添加或者删除一个或多个样式类，取决于这个样式类是否存在或者切换属性，如果存在就（不存在）就删除（添加）一个

<body>
	<p class="intro icon1 text-bg">段落一</p>
	<p class="intro icon2 text-bg">段落二</p>
	<p class="intro icon3 text-bg">段落三</p>

</body>
	<script>
		//$("p").toggleClass("text-bg" ,true);
		//$("p").toggleClass("text-color" ,true);
		$("p").toggleClass(function(index ,el){
			if (index==1) {
				return "intro text-bg"
			}
			if (index==2) {
				return "intro text-color"
			}else{
				return "text-font"
			}

		} ,true)
	</script>

8.css() 获取元素样式属性的计算值或者设置元素的css属性

    <style type="text/css">
    	.text-bg{
    		background: #f80;
    	}
    	.text-color{
    		color:#276ddb;
    	}
    	.text-font{
    		font-size: 20px;
    	}
    </style>
    <title>jQuery 练习题</title>
</head>

<body>
	<p class="intro ">段落一</p>
	<p class="intro ">段落二</p>
	<p class="intro ">段落三</p>

</body>
	<script>
		//设置属性
		//$("p").css("font-size" ,"50px");
		//获取属性
		var css = $("p").css(["font-size","height","width"]);
		//console.log(css);

		$("p").css({
			"font-size" :"24px",
			"height" :"90px"
		})
		//属性名称  , function
		$("p").css("font-size",function(index ,el){
			if (index ==1) {
				return "40px"
			}
		})
	</script>

​

9 .addClass() 和 .css的区别

​ 1 通过addClass我们可以批量的给相同的元素设置统一的规则 ，变动起来比较方便 ，可以统一修改删除，如果通过.css()方法就需要指定每一个元素的一一的修改 ，日后维护也要一一的修改，比较麻烦

​ 2 通过.css()方法设置的样式属性优先级要高于.addClass()方法

​ 3 .css()方法修改的是标签里面的style属性 .addClass() 添加的是class 属性,所以 .addClass()方法比较易于维护

jQuery操作Dom

1 节点创建

2 append() appendTo() 是将指定的元素添加到匹配元素的内部末尾处，作为其子节点，两种方法功能相同，主要的不同是语法-------内容和目标位置不同

​ append(content) 向每个匹配的元素内部追加内容

​ appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中

<body>
	<div class="box" id="box">
		<p>测试文字</p>
	</div>

</body>
	<script>
		var dom = $("<div id='demo' class='test'>添加测试文字</div>");
		//两者作用一样
		//$("#box").append(dom);
		dom.appendTo($("#box"));
	</script>

3prepend() prependTo()

​ 将指定的元素添加到匹配元素的内部首位处,作为其子节点，两种方法功能相同主要是语法不同------内容和目标位置不同

prepend(content) 向每个匹配的元素内部前置内容

prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中

<body>
	<div class="box" id="box">
		<p>测试文字</p>
	</div>

</body>
	<script>
		var dom = $("<div id='demo' class='test'>添加测试文字</div>");
		//两者作用一样
		//$("#box").prepend(dom);
		dom.prependTo($("#box"));
	</script>

4 .after() .before()

before和after都是用来对选中元素的外部增加相邻的兄弟节点

after(content) 在匹配元素的集合中的每个元素后面插入参数所指定的内容 作为其兄弟节点

before(content) 在匹配的元素集合中每个元素的前面插入参数所指定的内容，作为兄弟节点

<body>
	<div class="box" id="box">
		<p>测试文字</p>
	</div>

</body>
	<script>
		var dom = $("<div id='demo' class='test'>添加测试文字</div>");
		$("#box").after(dom);
		//$("#box").before(dom);
	</script>

5insertAfter() 与insertBefore()

​ .insertAfter() .insertBefore()与after()和before()实现同样的功能，主要的不同是语法 特别是插入内容的目标和位置

.insertAfter(content) 在目标元素前插入集合中每个匹配的元素

.insertBefore(content) 在目标元素后面插入集合中每个匹配的元素

<body>
	<div class="box" id="box">
		<p>测试文字</p>
	</div>

</body>
	<script>
		var dom = $("<div id='demo' class='test'>添加测试文字</div>");
		//$("#box").after(dom);
		//$("#box").before(dom);

		//dom.insertAfter($("#box"))
		dom.insertBefore($("#box"))
	</script>

6.empty() .remove()

​ .empty() 移除了当前元素下的所有子元素，但是本身元素没有被删除

​ .remove() 会将元素自身移除，同时也会移除元素内部的一切 包括绑定的事件以及该元素相关的jQuery数据

<body>
	<div class="box1" id="box1">
        box1
		<p>测试文字</p>
	</div>
    <div id="box2">
        box2
        <div>box2_1</div>
          <div>box2_2</div>
            <div>box2_3</div>
    </div>
    <div id="box3">box3</div>

</body>
	<script>
		$("#box2").empty();
        $("#box1").remove();
        $("#box1").click(function(e){
            alert("点击了box1")
        });
	</script>

.clone()

	clone()深度复制所有匹配的元素集合，八廓所有匹配元素，匹配元素的下级元素文字节点

​ 如果节点有事件或者数据之类的其他处理，我们需要通过clone(true)传递以恶搞boolean值true用来指定 ，这样不仅仅只是克隆单纯的节点结构还要把附带的事件和数据一并克隆了

​ $().clone() 只克隆结构 事件丢失

​ $().clone(true)克隆结构事件与数据

<body>
    <div class="box1" id="box1">
        box1
    </div>
    <div class="box2" id="box2">
        box2
    </div>

</body>
    <script>
        $("#box1").on("click" ,function(e){
            alert("你点击了" +$(this).text());
        });
        //只克隆了结构
        $("#box2").html($("#box1").clone());
        //克隆了结构和事件
        $("#box2").html($("#box1").clone(true));
    </script>

8jQuery遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdTneXpJ-1622784305262)(D:\Program Files\Typora\typora-user-images\jQuery遍历)]

<body>
    <div class="box" id="box">
        <ul class="level-1">
            <li class="item1">1-1</li>
            <li class="item2">1-2</li>
            <li class="item3">1-3</li>
          
        </ul>
         <ul class="level-2">
            <li>2-1</li>
            <li>2-2</li>
            <li>2-3</li>
           
        </ul>
    </div>

</body>
    <script>
        //直接子元素
        var html1 = $(".box").children();
        console.log(html1);
        //需要指定元素
        var html2 = $(".box").find("li");
        console.log(html2);
        //只要父元素
          var html3 = $("ul").parent();
        console.log(html3);
        //所有祖先元素
        var html4 = $("ul").parents();
        console.log(html4);
        //通过后代元素指定元素
        var html5 = $("ul").closest(".box");
        console.log(html5);
        //下一个兄弟节点
        var html6 = $(".level-1").next();
        console.log(html6);
        //上一个兄弟节点
        var html7 = $(".level-2").prev();
        console.log(html7);
        //同辈元素
        var html8 = $(".item1").siblings();
        console.log(html8);

        var html9 = $(".item1").add('<li>123</li>').appendTo(".level-2");
        console.log(html9); 
        console.log("10")
        //批量修改元素
       $(".level-1>li").each(function(index ,el){
        console.log(index ,el);
        $(el).text("测试文字"+index);
       })
          
    </script>

4 绑定事件

​ 1 click() 绑定一个点击事件

$(selector).click(function(e){
	//执行的事件
})

<body>
   <p class="box" id="demo">
       测试文字<a href="https://www.baidu.com/" target="_blank">百度</a>
   </p>

</body>
    <script>
        $(".box").click(function(e){
            //阻止冒泡
            e.preventDefault();
            alert($(this).html())
        })
    </script>

2.blur() .focus()

​ focus() 绑定表单元素获得焦点的时候的事件函数处理

​ blur() 绑定表单元素失去焦点的时候事件处理函数

<body>
    <div class="box">
        文字测试
    </div>
    <input type="text" class="input-box" value="hello">
    <textarea></textarea>

</body>
   <script>
        $("input ,textarea").focus(function(e){
          var a=  $(this).css("border-color" ,"#f00");
          console.log(a)
        })
         $("input ,textarea").blur(function(e){
           var b= $(this).css("border-color" ,"#ddd");
            console.log(b)
        })
   </script>

3change()

input textarea select这些元素的值是可以改变的开发者可以通过change()方法去监听这些改变的动作

$(selector).change(function(e){
		//监听事件
})
$("input").change(function(e){
  	console.log($(this).val());
})

4 on()

on()方法是官方推荐事件的一个方法

​ 事件绑定在最上层div元素上 ，当用户出发在a元素上，事件将往上冒泡 ，一直会冒泡在div元素上，如果提供了第二个参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会出发事件回调函数

$(selector).on(events ,[selector] ,function(e){
	//执行指定事件
})
$("#demo").on("click" ,function(e){
		console.log($(this).text());
})
$("#demo").on("click","span" ,function(e){
		console.log($(this).text());
})

​ 5 off()

off()移除事件

根据on绑定事件的一些特性 off()方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的使劲按处理函数，当多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

$(selector).off() ;//移除所有绑定事件
$(selector).off("click" "mouseover") //移除指定事件

6jQuery ajax()

1ajax()

使用ajax() 方法是最底层，功能最强大的请求服务器数据的方法 ，它不仅仅可以获取服务器返回的数据，还可以向服务器发送请求冰传递数值他的调用格式如下

​ jQuery.ajax([settins]) 或 $.ajax([settings])

  1. async boolean 默认设置下 所有请求均为异步请求
  2. url String 发送请求的地址
  3. data PlainObject，String 发送到服务器的数据
  4. dataType String预期服务器返回的数据类型
  5. type String 请求方式(POST GET)
  6. error Function请求失败调用的方法
  7. success Function请求成功后的回调函数
  8. beforeSend Function发送请求前调用此方法
<body>
<ul class="content" id="content">
	<li id="">
		<span class="date">2021-05-19</span>
		<h3 class="title">测试文字</h3>
	</li>
	<button type="button" id="requestData">请求数据</button>
</ul>

</body>
<script>
	function submit1(){
		return false;
	}
	$("#requestData").on("click" ,function(){
		$.ajax({
			url:"http://localhost:9090/admin/demo/test",
			data: null,
			dataType : "json",
			type:"GET",
			error:function(data){
				console.log("请求失败");
			},
			success:function(data){
				console.log(data);
				$("#content").empty();

				$.each(data,function (index,el) {
						$("#content").append('<li id="'+el.id+'">\n' +
								'\t\t<span class="date">'+el.date+'</span>\n' +
								'\t\t<h3 class="title">'+el.title+'</h3>\n' +
								'\t</li>')
				});

			},
			beforeSend:function(){
				console.log("请求前");
			},
		})
	});
	//冒泡到li
	$("#content").on("click","li" ,function(){
			alert($(this).text());
	});
</script>

jQuery动画操作

1 显示隐藏

<body>
    <div class="box">
        <div id="content">测试类容</div>
    </div>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">切换</button>
</body>
<script>
    $("#hide").on("click" ,function () {
        $("#content").hide(3000);
    })
    $("#show").on("click",function(){
        $("#content").show(3000);
    })
    //显示就是隐藏  隐藏就变为显示
    $("#toggle").on("click" ,function () {
        $("#content").toggle(2000);
    })
</script>

2上卷下拉

<body>
<div class="box">
    <div id="content">测试类容</div>
</div>
<button id="show">上卷</button>
<button id="hide">下拉</button>
<button id="toggle">切换</button>
</body>
<script>
    $("#hide").on("click" ,function () {
        $("#content").slideDown(3000);
    })
    $("#show").on("click",function(){
        $("#content").slideUp(2000);
    })
    //显示就是隐藏  隐藏就变为显示
    $("#toggle").on("click" ,function () {
        $("#content").slideToggle(2000);
    })
</script>

3淡入淡出

<body>
<button id="show">淡出</button>
<button id="hide">淡入</button>
<button id="toggle">切换</button>
</body>
<script>
    $("#hide").on("click" ,function () {
        $("#content").fadeIn(1000);
    })
    $("#show").on("click",function(){
        $("#content").fadeOut(2000);
    })
    //显示就是隐藏  隐藏就变为显示
    $("#toggle").on("click" ,function () {
        $("#content").fadeToggle(2000);
    })
</script>

4animate

<body>
<div class="box">
    <div id="content">测试类容</div>
</div>
<button id="start">执行动画</button>
<button id="stop">停止动画</button>
<button id="reset">重置动画</button>
</body>
<script>
    $("#start").on("click" ,function () {
        $("#content").animate({
            "width" :"400px",
            "font-size" :"50px",
        },2000);
    })
    $("#stop").on("click" ,function () {
        $("#content").stop();

    })
    $("#reset").on("click" ,function () {
        $("#content").animate({
            "width" :"200px",
            "font-size" :"14px",
        });

    })
</script>

代码规范

1声明语言

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 统一字符编码 -->
	<meta charset="UTF-8"/>
	<!-- 默认采用ie浏览器的最高模式进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!-- 让国内基于webkit的浏览器默认采用webkit内核进行渲染-->
     <meta name="renderer" content="webkit">
</head>

2 属性顺序

mustache模板引擎

1 引入mustache.min.js文件
<script src="js/mustache.min.js"></script>

2编写数据模板
    <!-- 模板 -->
    <script type="text/html" id="list-tmpl">
        {{#list}}  //# 开头
        <tr>
            <td>{{id}}</td>
            <td><span class="resource-title">  //变量使用{{}}
                <a href="href">{{title}}</a></span></td>
            <td>{{location}}</td>
            <td>{{count}}</td>
            <td>{{datetime}}</td>
            <td>
                <div class="score score-5"></div>
            </td>
        </tr>
        {{/list}}  // 以  /结尾
   </script>
3页面渲染
  <script>
        var data ={
                list:[{
                    id : "1",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"张认车素她从养",
                    location:"重庆市",
                    count :"821" ,
                    datetime:"1981年10月09日",
                },{
                    id : "2",
                    href : "detail.html?rowguid=8334eeA2-EEe4-57b0-A8Ef-C1cadD882EE7",
                    title:"热共节始打美",
                    location:"海外",
                    count :"926" ,
                    datetime:"1985年09月06日",
                },{
                    id : "3",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"因十音打理果",
                    location:"漳州市",
                    count :"887" ,
                    datetime:"1998年10月25日	",
                },{
                    id : "4",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"京革文矿精",
                    location:"厦门市",
                    count :"266" ,
                    datetime:"2012年10月23日	",
                },{
                    id : "5",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"权同容类写",
                    location:"湘潭市",
                    count :"826" ,
                    datetime:"2017年09月27日",
                },{
                    id : "6",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"本个经道备立",
                    location:"固原市",
                    count :"921" ,
                    datetime:"2012年02月23日",
                },{
                    id : "7",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"已主联心着",
                    location:"莆田市",
                    count :"804" ,
                    datetime:"1979年11月22日	",
                },{
                    id : "8",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"制得音决党作干",
                    location:"宜春市",
                    count :"91" ,
                    datetime:"1990年04月27日",
                },{
                    id : "9",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"系层去器经向越",
                    location:"宁波市",
                    count :"64" ,
                    datetime:"1984年09月11日",
                },{
                    id : "10",
                    href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                    title:"南南具组时五 ",
                    location:"益阳市",
                    count :"91" ,
                    datetime:"1975年08月01日",
                },

                ]

        }
        //获取模板
        var tmpl =$("#list-tmpl").html();
      	//获取需要渲染页面位置
        var $onlineService = $("#resource-list");
      //  渲染页面
      	// 第一个参数获取模板  第二个参数获取数据
        $onlineService.append(Mustache.render(tmpl,data));
    </script>

2 使用mockjax

​ 1 数据

$.mockjax({
    url :"getData" ,
    status :200,
    responseTime :1000,
    response :function (setting) {
        this.responseText={
            list:[{
                id : "1",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"张认车素她从养",
                location:"重庆市",
                count :"821" ,
                datetime:"1981年10月09日",
            },{
                id : "2",
                href : "detail.html?rowguid=8334eeA2-EEe4-57b0-A8Ef-C1cadD882EE7",
                title:"热共节始打美",
                location:"海外",
                count :"926" ,
                datetime:"1985年09月06日",
            },{
                id : "3",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"因十音打理果",
                location:"漳州市",
                count :"887" ,
                datetime:"1998年10月25日	",
            },{
                id : "4",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"京革文矿精",
                location:"厦门市",
                count :"266" ,
                datetime:"2012年10月23日	",
            },{
                id : "5",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"权同容类写",
                location:"湘潭市",
                count :"826" ,
                datetime:"2017年09月27日",
            },{
                id : "6",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"本个经道备立",
                location:"固原市",
                count :"921" ,
                datetime:"2012年02月23日",
            },{
                id : "7",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"已主联心着",
                location:"莆田市",
                count :"804" ,
                datetime:"1979年11月22日	",
            },{
                id : "8",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"制得音决党作干",
                location:"宜春市",
                count :"91" ,
                datetime:"1990年04月27日",
            },{
                id : "9",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"系层去器经向越",
                location:"宁波市",
                count :"64" ,
                datetime:"1984年09月11日",
            },{
                id : "10",
                href : "detail.html?rowguid=1AF8Ad39-bccC-7304-6F8f-89ee6AF8FbAd",
                title:"南南具组时五 ",
                location:"益阳市",
                count :"91" ,
                datetime:"1975年08月01日",
            },

            ]
        }
    }
})

2 页面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>homework</title>
    <link rel="stylesheet" href="css/core.min.css">
    <link rel="stylesheet" href="js/swiper/swiper.min.css">
    <link rel="stylesheet" href="css/demo1.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/swiper/swiper.min.js"></script>
    <!-- 引入mockjax.js-->
    <script src="mock/jquery.mockjax.js"></script>

    <!-- 完成说明： 1，使用模板引擎渲染列表 -->
    <!-- 2，使用不同的mock技术模拟列表数据 -->
</head>

<body>
<div class="list-content">
    <table class="list-std">
        <thead>
        <tr>
            <th width="50">序</th>
            <th width="370">资源名称</th>
            <th width="160">提供机构</th>
            <th width="110">浏览次数</th>
            <th width="120">更新时间</th>
            <th>评分</th>
        </tr>
        </thead>
        <tbody id="resource-list">
        </tbody>
    </table>
</div>

<!-- 模板 -->
<script type="text/html" id="list-tmpl">
    {{#data}}
    <tr>
        <td>{{id}}</td>
        <td><span class="resource-title">
                <a href="href">{{title}}</a></span></td>
        <td>{{location}}</td>
        <td>{{count}}</td>
        <td>{{datetime}}</td>
        <td>
            <div class="score score-5"></div>
        </td>
    </tr>
    {{/data}}
</script>

<script src="js/mustache.min.js"></script>
<script src="js/test.js"></script>
<script>
    //获取模板
    var tmpl = $("#list-tmpl").html();
    var renderData = function (data) {
    
            Mustache.parse(tmpl);
            $("#resource-list").html(Mustache.render(tmpl,{data :list}))
    }
    //通过ajax获取test.js的数据
    $.ajax({
        url:"getData" ,
        type:"POST" ,
        dataType:"json",
        success: function (data) {
            //获取数据成功
            console.log(data);
            //调用方法渲染页面
            renderData(data);
        }
    })
</script>

</body>

</html>

3 实战

html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="js/pagination/mricode.pagination.css" />
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <title>南京市政务服务首页</title>
</head>

<body>
    <div class="header">
        <div class="container clearfix">
            <div class="head-left clearfix">
                <span>南京市</span>
                <span>多云</span>
                <span><img src="./images/Partly-Cloudy-Large.png" alt="" /></span>
                <span>4-18℃</span>
                <span>PM2.5:125</span>
            </div>
            <div class="head-right clearfix">
                <ul class="nav-list clearfix">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">政务公开</a>
                    </li>
                    <li class="current">
                        <a href="javascript:;">审批业务</a>
                    </li>
                    <li>
                        <a href="javascript:;">公共资源交易</a>
                    </li>
                    <li>
                        <a href="javascript:;">12345热线</a>
                    </li>
                </ul>

                <div class="user-info clearfix">
                    <span class="user-name">谭清喜</span>
                    <a class="quit" href="javascript:;"></a>
                </div>
            </div>

        </div>
    </div>
    <div class="main">
        <div class="container clearfix">
            <!--logo-->
            <div class="banner clearfix">
                <div class="logo clearfix">
                    <a class="logo-img" href="javascript:;"></a>
                </div>
                <div class="search-wrap clearfix">
                    <input type="text" placeholder="&nbsp&nbsp&nbsp请输入关键字/办件编号" />
                    <a class="sear" href="javascript:;"></a>
                    <a class="ques" href="javascript:;">提 问</a>
                    <div class="hot-search clearfix">
                        <span class="hot-title">热搜:</span>
                        <ul class="fl-li clearfix">
                            <li>
                                <a href="javascript:;">职业资格</a>
                            </li>
                            <li>
                                <a href="javascript:;">就业</a>
                            </li>
                            <li>
                                <a href="javascript:;">退休</a>
                            </li>
                            <li>
                                <a href="javascript:;">纳税</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--首页元素-->
            <div class="position clearfix">
                <a href="javascript:;">首页&nbsp;></a>
                <span>审批服务</span>
            </div>
            <div class="matter-left">
                <h3 class="matter-title">事项选择</h3>
                <ul class="matter-type">
                    <li class="active">
                        <a href="#person">个人办事</a>
                    </li>
                    <li>
                        <a href="#bussiness">企业办事</a>
                    </li>
                    <li>
                        <a href="#depart">部门办事</a>
                    </li>
                    <li>
                        <a href="#area">按区域服务</a>
                    </li>
                </ul>
            </div>

            <div class="matter-right">
                <div id="person" class="tab-content">
                    <div class="clearfix">
                        <div class="search-container">
                            <input type="text" />
                            <a href=""></a>
                        </div>
                    </div>
                    <ul class="matter-list">
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon01.png" alt="" />
                                </div>
                                <p class="matter-name">司法公正</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon02.png" alt="" />
                                </div>
                                <p class="matter-name">执业资格</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon03.png" alt="" />
                                </div>
                                <p class="matter-name">教育</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon04.png" alt="" />
                                </div>
                                <p class="matter-name">交通</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon05.png" alt="" />
                                </div>
                                <p class="matter-name">医疗</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon06.png" alt="" />
                                </div>
                                <p class="matter-name">就业</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon07.png" alt="" />
                                </div>
                                <p class="matter-name">文化体育</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon08.png" alt="" />
                                </div>
                                <p class="matter-name">设立变更</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon09.png" alt="" />
                                </div>
                                <p class="matter-name">名族宗教</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon10.png" alt="" />
                                </div>
                                <p class="matter-name">退休养老</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon11.png" alt="" />
                                </div>
                                <p class="matter-name">住房</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon12.png" alt="" />
                                </div>
                                <p class="matter-name">纳税</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon13.png" alt="" />
                                </div>
                                <p class="matter-name">登记开办</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon14.png" alt="" />
                                </div>
                                <p class="matter-name">慈善</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/p-icon15.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="bussiness" class="tab-content hidden">
                    <div class="clearfix">
                        <div class="search-container">
                            <input type="text" />
                            <a href=""></a>
                        </div>
                    </div>
                    <ul class="matter-list clearfix">
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon01.png" alt="" />
                                </div>
                                <p class="matter-name">司法公正</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon02.png" alt="" />
                                </div>
                                <p class="matter-name">执业资格</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon03.png" alt="" />
                                </div>
                                <p class="matter-name">教育</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon04.png" alt="" />
                                </div>
                                <p class="matter-name">交通</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon05.png" alt="" />
                                </div>
                                <p class="matter-name">医疗</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon06.png" alt="" />
                                </div>
                                <p class="matter-name">就业</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon07.png" alt="" />
                                </div>
                                <p class="matter-name">文化体育</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon08.png" alt="" />
                                </div>
                                <p class="matter-name">设立变更</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon09.png" alt="" />
                                </div>
                                <p class="matter-name">名族宗教</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon10.png" alt="" />
                                </div>
                                <p class="matter-name">退休养老</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon11.png" alt="" />
                                </div>
                                <p class="matter-name">住房</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon12.png" alt="" />
                                </div>
                                <p class="matter-name">纳税</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon13.png" alt="" />
                                </div>
                                <p class="matter-name">土地房产</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon14.png" alt="" />
                                </div>
                                <p class="matter-name">慈善</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon15.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon16.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon17.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon18.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon19.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon20.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="matter-icon">
                                    <img src="images/c-icon21.png" alt="" />
                                </div>
                                <p class="matter-name">文物保护</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="depart" class="tab-content hidden">
                    <div class="clearfix">
                        <div class="search-container">
                            <input type="text" />
                            <a href=""></a>
                        </div>
                    </div>
                    <div class="content">
                        <ul class="matter-list">
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="area" class="tab-content hidden">
                    <div class="clearfix">
                        <div class="search-container">
                            <input type="text" />
                            <a href=""></a>
                        </div>
                    </div>
                    <div class="content">
                        <ul class="matter-list">
                            <div class="divisions">
                                企业注册大厅
                            </div>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <div class="divisions">
                                投资建设大厅
                            </div>

                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    文物保护
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="counts clearfix">
                <!--左侧公告表单-->
                <div class="content-left clearfix">
                    <div class="advert">
                        <a href="javascript:;"></a>
                        <p class="advert-name">办件公示</p>
                    </div>
                    <div class="tableshow">
                        <table border="1" class="mytab">
                            <thead>
                                <tr>
                                    <td>办公编号</td>
                                    <td>申请人/申请单位</td>
                                    <td>办理部门</td>
                                    <td>申请事项</td>
                                    <td>收件时间</td>
                                    <td>办件状态</td>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>

                        </table>
                    </div>
                    <div id="pager" class="m-pagination"></div>
                    <!--右侧图片链接-->

                </div>
                <div class="links clearfix">
                    <a class="green-channel" href="javascript:;">绿 色 通 道</a>
                    <a class="bingliancx" href="javascript:;">并联审批查询</a>
                    <div class="advert advert-top clearfix">
                        <a href="javascript:;"></a>
                        <p class="advert-name">办件查询</p>
                        <div class="search-id">
                            <p class="office-id">办件编号:</p>
                            <input type="text" />
                            <a href="javascript:;">查询</a>
                        </div>
                    </div>
                    <div class="advert advert-top2 clearfix">
                        <a href="javascript:;"></a>
                        <p class="advert-name">办件统计
                            <a class="advert-all" href="javascript:;">全部</a>
                            <a class="advert-all" href="javascript:;">本月</a>
                            <a class="advert-all active" href="javascript:;">今天</a>
                        </p>
                        <a class="tongji" href="javascript:;"></a>
                        <a class="xiaonengtj" href="javascript:;">效 能 统 计</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="container">
            <div class="left-img">
                <img src="images/province.png" alt="" />
            </div>
            <div class="right-img">
                <img src="images/red.png" alt="" />
            </div>
            <div class="foot-text">
                <span>南京市政务服务管理办公室</span>
                <span>版权所有：南京市信息中心</span>
                <span>苏ICP备11074598-1</span>
            </div>

        </div>
    </div>
    <script type="text/x-template" id="table-tpl">
        {{#data}}
        <tr id="{{id}}">
            <td>{{number}}</td>
            <td>{{applyer}}</td>
            <td>{{department}}</td>
            <td>{{project}}</td>
            <td>{{date}}</td>
            <td>{{state}}</td>
        </tr>
        {{/data}}
    </script>
    <script>
        var getDataUrl = 'getData'
    </script>
    <script src="_test/mock.js"></script>
    <script src="_test/test_index.js"></script>
    <script src="js/mustache.js"></script>
    <script src="js/pagination/mricode.pagination.js"></script>
    <script src="js/index.js"></script>

</body>

</html>

js

/*!
 * 
 * author: dai
 */
// siblings()方法返回被选元素的所有同级元素
(function(win, $) {

    $(".matter-type").on("click", "a", function(e) {
        e.preventDefault();
        var $this = $(this);
        $li = $this.parent();
        var id = $this.attr("href");
        if (!$this.hasClass("active")) {
            $li.addClass("active").siblings(".active").removeClass("active");
            $(id).removeClass("hidden").siblings().addClass("hidden");
        }
    });

    var $pager = $("#pager");
    //  渲染分页条
    function renderPagination(total, pageIndex) {
        if ($pager.pagination()) {
            $pager.pagination("destory");
        }

        $pager.pagination({
            total: total,
            pageSize: 7,
            pageIndex: pageIndex
        });

        $pager.on("pageClicked", function(event, data) {
            getData(data.pageIndex);
        }).on('jumpClicked', function(event, data) {
            getData(data.pageIndex);
        });

    }
    //  默认调用一次
    getData(0);
    //  获取数据
    function getData(pageIndex) {
        $.ajax({
            url: "getShowData",
            data: {
                pageIndex: pageIndex,
                pageSize: 7
            },
            success: function(data) {
                data = JSON.parse(data);
                console.log(data + "ssss");
                var tableTpl = $("#table-tpl").html();
                $(".tableshow tbody").html(Mustache.render(tableTpl, data));
                renderPagination(data.total, pageIndex);
            }
        });
    }


}(this, jQuery));

数据模拟

Mock.mock(/getShowData/, {
    'total': 1000,
    'data|6': [{
        'id|+1': 1,
        "number": '@integer(1000000000,9999999999)',
        "applyer": '@cword(1,10)',
        "department": "民政厅",
        "project": "全市性社会团体成立登记",
        "date": '@date(yyyy-MM-dd)',
        "state": /[已未]登记/
    }]
});

= ‘getData’

```

js

/*!
 * 
 * author: dai
 */
// siblings()方法返回被选元素的所有同级元素
(function(win, $) {

    $(".matter-type").on("click", "a", function(e) {
        e.preventDefault();
        var $this = $(this);
        $li = $this.parent();
        var id = $this.attr("href");
        if (!$this.hasClass("active")) {
            $li.addClass("active").siblings(".active").removeClass("active");
            $(id).removeClass("hidden").siblings().addClass("hidden");
        }
    });

    var $pager = $("#pager");
    //  渲染分页条
    function renderPagination(total, pageIndex) {
        if ($pager.pagination()) {
            $pager.pagination("destory");
        }

        $pager.pagination({
            total: total,
            pageSize: 7,
            pageIndex: pageIndex
        });

        $pager.on("pageClicked", function(event, data) {
            getData(data.pageIndex);
        }).on('jumpClicked', function(event, data) {
            getData(data.pageIndex);
        });

    }
    //  默认调用一次
    getData(0);
    //  获取数据
    function getData(pageIndex) {
        $.ajax({
            url: "getShowData",
            data: {
                pageIndex: pageIndex,
                pageSize: 7
            },
            success: function(data) {
                data = JSON.parse(data);
                console.log(data + "ssss");
                var tableTpl = $("#table-tpl").html();
                $(".tableshow tbody").html(Mustache.render(tableTpl, data));
                renderPagination(data.total, pageIndex);
            }
        });
    }


}(this, jQuery));

数据模拟

Mock.mock(/getShowData/, {
    'total': 1000,
    'data|6': [{
        'id|+1': 1,
        "number": '@integer(1000000000,9999999999)',
        "applyer": '@cword(1,10)',
        "department": "民政厅",
        "project": "全市性社会团体成立登记",
        "date": '@date(yyyy-MM-dd)',
        "state": /[已未]登记/
    }]
});
Magicevcx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端笔记
08-22
前段面试题整理。笔记 对学习和工作面试都有帮助的题目
前端笔记汇总
西楼的博客
01-06 4531
目录 目录 前端基础 HTML 1.基本标签 2.页面结构分析 3.高级标签 CSS 1.基础知识 2.美化网页 JS 1.基础知识 2.数据类型详解 3.函数 4.面向对象编程 5.操作BOM对象(重点) 6.操作DOM对象(重点） 7.操作form表单 8. jQuery 9.总结 前端基础 课程听的是b站狂神说：狂神说 笔记有些是借鉴：夜里的雨 HTML 1.基本标签 <!DOCTYPE html> <html...
前端笔记ing
PersistMustCool的博客
01-27 372
【代码】前端笔记ing。
黑马前端学习笔记
qq_40437045的博客
03-10 1430
​​​​​​HTML第一天 一、网页 二、什么是HTML 三、HTML标签 CSS第一天 一、CSS 简介 二、 CSS 基础选择器 三、CSS 字体属性 四、CSS 文本属性 五、CSS 的引入方式 HTML第一天 网页 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页， 常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页..
千锋前端笔记
B_planzp的博客
02-22 1050
注：vscode的代码文件应该存放在其他子文件夹，否则由于软件的自动更新机制，代码文件会造成丢失 学校与千锋教育存在合作，大二的JAVA 高级实验周是有千锋的老师进行教学。印象不错，所以找的是千锋的视频，自我笔记 前端基本HTML5和css3以及javascript html为文本标记语言，提供框架，css进行静态装饰，JavaScript负责动态交互 是对前端的基本介绍以及学习框架，直接代码 基本的段落语言 代码的兼容性可以用caniuse网站进行查找 文档声明和字符编码 ...
尚硅谷前端笔记
qq_46539281的博客
05-21 5644
前端笔记 0. html/css html/css基础笔记 1. html/css进阶 未写 – – 2.js 未写 – – 3.node.js 未写 – – 4.vue 未写 – – 5.react 未写 – – 6.小程序 未写 – – 7.微信公众号 未写 – – 8.uniapp 未写 – – 9.webpack4 未写 目标：全栈。 想要直接是实现一个app,或者是一个软件，不得不需要用到...
web前端笔记
07-28
web前端笔记是在培训机构培训过程中整理的一些笔记，仅供参考
前端笔记啦啦啦啦啦啦啦
04-23
前端笔记啦啦啦啦啦啦啦
前端笔记全套分享一学期
08-07
前端笔记.zip
前端笔记JavaScript
04-22
前端笔记JavaScript
什么是yolov10，简单举例.md
最新发布
05-25
YOLOv10是一种目标检测算法，是YOLO系列算法的第10个版本。YOLO（You Only Look Once）是一种快速的实时目标检测算法，能够在一张图像中同时检测出多个目标。
shufflenet模型-图像分类算法对动态表情分类识别-不含数据集图片-含逐行注释和说明文档.zip
05-25
shufflenet模型_图像分类算法对动态表情分类识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,
该项目存放基于Cesium的三维GIS平台开发中各种实践程序、截图、总结等，其中程序目录结构
05-25
"GIS" 通常指的是 地理信息系统（Geographic Information System）。它是一种特定的空间信息系统，用于捕获、存储、管理、分析、查询和显示与地理空间相关的数据。GIS 是一种多学科交叉的产物，涉及地理学、地图学、遥感技术、计算机科学等多个领域。 GIS 的主要特点和功能包括： 空间数据管理：GIS 能够存储和管理地理空间数据，这些数据可以是点、线、面等矢量数据，也可以是栅格数据（如卫星图像或航空照片）。 空间分析：GIS 提供了一系列的空间分析工具，用于查询、量测、叠加分析、缓冲区分析、网络分析等。 可视化：GIS 能够将地理空间数据以地图、图表等形式展示出来，帮助用户更直观地理解和分析数据。 数据输入与输出：GIS 支持多种数据格式的输入和输出，包括数字线划图（DLG）、数字高程模型（DEM）、数字栅格图（DRG）等。 决策支持：GIS 可以为城市规划、环境监测、灾害管理、交通规划等领域提供决策支持。 随着技术的发展，GIS 已经广泛应用于各个领域，成为现代社会不可或缺的一部分。同时，GIS 也在不断地发展和完善，以适应更多领域的需求。
mobilenet模型-基于图像分类算法对猕猴桃品质识别-不含数据集图片-含逐行注释和说明文档.zip
05-25
mobilenet模型_基于图像分类算法对猕猴桃品质识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,
基于Postgres的Dockerfile，包含Postgis GIS扩展、Citus 集群扩展，可用于构建docker镜像
05-25
"GIS" 通常指的是 地理信息系统（Geographic Information System）。它是一种特定的空间信息系统，用于捕获、存储、管理、分析、查询和显示与地理空间相关的数据。GIS 是一种多学科交叉的产物，涉及地理学、地图学、遥感技术、计算机科学等多个领域。 GIS 的主要特点和功能包括： 空间数据管理：GIS 能够存储和管理地理空间数据，这些数据可以是点、线、面等矢量数据，也可以是栅格数据（如卫星图像或航空照片）。 空间分析：GIS 提供了一系列的空间分析工具，用于查询、量测、叠加分析、缓冲区分析、网络分析等。 可视化：GIS 能够将地理空间数据以地图、图表等形式展示出来，帮助用户更直观地理解和分析数据。 数据输入与输出：GIS 支持多种数据格式的输入和输出，包括数字线划图（DLG）、数字高程模型（DEM）、数字栅格图（DRG）等。 决策支持：GIS 可以为城市规划、环境监测、灾害管理、交通规划等领域提供决策支持。 随着技术的发展，GIS 已经广泛应用于各个领域，成为现代社会不可或缺的一部分。同时，GIS 也在不断地发展和完善，以适应更多领域的需求。
Go微服务教程项目使用领域驱动设计和洋葱架构.zip
05-25
Go微服务教程项目使用领域驱动设计和洋葱架构
Go编程语言.zip
05-25
Go编程语言
ipython-4.0.0b1.tar.gz
05-25
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Practice Go是Go编程挑战的集合.zip
05-25
Practice Go是Go编程挑战的集合
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值