1、a标签代替button使用(鼠标状态自动为小手:cursor设置鼠标状态),a标签清除样式 text-decoration: none;
a标签禁用方法:href="javascript:"、href="javascript:void(0)"、href="#"(此方法可回到顶部)
2、换行: 先设置宽度,然后使用 word-wrap: break-word,数字字母换行word-break:break-all;
不换行:white-space:nowrap
3、居中:使用 margin:0 auto; 或 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
内容居中:text-aline:center; 水平居中 line-height与height高度一致
4、ul使用前一定要清除样式 margin,padding都设为0;list-style:none;
5、当css样式中有:hover的伪类样式时,js中一般无法清除,此时可设置与:hove同样的样式,来实现覆盖。
6、特别注意定位与浮动的使用,当使用position:absolute与float时,元素自动转换为 内联块级元素(inline-block)
7、两个内联块级元素之间会有间隙(空的文本节点),可以通过将父级的字体font-size:0; 内联元素内重设字体大小实现消除;
或 直接写HTML时让两个标签紧邻:<input type="text" /><input type="text" />;
也可以通过浮动或定位实现。
8、尽量选择id选择器与class选择器,效率较高
9、同一件问题总有多种解决方案,多想些简单的方案
10、页面的跳转 :本页跳转刷新location.replace(location);选择地址 window.location.replace(URL)
11、有需要延时执行的内容,灵活使用定时器setTimeout(function(){},1000)
12、当有相同的元素需要共用时,一定要记得 初始化(清空内容)!
13、多使用console.log(); 与 alert() 进行元素与内容的审查有助于我们快速找出错误!
14、自定义的元素属性,赋予的值只能是字符串,对象或数组往往都无法获取内部的值,只能得到object;
使用自定义属性传值是非常实用与方便的;
15、使用ajax提交file(使用插件)时,要注意接收到的值的类型,dataType使用json可能无法获取到值,此时可以用dataType:"text";ajax接受返回的数据可使用var obj = eval("("+data+")")进行解析,也可直接使用JSON.parse();
16、点击空白处隐藏,target.closest()中是触发显示的元素
$(document).click(function (e) {
var target = $(e.target);
if (target.closest("#group-list").length === 0&&target.closest("#group-name").length === 0) {
$("#group-list").hide()
}
});
17、内容过多使用省略号表示,结合layer实现滑入显示内容弹窗
//css
.show-tip{
width:100px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
//js
$(".show-tip").on("mouseenter",function () {
var that=this;
var tip=$(this).text();
layer.tips(tip,that,{
tips:3
})
});