我的前端笔记
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 格式是一种用于数据交换的文本格式
格式规则如下
- 复合类的值可能是数组或对象 ，不能是函数 正则表达式 ，日期对象
- 简单类型的值只有四种 字符串 ，数值 布尔值 和 null
- 字符串必须是使用双引号表示 不能使用单引号
- 对象的键名必须放在双引号里面
- 数组或对象后面的最后一个成员的后面不能有逗号
- 数值前不能加0
- 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>段落1p>
<p class="cl1">段落2p>
<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="">这里是段落1p>
<p class="intro" text="fullname">这里是段落2p>
<p class="intro" text="phone">这里是段落3p>
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" >这里是段落1p>
<div class="inter">
<p class="intro" >这里是段落2p>
<p class="intro" >这里是段落3p>
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" >这里是段落1p>
<div class="inter">
<p class="cl2" >这里是段落2p>
<p class="cl1" >这里是段落3p>
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">这里是段落1p>
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("测试内容")
var html = $("#demo").html();
console.log(html);
$("#demo").html(function(i,e){
var newHtml= e+"新增测试内容"
return newHtml;
})
script>
.text()
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容，具体有三种用法
hello
测试文字
.html () 和 .text()方法的区别
通过.html()方法添加的属性包括标签 .text()方法不包括标签
5.val() 主要是用于处理表单元素的值，比如input ,select 和textarea
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 = $("添加测试文字");
//两者作用一样
//$("#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 = $("添加测试文字");
//两者作用一样
//$("#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 = $("添加测试文字");
$("#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 = $("添加测试文字");
//$("#box").after(dom);
//$("#box").before(dom);
//dom.insertAfter($("#box"))
dom.insertBefore($("#box"))
script>
6.empty() .remove()
.empty() 移除了当前元素下的所有子元素，但是本身元素没有被删除
.remove() 会将元素自身移除，同时也会移除元素内部的一切 包括绑定的事件以及该元素相关的jQuery数据
box1
测试文字
box2
box2_1
box2_2
box2_3
box3
.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-1li>
<li class="item2">1-2li>
<li class="item3">1-3li>
ul>
<ul class="level-2">
<li>2-1li>
<li>2-2li>
<li>2-3li>
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('123 ').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])
- async boolean 默认设置下 所有请求均为异步请求
- url String 发送请求的地址
- data PlainObject，String 发送到服务器的数据
- dataType String预期服务器返回的数据类型
- type String 请求方式(POST GET)
- error Function请求失败调用的方法
- success Function请求成功后的回调函数
- beforeSend Function发送请求前调用此方法
<body>
<ul class="content" id="content">
<li id="">
<span class="date">2021-05-19span>
<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('+ el.id+'">\n' +
'\t\t'+el.date+'\n' +
'\t\t'
+el.title+'\n' +
'\t')
});
},
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"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<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>homeworktitle>
<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>
<script src="mock/jquery.mockjax.js">script>
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:125span>
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">
<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=" 请输入关键字/办件编号" />
<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:;">首页 >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>