1.前后台交互
2.设计模式
----------------------------------------------------
node server-run.js
前后端分离
本地存储
接口文档要会看
----------------------------------------------------
.on("click",function(){}) //可以绑定未来元素 虚拟DOM
----------------------------------------------------
图片64码
http://tool.chinaz.com/tools/imgtobase
交互例子 看看
----------------------------------------------------
设计模式
1.工厂模式 重复的产生N个实例
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button class="btn">click</button>
<script type="text/javascript">
var aa = {
"name":"sonia",
"hobby":["sing","dance"],
"work":{
"job":"web开发",
"address":"wuhan"
},
"member":[{
"name":"ben",
"hobby":["sing","dance"]
},
{
"name":"lili",
"hobby":["sing","dance"]
}]
}
//字面量
var obj ={
name:"sonia",
age:22
};
//JSON
/*var aa = {
"name":"sonia",
"hobby":["sing","dance"],
"work":{
"job":"web开发",
"address":"wulan"
},
"member":[{
"name":"lili",
"hobby":["sing","dance"]
},{
"name":"ben",
"hobby":["sing","dance"]
}]
};
var test = JSON.stringify(aa,['name','member','work']);*/
//js原生
/*var xmlhttp;
if(window.XMLHttpRequest){
//ie7+ chrome firefox safari opera
xmlhttp = new XMLHttpRequest();
}else {
//ie5/ie6
xmlhttp = new ActiveXObject("Microfoft.XMLHTTP");
};
//向服务器发送请求 true异步 false同步
xmlhttp.open("get",url,true);
xmlhttp.send();*/
//jquery
$(".btn").on('click',function() {
$.ajax({
type:"post",
url:"http://localhost:3000/info",
async:true,//async 异步 sync同步
data:{username:"aaa", content:"bbb"},
dataType:"json",
success:function(msg) {
var obj = msg;
alert(JSON.stringify(msg));
},
error:function() {
}
})
});
//重复产生N个实例
/*function Create(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.action = function() {
return this.name;
};
return obj;
};
var p1 = new Create('aaa',1);
var p2= new Create('aaa',1);
var p3= new Create('aaa',1);*/
function AaObject() {
this.name;
};
function BbObject() {
this.name;
};
function Create(type,name){
if (type =='a'){
var obj = new AaObject();
obj.name = name;
obj.action = function() {
return this.name;
};
return obj;
} ;
if (type =='b'){
var obj = new BbObject();
obj.name = name;
obj.action = function() {
return this.name;
};
return obj;
} ;
};
var p1 = new Create('a','a1');
var p3 = new Create('a','a1');
var p4 = new Create('a','a1');
var p5 = new Create('a','a1');
var p2= new Create('b','b1');
</script>
</body>
</html>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>11111</title>
<!--引用pure-->
<link href="css/pure/pure-nr.css" rel="stylesheet" />
<link href="css/pure/grids-responsive-min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="fn-wrapper pure-g">
<!--左侧-->
<div class="pure-u-1 pure-u-sm-9-24">
<div class="fn-title pure-g">
<div class="fn-title-box"></div>
<h2 class="pure-u-3-5"><a href="#">最新列表</h2>
<a class="pure-u-2-5 fn-textright" href="#">更多</a>
</div>
<div class="blog list-l">
<ul>
<!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">慕容秋雪</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> -->
</ul>
</div>
</div>
<!--左侧 end -->
<!--中间-->
<div class="pure-u-1 pure-u-sm-6-24">
<div class="center">
<div class="fn-title-pansy" style="border-bottom:3px solid #0599aa;">
<h2 ><a href="#">列表</a></h2>
</div>
<div>
<ul class="photoblog pure-g">
<li class="pure-u-1 list-img">
<!-- <a href="#"><img src='images/sanli.jpg'></a> -->
</li>
</ul>
</div>
</div>
</div>
<!--中间 end -->
<!--右侧-->
<div class="pure-u-1 pure-u-sm-9-24">
<div class="fn-title pure-g">
<div class="fn-title-box"></div>
<h2 class="pure-u-3-5"><a href="#">热门列表</a></h2>
<a class="pure-u-2-5 fn-textright" href="#">更多</a>
</div>
<div class="blog list-hot">
<ul>
<!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">孤屿</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> -->
</ul>
</div>
</div>
<!--右侧 end -->
<div class="msg-input">
<div >
<input type="text" class="input1">
</div>
<div>
<input type="text" class="input2">
</div>
<div>
<button class="btn">click</button>
</div>
</div>
</div>
</body>
</html>
<script>
$(function() {
getList();
getImg();
$(".msg-input .btn").click(function() {
getHot();
});
});
//列表
function getList() {
$.ajax({
type:"get",
url:"http://localhost:3000/info",
async:true,//async 异步 sync同步
//data:{username:"aaa", content:"bbb"},
dataType:"json",
success:function(msg) {
var data = msg.result;
if(msg.code == '200'){
$.each(data,function(index,item){
$(".list-l ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>')
});
}
//alert(JSON.stringify(msg));
},
error:function() {
}
})
};
//POST
function getHot() {
var _input1 = $(".input1").val();
var _input2 = $(".input2").val();
var data = {
"accesstoken":'1234',
"name":_input1,
"content":_input2
}
$.ajax({
type:"post",
url:"http://localhost:3000/info2",
async:true,//async 异步 sync同步
data:data,
dataType:"json",
success:function(msg) {
var data = msg;
//if(msg.code == '200'){
$.each(data,function(index,item){
$(".list-hot ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>')
});
$(".input1,.input2").val('');
//}
//alert(JSON.stringify(msg));
},
error:function() {
}
});
}
//img
function getImg() {
$.ajax({
type:"get",
url:"http://localhost:3000/info_img",
async:true,//async 异步 sync同步
//data:data,
dataType:"json",
success:function(msg) {
var data = msg;
if(msg.code == '200'){
$(".list-img").html('<a href="#"><img src='+data.result+'></a>');
}
//alert(JSON.stringify(msg));
},
error:function() {
}
});
}
</script>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1111</title>
<!--引用pure-->
<link href="css/pure/pure-nr.css" rel="stylesheet" />
<link href="css/pure/grids-responsive-min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="fn-wrapper pure-g">
<!--左侧-->
<div class="pure-u-1 pure-u-sm-9-24">
<div class="fn-title pure-g">
<div class="fn-title-box"></div>
<h2 class="pure-u-3-5"><a href="#">最新列表</h2>
<a class="pure-u-2-5 fn-textright" href="#">更多</a>
</div>
<div class="blog list-l">
<ul>
<!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">慕容秋雪</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> -->
</ul>
</div>
</div>
<!--左侧 end -->
<!--中间-->
<div class="pure-u-1 pure-u-sm-6-24">
<div class="center">
<div class="fn-title-pansy" style="border-bottom:3px solid #0599aa;">
<h2 ><a href="#">列表</a></h2>
</div>
<div>
<ul class="photoblog pure-g">
<li class="pure-u-1 list-img">
<!-- <a href="#"><img src='http://img4.imgtn.bdimg.com/it/u=3900663449,3280179767&fm=214&gp=0.jpg'></a> -->
<!-- <a href="#" style="background-image: url('images/sanli.jpg')"></a> -->
</li>
</ul>
</div>
</div>
</div>
<!--中间 end -->
<!--右侧-->
<div class="pure-u-1 pure-u-sm-9-24">
<div class="fn-title pure-g">
<div class="fn-title-box"></div>
<h2 class="pure-u-3-5"><a href="#">热门列表</a></h2>
<a class="pure-u-2-5 fn-textright" href="#">更多</a>
</div>
<div class="blog list-hot">
<ul>
<!-- <li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">孤屿</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">午后咖啡</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li>
<li class="blog-title"><a href="#" class="pure-u-4-5">暑假有时间上网，准备写长篇小说</a><a href="#" class="pure-u-1-5">欧阳小小默</a></li> -->
</ul>
</div>
</div>
<!--右侧 end -->
</div>
<!-- input -->
<div class="main pure-g">
<div class="pure-u-1-3">
<div class=" mg">
<input type="text" class="input1"/>
</div>
</div>
<div class="pure-u-1-3">
<div class="mg">
<input type="text" class="input2"/>
</div>
</div>
<button class="pure-u-1-3">按钮</button>
</div>
</body>
</html>
<script>
$(function(){
getList();
getImg();
$("button").click(function(){
getInput();
});
});
function getList(){
$.ajax({
type: "get", //请求方式
url:"http://localhost:3000/info", //请求路径
//data:"id=655952&sum=3", //传参
//data:{"id":3,"sum":4},
dataType: 'json', //返回值类型
success: function (msg) {
var data = msg.result;
if(msg.code == '200'){
$.each(data, function (index,item) {
$(".list-l ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.content+'</a><a href="#" class="pure-u-1-5">'+item.name+'</a></li>');
});
}
},
error: function () {
}
});
};
function getImg(){
$.ajax({
type: "get", //请求方式
url:"http://localhost:3000/info_img", //请求路径
//data:"id=655952&sum=3", //传参
//data:{"id":3,"sum":4},
dataType: 'json', //返回值类型
success: function (msg) {
if(msg.code == '200'){
$(".list-img").html('<a href="#"><img src='+msg.result+'></a>');
}
},
error: function () {
}
});
}
function getInput(){
var _input1 = $(".input1").val();
var _input2 = $(".input2").val();
var data= {
"name":_input1,
"content":_input2
};
$.ajax({
type: "POST", //请求方式
url:"http://localhost:3000/info2", //请求路径
data: data, //传参
dataType: 'json', //返回值类型
success: function (msg) {
var data = msg;
$.each(data, function (index,item) {
$(".list-hot ul").append('<li class="blog-title"><a href="#" class="pure-u-4-5">'+item.name+'</a><a href="#" class="pure-u-1-5">'+item.content+'</a></li>');
});
$(".input1,.input2").val('');
},
error: function () {
}
});
}
</script>