一次项目总结，内容设置页面

1.如果前端页面是增删查改这种需求，采用MVC思想开发。

MVC，基本思想是，Model层发生变化，就通知View层；View层发生变化，就通知Model层；Control层就是设置变化入口。

Model处理，View处理要隔离开。

用js对象进行变量和函数分类。

 

2.后台数据放入前台html页面里面，会发生html编码。

要进行解码，如果用jquery，可用$("<div/>").html(json_string).text()

 

3.最简单的异步图片上传

构造一个隐藏的iframe，和一个隐藏的input type="file"的html元素，把图片上传的表单指向它。

用iframe的load事件，来监听图片上传返回的信息。

再根据后台返回的信息，进行判断数据上传成功与否。

 

4.离开页面判断内容是否修改过

window.onbeforeunload = function(event){
if(condition){
event.returnValue = "内容已发生修改，确定不保存而离开页面吗？";
return "内容已发生修改，确定不保存而离开页面吗？";
}
}

 

5.弹窗制作

一个半透明黑色背景，一个框z-index大于半透明黑色背景。

 

6.用jQuery绑定某个元素的点击事件，某个元素的点击事件里面又绑定其它事件。

问题：点击几次，点击事件里绑定的其它事件，也就执行几次。

解决：用jQuery的unbind方法。

 

7.json比较

将json字符串化进行比较两者不同。

 

8.js对象复制

$.extend(true, {},被复制的对象);//使用jquery库

 

9.用jquery设置获取textarea的值

请用$(textarea的id).val()

 

10.页面布局的时候，先作好脑图，确定存在哪些元素。然后写出所有静态元素。

 

11.写页面交互的时候，先做好脑图。

 

12.IE6兼容性

IE6这东西，实在不想说她。杀精的。

1.inline-block兼容

*zoom:1;
*display:inline;
display: inline-block;

2.遮罩层兼容

overflow: hidden;
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
display: none;
visibility: visible;
background-color:#000;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 100;

浮于遮罩层上

top: 20%;
left: 33%;
display: none;
visibility: visible;
position: absolute;
z-index: 1000;
width: 480px;
background: #FFFFFF;
border: 5px solid #ccc;
line-height: 20px;
margin: 0;

处于同一个父元素之下。

3.JS里面一些事件里，window自带的变量里，IE6没有相关，要判断。

 

13.多行文字垂直居中

将多行文字放在一个block里，设置一致的padding-top和padding-bottom。