记录工作中总结的前端部分内容…

HTML

  • 给HTML加注释

    <!-- 侧边栏开始 -->
<div class="menu">
  <div>
    ...
  </div>
</div>
<!-- 侧边栏结束 -->

  • 元素是可以写一些自定义属性的

    <div id="test_id" my-id="something-useful"></div>

CSS

  • 样式的定义不建议直接写内联样式style，可维护性=0

  • CSS样式的优先级（下面示例中网页中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）

    ICE公式示例图

    <!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>

    ​

    注意：

    1. 10个元素选择器的权重并不比1个class选择器大，即100 + 10 + 1 的权重大于100 + 0 + 11。
    2. !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的栅格系统，需要注意：
    1. row必须放入container中
    2. column必须放入row中
    3. 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");
            }
        })
    });
}

其他推荐

通知类消息

附

前端代码规范

扫码关注微信公众号