头：header

内容：content/container

尾：footer

导航：nav

侧边栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左中右：left center right

登录条：loginbar

标志：logo

版心：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinUS

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

1.什么是懒加载？
         当访问一个页面的时候，先把img元素背景图片路径替换成一张替代图片的路径（这样就只需请求一次，占位图），将图片的真实路径存储在img自定义属性中，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载？
       很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，提高首屏加载速度，可以减轻服务器压力，节约流量，用户体验好。
3.懒加载实现封装？

    lazyLoad由四个函数组成，init(初始化函数)，checkShow（判断图片是否加载），shouldShow（将要展示的图片），showImg（展示图片）。

（1）初始化函数(init)  由于滚动事件太消耗性能，所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。

                var timer;
                function init(){
                    $(window).on("scroll",function(){
                        if(timer){
                            clearTimeout(timer);
                        }
                        timer = setTimeout(function(){
                            checkShow();  //
                        },200);
                    });
                }

（2）判断”图片是否加载“（checkshow）函数，如果图片有isload属性，就说明图片已经加载过了，直接return。如果图片没有isload属性，进入将要展示图片shouldshow函数

                function checkShow(){
                    $lazyLoad.each(function(){
                        $cur = $(this);
                        if($cur.attr('isLoaded')){
                            return;
                        }
                        if(shouldShow($cur)){
                            showImg($cur);
                        }
                    });
                }

（3）将要展示图片shouldshow函数，获取屏幕可视宽度，滚动高度，要展示的元素到文档的高度，如果元素到文档的高度小于屏幕的可视高度加上滚动高度，说明元素已在可视区内，返回true，否则返回false。

               function shouldShow ($node){
                    var scrollH = $(window).scrollTop(),
                        windowH = $(window).height(),
                        top = $node.offset().top;
                    if(top < windowH + scrollH){
                        return true;
                    } else {
                        return false;
                    }

                }

（4）“展示图片”函数，将元素的src属性替换为自定义属性data-src(真正图片的地址)。

                function showImg ($node){
                    $node.find("img").attr("src",$node.data("src"));
                    $node.attr("isLoaded",true);
                }

（5）函数返回一个对象

              return {
                        init : init
           }

      这样就实现懒加载封装了！

            （offsetTop同理）

        offsetWidth（和offsetHeight）:

        其实就是一个元素的实际宽度 = width+padding+border

【client家族】

        clientWidth (和clientHeight) = width+padding

              该属性指的是元素的可视部分宽度和高度

              假如元素有padding有滚动，且滚动是显示的

              clientWidth = width + padding - 滚动轴宽度

       clientTop(和clientLeft):

             这一对属性是用来读取元素的border的宽度和高度的

             clientTop = border-top 的 border-width

             clientLeft = border-left 的 border-width

【scroll家族】

• event.clientX：设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条
• event.clientY：设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条
• vent.offsetX：设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
• event.offsetY：设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
• event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
• event.screenY设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
  

      此文为译文，在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧，熟知这些点，对我们深入研究CSS有很好的帮助。在本文中，用括号的方式加了一些简单的算是注释的个人理解。    原文地址：http://www.sitepoint.com/12-little-known-css-facts-the-sequel/

1、 border-radius属性可以使用'/'（斜杠）标签 

      不管你信不信，下边是有效的border-radius代码:

.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;

    }

    如果你之前没有见过这些，这里你可能会有一些困惑，所以这里有规范的解释:

   “如果斜杠/前后都设了值，那么斜杠前面的值就设定横向的圆角半径值，而斜杠后面的值就是设定纵向的半径值。如果没有斜杠的话，就把横向跟纵向的值设定为相等。”

图片注释：“border-top-left-radius: 55pt 25pt 的两个值定义了这个圆角的曲率（弯曲度） ”  所以，斜杠在值中的作用是让你创建不对称（横向跟纵向值）的圆角曲率

