前端那些事儿
记录工作中总结的前端部分内容…
HTML
- 给HTML加注释
<!-- 侧边栏开始 -->
<div class="menu">
<div>
...
</div>
</div>
<!-- 侧边栏结束 -->
- 元素是可以写一些自定义属性的
<div id="test_id" my-id="something-useful"></div>
CSS
样式的定义不建议直接写内联样式
style，可维护性=0CSS样式的优先级（下面示例中网页中Talk is cheap, show me the code.实际会是什么颜色？）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python全栈之前端拾遗</title>
<style type="text/css">
/* 内部样式 */
h1 {
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<!--myStyle.css 中设置 h1{color:blue;}-->
</head>
<body>
<h1 style="color: red">Talk is cheap, show me the code.</h1>
</body>
</html>
一句话：离HTML标签最近的样式优先级最高。
- CSS选择器的权重（ICE公式和!important）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器权重示例</title>
<style type="text/css">
#test-id a {
/* 权值 = 100+1=101 */
color: blue;
}
#test-id .test-class a {
/* 权值 = 100+10+1=111 */
color: green;
}
#test-id p a {
/* 权值 = 100+1+1=102 */
color: red;
}
</style>
</head>
<body>
<div id="test-id">
<div class="test-class">
<p>
<a href="#">Talk is cheap, show me the code.</a>
<!-- 上面元素的字体颜色应该是权值最高的green -->
</p>
</div>
</div>
</body>
</html>
注意：
- 10个元素选择器的权重并不比1个class选择器大，即100 + 10 + 1 的权重大于100 + 0 + 11。
!important会覆盖其他的样式。建议参考：更多详情请点我
JavaScript
相等的判断务必使用’===’
==会自动转换数据类型再进行比较。
false == 0; // true
1 == "1" // true
===不自动转换数据类型，数据类型不一致，直接false；数据类型一致，继续比较。
false === 0; // false
1 === "1" . // false
- Array的sort()，会把数字转换成字符串再比较！！！
[10, 20, 1, 2].sort() // [1, 10, 2, 20]
- Array中是否含有某个元素的判断，Array中没有的元素indexOf()会返回
-1
[1, 10, 2, 20].indexOf(6) // -1
- 推荐阅读：你不知道的JS
Chrome调试
- 查看hover和focus伪类
- 查看margin和padding
- 查看当前元素的层级
- 动态调试CSS样式
- 如何展开被压缩的JS文件和CSS文件
- 一条命令让chrome变成所见即所得的编辑器
- 想知道更多点我
插件
jQuery
$("#id").data()
BootStrap
- 要使用BootStrap的栅格系统，需要注意：
- row必须放入container中
- column必须放入row中
- column中嵌套column，首先要把被嵌套的column放到row中
col-lg-*、col-md-*、col-xs-*和col-sm-*- Bootstrap中文教程
Alert类通知
示例：
SweetAlert AJAX提交成功（done）或失败（error）时分别提示不用的内容。
function deleteRecord(recordID) {
swal({
title: "确定要删除这个产品吗？",
text: "删除后可就无法恢复了。",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要删除！",
confirmButtonColor: "#ec6c62",
cancelButtonText: "容我三思"
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
type: "post",
url: "/delete/",
data: {"id": recordID},
success: function (data) {
var d_obj = $.parseJSON(data);
if (d_obj.code === "success") { //后端删除成功
swal("删除成功", d_obj.info, "success");
$("#p-" + recordID).remove() //删除页面中那一行数据
} else {
swal("出错啦。。。", d_obj.info, "error"); //后端删除失败
}
},
error: function () { // ajax请求失败
swal("啊哦。。。", "服务器走丢了。。。", "error");
}
})
});
}
其他推荐
DateTime Picker：时间插件
Flat UI：一套基于BootStrap的主题
LayoutIt! ：可视化布局
jQuery UI：基于jQuery的组件库
通知类消息
附
