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;
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;
480px;
background: #FFFFFF;
border: 5px solid #ccc;
line-height: 20px;
margin: 0;
处于同一个父元素之下。
3.JS里面一些事件里,window自带的变量里,IE6没有相关,要判断。
13.多行文字垂直居中
将多行文字放在一个block里,设置一致的padding-top和padding-bottom。