2、使用bolder、lighter相关关键字进行font-weight属性的定义

    正常来说你所看到的font-weight 属性的定义，它的值要么是normal要么是bold。你也偶尔能看到整数以整百为增量的值：100,200、、最大到900.
     然而，bolder跟lighter这两个值经常会被忘记。

         根据规范定义，这两个关键词指定了比继承值更粗或更细的值。它的出现会让你在处理一个比简单的‘bold’更粗一点或者比正常文本更细一点的多种权重的字号的时候表现的更加明显。（这块可能会有点难理解，其实这里是跟字体本身有关联的，如果你的字体，比如例子中用到的‘Exo 2’字体中，因为这个字体最细为100，bolder一下就变成400，再bolder一下是700，其实它这个bolder跟lighter是有个固定跳到的数值的，只会匹配到400,700,900这样的值里，当你的继承值为100、200或300，bolder一下，这个bolder的值都会是400，继承值为900,800，lighter一下，这个值都一样会是700，所以两个关键字其实是只会是400、700、900三个值的。）

3、关于outline-offset属性
    outline 属性由于它能够帮助调试而被众所周知（它不影响页面流）。规范上增加了一个outline-offset属性，它的作用完全跟它名字所表示的一样--让你定义它的外框线应该距离元素本身的偏移量。
    需要注意的就是，虽然outline属性是一个简写属性，但它不包含outline-offset属性，所以你每次都需要再单独定义outline-offset。

     outline-offset属性唯一的缺点就是，它在IE浏览器（即使是IE11）中不起效。

4、关于table-layout属性

    你可能会想，这是很老的信息了。我对display: table很熟悉，最早用来实现垂直居中的一种方法。但那不是我想说，注意我要说的是table-layout属性，而不是display属性。
    table-layout属性不像CSS的其他属性那样容易解释，所以我们还是先来看看规范是如何解释的：
    "根据这个算法，table的横向布局不依赖于单元格的内容；它仅仅依赖于表格的宽度、列的宽度以及边框和单元格的间距"
    这可能也是W3C规范史上第一次出现这样很难理解的东西

5、vertical-align属性用在表格跟非表格中的时候表现不一样
    如果你在2000年或者更早就开始接触网站编程，或者你处理过很多HTML电子邮件的话，那么你可能会认为vertical-align 属性是对老的HTML4中valign属性（一个在HTML5里过时的，不符合功能要求的标签）的一个标准升级。
    但在CSS中vertical-align 并不是起到那样的作用。除开表格，我认为这个属性更牛逼的地方并不在于表格中的表现。
    所以，这个属性被应用于常规的元素跟表格单元的时候有什么不一样的地方呢？
    当vertical-align 不是应用在表格单元的时候，它遵循下边这些基本规则：

• 它只在inline或inline-block元素中起效。
• 它对元素中的内容不起效，但能改变该元素相对于其他inline或inline-block元素的对齐。
• 它受文本/字体属性（比如行高line-height）或者相邻inline或inline-block元素的大小设置的影响。

6、伪元素::first-letter比你想象中更灵活

    伪元素::first-letter可以给元素的第一个字母定义样式，让你实现在印刷中多年前就有的段落效果（drop-cap 印刷的书本中经常能看到的段落中的第一个字比其他字号要大的效果）。
    有个好消息就是浏览器快要出一个关于元素的首字母构成的标准了。我最早在 Matt Andrews的twitter上看到有关这个推文，虽然他仅仅是发推文吐槽::first-letter选择器很糟糕。

7、你可以在HTML class列表中使用无效字符作为分隔符
    这个概念是Ben Everard在2013年的时候提出，而且我认为它值得推广一下。Ben的观点是用斜杠去将他的HTML类名进行分组，以便他的代码能够更好地阅读或浏览。他的观点认为，转义斜杠是一个无效字符，浏览器会无视它。
    所以你的HTML实例可能是这样的：

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent"> 使用斜杠后，变成这样： <div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent"> 你也可以使用任何字符（无效的或者空字符）去实现同样的效果： <div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">[/font]
<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">
 
<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">

8、动画重复的次数可以是带小数的值

   在写CSS关键帧动画的时候，你应该可以用animation-iteration-count 属性来定义动画重复执行的次数：

