前端
记录工作中总结的前端部分内容…
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.实际会是什么颜色？）
<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" />
head>
<body> <h1 style="color: red">Talk is cheap, show me the code.h1>
body>
html>一句话：离HTML标签最近的样式优先级最高。
CSS选择器的权重（ICE公式和!important）
<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> 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-*
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的组件库
评论 (0)