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

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

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");
            }
        })
    });
}

其他推荐

通知类消息

前端代码规范