.example {
animation-iteration-count: 3;
}

     这个例子中的整数值将会让这个动画重复执行3次。但你可能不知道这里我们可以使用小数值：

.example {
animation-iteration-count: .5;
}

   在这个案例中，这个动画将执行半次（它会在第一次动画循环的中途停止）。

9、动画名称会在动画的简写方式中影响动画的使用
      有些开发者可能已经发现了这一点，在规范中对这个也有个提醒。比方说，你有以下的动画代码：

@keyframes reverse {
from {
left: 0;
}
  to {
left: 300px;
}
}
  .example {
animation: reverse 2s 1s;
}

    注意这里我使用reverse作为动画的名称。简单来看，这并没什么不妥，但要注意当我们在用上面的代码作为一个例子时发生了什么：
    这段动画并不起效，因为‘reverse’是animation-direction属性的一个关键字。任何的动画名称在匹配到一个简写语法中的关键字值的时候都会发生这样的情况。但在普通写法中这样的情况不会发生（animation-name这样单独的动画名称写法的时候）。
    动画命名在简写语法中包含了任何定时功能的关键字 （比如infinite, alternate, running, paused 等等）都会被阻断。

10、使用样式选取元素列表中元素的范围
    我不知道是谁首先这样用的，但我第一次是在Gunnar Bittersmann 的这个demo 中看到的。比如说有一个20个元素的有序列表，你想选择第7到14个元素。这里你可以使用一个选择器来实现：

ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;

}

    这个代码使用了链式结构的伪类表达式。虽然表达式有点难理解，但你可以通过表达式中的数字看到你想要选中的范围。
    更详细地解释这个工作的原理：在链式结构的第一部分，表达式为“选中第七个元素及后面的所有元素”。第二部分的意思是“选取第十四个元素及前面的所有元素”。但由于两部分是链接在一起的，每一个限制前一个的范围。所以链式结构的第二部分不允许第一部分超过第十四个元素，然而第一部分又不允许第二部分选取到第七个元素之前的元素。

11、伪元素也适用于一些空元素
    如果你跟我一样，尝试过把伪元素附加到一个图片或者表格input标签上。你会发现这样并不生效因为伪元素在非闭合元素上无效。我想很多开发者都认为空元素（即没有闭合标签的元素）都是这样的。但这并不正确。

12、有些属性值在选择器中是不区分大小写的
    这是一个不起眼的点，让他们通过下边的HTML来看：

<div class="box"></div>
<input type="email">

    你可以通过属性选择器来给他们两个添加样式，像这样：

div[class="box"] {
color: blue;
}
 
input[type="email"] {
border: solid 1px red;
}

    上面这样是没问题的，那下边这样呢？

div[class="BOX"] {
color: blue;
}
 
input[type="EMAIL"] {
border: solid 1px red;
}

    现在两个属性值都是大写的。在这个示例中，因为class 属性是区分大小写的，所以 .box 元素的样式不生效。而另外一个email的标签，却由于type 的属性值不区分大小写，所以它的样式能生效。这并非什么重大发现，只是一些你之前可能没留意到的。

   总结了工作中可能经常会用到的各类正则表达式的写法。
   方便以后进行查找，减少工作量。

   1. 校验基本日期格式

var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;

   2. 校验密码强度
   密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

var reg = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

   3. 校验中文 

   字符串仅能是中文。

var reg = /^[\\u4e00-\\u9fa5]{0,}$/; 4. 由数字、26个英文字母或下划线组成的字符串 var reg = /^\\w+$/; 5. 校验E-Mail 地址
同密码一样，下面是E-mail地址合规性的正则检查语句。 var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/; 6. 校验身份证号码
下面是身份证号码的正则校验。15 或 18位。
15位： var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/; 18位： var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/; 7. 校验日期
“yyyy-mm-dd” 格式的日期校验，已考虑平闰年。 var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; 8. 校验金额
金额校验，到2位小数。 var reg = /^[0-9]+(.[0-9]{2})?$/; 9. 校验手机号
下面是国内 13、15、18开头的手机号正则表达式。（可根据目前国内收集号扩展前两位开头号码） var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/;    10. 判断IE的版本
   IE目前还没被完全取代，很多页面还是需要做版本兼容，下面是IE版本检查的表达式。

var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;

      11. 校验IP-v4地址

var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;

     12. 校验IP-v6地址

var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

      13. 检查URL的前缀
   应用开发中很多时候需要区分请求是HTTPS还是HTTP，通过下面的表达式可以取出一个url的前缀然后再逻辑判断。

if (!s.match(
    /^[a-zA-Z]+:\/\//
  )) {
  s =
    'http://' +
    s;

}

      14. 提取URL链接
   下面的这个表达式可以筛选出一段文本中的URL。

var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;    15. 文件路径及扩展名校验
   验证 windows下文件路径和扩展名（下面的例子中为.txt文件）
var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;       16. 提取Color Hex Codes
   有时需要抽取网页中的颜色代码，可以使用下面的表达式。
var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; 17. 提取网页图片
   假若你想提取网页中所有图片信息，可以利用下面的表达式。
var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;    18. 提取页面超链接
   提取html中的超链接。

var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;

   19. 查找CSS属性
   通过下面的表达式，可以搜索到相匹配的CSS属性。

var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;

   20. 抽取注释
   如果你需要移除HMTL中的注释，可以使用如下的表达式。

var reg = /<!--(.*?)-->/;

• 设置禁用状态disabled，如：$(".js-example-disabled").prop("disabled",false);
• 默认值设置：$("#select2").val("1").trigger("change");
• 多选的默认值可以使用：$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
• select2还有丰富的自定义事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });

【select2的其他组件】

<div class="box1 div">

   <p>多选下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系统设置">

  <option value="1">用户管理</option>

  <option value="2">角色管理</option>

  <option value="3">部门管理</option>

  <option value="4">菜单管理</option>

  </optgroup>

  <optgroup label="订单管理">

  <option value="5">订单查询</option>

  <option value="6">订单导入</option>

  <option value="7">订单删除</option>

  <option value="8">订单撤销</option>

  </optgroup>

  <optgroup label="基础数据">

  <option value="9">基础数据维护</option>

  </optgroup>

  </select>

</div>

JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });

代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <option value="1">用户管理</option>
   <option value="2">角色管理</option>
   <option value="1">部门管理</option>
  <option value="1">菜单管理</option>
  </optgroup>
  <optgroup label="订单管理">
  <option value="1">订单查询</option>
  <option value="1">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</option>
  </optgroup>
      </select>
</div>

JS代码

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };

以下是 JavaScript 错误 Top 10：

       为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

       发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。
        我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

Javascript代码  

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
} 这里有两件重要的事情要实现：

• 组件的状态（例如 this.state）从 undefined 开始。
• 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。
  

       这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

Javascript代码

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

       在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。
        2. TypeError: ‘undefined’ is not an object
        这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测 试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

      3.TypeError: null is not an object
        这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===：  

       在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。
        任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。 所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。
        在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。 一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

Html代码

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error 
       当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 
        要获得真正的错误消息，请执行以下操作： 
        1. 发送 ‘Access-Control-Allow-Origin’ 头部 
        将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。 如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。 在这里看到更多。 
         这里有一些关于如何在各种环境中设置这个头文件的例子： 
         在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：
代码

       Header add Access-Control-Allow-Origin "*"  

       将 add_header 指令添加到提供 JavaScript 文件的位置块中：
代码

       location ~ ^/assets/ {  add_header Access-Control-Allow-Origin *;  }  

        将以下内容添加到您为 JavaScript 文件提供资源服务的后端： 

代码 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 

5. TypeError: Object doesn’t support property

       这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

       这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。 
        对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。 例如：如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法：
Javascript代码 

this.isAwesome();  

        Chrome，Firefox 和 Opera 会欣然接受这个语法。 另一方面 IE，不会。 因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

6. TypeError: ‘undefined’ is not a function
        当您调用未定义的函数时，这是 Chrome 中产生的错误。 您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。

       随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和关闭中的自引用范围也相应增加，这是这种/那种混淆的相当常见的来源。
       考虑这个代码片段：
Javascript代码

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。
一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：
Javascript代码 

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard(); 
  }, 0);

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }

一、什么是BFC
       BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
    中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念， 从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性,它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

二、如何触发 BFC

      上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
    满足下面任一条件的元素，会触发为 BFC ：
    1、浮动元素，float 除 none 以外的值
    2、绝对定位元素，position（absolute，fixed）
    3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
    4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC布局与普通文档流布局区别      
    普通文档流布局规则
    1.浮动的元素是不会被父级计算高度
    2.非浮动元素会覆盖浮动元素的位置
    3.margin会传递给父级
    4.两个相邻元素上下margin会重叠

    BFC布局规则
    1.浮动的元素会被父级计算高度（父级触发了BFC）
    2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
    3.margin不会传递给父级（父级触发了BFC）

    4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

   下面来说一下BFC的实际使用场景
   场景1：解决子盒子都浮动时 父盒子高度不参与计算问题
    <style>
      .far {
         border: 10px solid pink;
         width: 300px;
     }
      .child {
         border: 10px solid yellowgreen;
         width:100px;
         height: 100px;
         float: left;
    }
     .far{
         overflow: hidden;
    }
    </style>
    <body>
        <div class="far">
             <div class="child"></div>
             <div class="child"></div>
        </div>
    </body>

    根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。

    场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因

    <style>
    p {
        color: pink;
        background: #fcc;
        width: 200px;
        height:100px;
        text-align:center;
        margin: 100px;
    }
    </style>
    <body>
       <p></p>
       <p></p>
    </body>

    要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
    <style>
       .box {
          overflow: hidden;
       }
       p {
          background: green;
          width: 200px;
          height: 200px;
          margin: 100px;
      }
    </style>
    <body>
       <p></p>
       <div class="box">
           <p></p>
       </div>

    </body>

    场景3：实现左侧固定右侧自适应等类似布局
    <style>
        .out{
            border: 1px solid red;
            height: 200px;
        }
        .left{
            width: 200px;
            height: 150px;
            background-color: green;
            float: left;
        }
        .right{
            background-color: pink;
            height: 250px;
            overflow: hidden;
        }
      </style>
      <body>
     <div class="out">
        <div class="left"></div>
        <div class="right"></div>
      </div>

       单选框和复选框在网页表单中应用十分广泛，但是浏览器默认自带的单选框和复选框样式不仅不统一，而且大多都比较简单丑陋。本文给大家介绍了一些基于CSS3的个性化单选框和复选框，一些选中动画是基于jQuery的，你可以挑选喜欢的单选框和复选框应用到自己的网页中去，非常方便。

         1、jQuery超级个性化的单线框和复选框

       今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。

                   在线演示  源码下载

         2、CSS3漂亮的自定义Checkbox复选框 9款迷人样式

       今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。

                    在线演示  源码下载

        3、CSS3自定义美化复选框Checkbox组合

       今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox，每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果，非常不错的CSS3自定义美化checkbox组合。

                在线演示   源码下载

       4、jQuery实现美化版的单选框和复选框

       今天这款是利用jQuery实现的美化版单选框和复选框，样式风格非常简洁清爽，是一款很不错的jQuery按钮插件。

                          在线演示  源码下载

       5、纯CSS3 3D按钮 按钮酷似牛奶般剔透

       CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

                 在线演示  源码下载

        6、HTML5/CSS3开关按钮 立体3D按钮

        今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还可以。

                  在下演示  源码下载

         7、CSS3自定义发光Radiobox单选框

       今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画。

                   在线演示  源码下载

      8、CSS3实现自定义Checkbox动画

      今天我们要再来分享一款CSS3自定义checkbox，而且这款checkbox还带有动画效果，当你选中checkbox的时候，会以动画的方式打上一个大大的勾。

                   在线演示  源码下载

         以上就是8个非常个性化的CSS3单/复选框，希望对你有所帮助。

       本文链接：http://www.codeceo.com/article/10-personal-css3-radiobox-checkbox.html