一、css的cursor属性

规定要显示的光标的类型(形状)
定义了鼠标指针放在一个元素边界范围内时所用的光标形状(CSS2.1没有定义由哪个边界确定这个范围)

url 需使用的自定义光标的 URL
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标
crosshair 光标呈现为十字线
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动(十字箭头)
e-resize 此光标指示矩形框的边缘可被向右（东）移动(横向箭头)
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东箭头）
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西箭头）
n-resize 此光标指示矩形框的边缘可被向上（北）移动(竖向箭头)
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东箭头)
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西箭头）
s-resize 此光标指示矩形框的边缘可被向下移动（南）(竖向箭头)
w-resize 此光标指示矩形框的边缘可被向左移动（西）(横向箭头)
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）

二、Math对象

地址:http://www.w3school.com.cn/jsref/jsref_obj_math.asp
Math对象用于执行数学任务
使用Math的属性和方法的语法:
var pi_value = Math.PI;
var sqrt_value = Math.sqrt(15);
Math对象并不像Date和String那样是对象的类,因此没有构造函数Math(),像Math.sin()这样的函数只是函数,不是某个对象的方法,无需创建,通过把Math作为对象使用就可以调用其所有属性和方法

1、Math对象的属性

E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414

2、Math对象方法

abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。

三、switch case

选择多个被执行的代码块之一

1、语法:

  1. switch(表达式) {
  2.      case n:
  3.         代码块
  4.         break;
  5.      case n:
  6.         代码块
  7.         break;
  8.      default:
  9.         默认代码块
  10. }

代码解释:
计算一次switch表达式,把表达式的值和每个case的值进行比较,如果存在匹配,则执行关联代码

2、栗子:

getDay()方法返回0到6之间的周名数字

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
}

(1)break关键词

如果JavaScript遇到break关键字,它会跳出switch代码块
如果找到匹配并完成任务,则随机中断执行(break)
break能够节省大量执行时间
不必中断switch代码块中的最后一个case,代码块会在此处自然结束

(2)default关键词

default关键词规定不存在case匹配时所运行的代码

switch (new Date().getDay()) {
    default: 
        text = "期待周末！";
         break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}

四、UUID

function getUuId() {
    var timestamp = new Date().getTime()
    return timestamp
}

if (self.data.uuid) {
   ELEMENTS[self.data.uuid] = self
} else {
   var uuid =  getUuId()
   self.data.uuid = uuid
   ELEMENTS[uuid] = self
}

五、事件

1、鼠标事件

事件 描述
click 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
dbclick 鼠标双击左键事件
mousedown 鼠标上的按钮被按下(左键或者右键)时触发
mouseup 鼠标按钮被释放弹起时触发
mouseover 鼠标移动到某对象范围的上方时触发的事件
mousemove 鼠标移动时触发事件
mouseout 当鼠标离开某对象范围时触发事件
mouseenter 鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不触发
mouseleave 鼠标移出元素范围内触发,该事件不冒泡,即鼠标移到其后代元素时不触发 
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }

mouseover和mouseenter区别
mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发
mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发

2、键盘事件

事件 描述
keypress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
keydown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
keyup 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 
<body>
    <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>

<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>

3、HTML事件

事件 描述
load 文档加载完成
select 被选中的的时候
change 内容被改变
focus 得到光标
resize 窗口尺寸变化
scroll 滚动条移动 
<body onload="loaded()">
    <div style="height: 3000px" ></div>
    <input type="text" id="name" onselect="mySelect(this.id)">
    <input type="text" id="name2" onchange="myChange(this.id)">
    <input type="text" id="name3" onfocus="myFocus()">
</body>

<script>
    window.onload = function () {
        console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
     alert("文档被关闭！");
     };*/
    /*打印选中的文本*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*内容被改变时*/
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*得到光标*/
    function myFocus() {
        console.log("得到光标！");
    }
    /*窗口尺寸变化*/
    window.onresize = function () {
        console.log("窗口变化！")
    };
    /*滚动条移动*/
    window.onscroll = function () {
        console.log("滚动");
    }
</script>

4、事件模型

<body>
    <!--脚本模型：行内绑定-->
    <button onclick="alert('hello')">hello</button>
    <!--内联模型-->
    <button onclick="showHello()">hello2</button>
    <!--动态绑定-->
    <button id="btn">hello3</button>
</body>

<script>
    function showHello() {
        alert("hello");
    }
    /*DOM0：同一个元素只能添加一个同类事件
     * 如果添加多个，后面的会把前面的覆盖掉*/
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("hello");
    };
    btn.onclick = function () {
        alert("hello world");
    };
    /*DOM2:可以给一个元素添加多个同类事件*/
    btn.addEventListener("click", function () {
        alert("hello1");
    });
    btn.addEventListener("click", function () {
        alert("hello2");
    });
    /*不同浏览器的兼容写法*/
    /*IE*/
    if (btn.attachEvent) {
        btn.attachEvent("onclick", function () {
            alert("hello3");
        });
    /*W3C*/
    } else {
        btn.addEventListener("click", function () {
            alert("hello4");
        })
    }
</script>

5、事件冒泡和获取

<head>
<style>
    #div1{
          width: 400px;
        height: 400px;
           background-color: #0dfaff;
  }
  #div2{
      width: 300px;
      height: 300px;
      background-color: #33ff66;
  }
  #div3{
      width: 200px;
      height: 200px;
      background-color: #fff24a;
  }
  #div4{
      width: 100px;
      height: 100px;
      background-color: #ff4968;
  }
</style>
 <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>
</body>

<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div4");
    },false);
</script>

阻止事件冒泡
event.stopPropagation();

6、阻止默认事件

<body>
    <a href="http://www.baidu.com" onclick="stop(event)">百度</a>
</body>

<script>
    function stop(event) {
        if (event.preventDefault()) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        alert("不跳转！")
    }
</script>

六、splice()方法

向/从数组中添加/删除项目,然后返回呗删除的项目
该方法会改变原始数组

<script type="text/javascript">

    var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"

    document.write(arr + "<br />")
    arr.splice(2,0,"William")
    document.write(arr + "<br />")

</script>

七、push()

可向数组的末尾添加一个或多个元素,并返回新的长度
返回值: 把指定的值添加到数组后的新长度
push()方法可以把它的参数顺序添加到arrayObject的尾部,它直接修改arrayObject,而不是创建一个新的数组

<script type="text/javascript">

    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"

    document.write(arr + "<br />")
    document.write(arr.push("James") + "<br />")
    document.write(arr)

</script>

八、typeof

js提供typeof运算符,用来检测一个变量的类型
typeof是一个运算符,有两种使用方式: typeof(表达式)和typeof变量名,第一种是对表达式做运算,第二种是对变量做运算

返回 值类型
console.log(typeof a) 未定义的变量或值
console.log(typeof(true)) 布尔类型的变量或值
console.log(typeof ‘123’) 字符串类型的变量或值
console.log(typeof 123) 数字类型的变量或值
console.log(typeof null) 对象类型的变量或值或者null
console.log(typeof(class c{})) 函数类型的变量或值

九、empty()

$("button").click(function(){
    $("div").empty();
});

empty() 方法从被选元素所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
提示：
如需移除元素，但保留数据和事件，请使用 detach() 方法。
如需移除元素及它的数据和事件，请使用 remove() 方法。

十、append()

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

append()方法在被选元素的结尾(仍然在内部)插入指定内容
提示:
append()和appendTo()方法执行的任务相同
不同之处在于内容的位置和选择器

1、$(selector).append(content)

content: 必需,规定要插入的内容（可包含 HTML 标签）

2、$(selector).append(function(index,html))

function(index,html): 必需,规定返回待插入内容的函数
index: 可选,接收选择器的index位置
html: 可选,接收选择器的当前html

十一、document对象方法

方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

具体可点击蓝色字体进入W3school详细了解

十二、form.render()

https://www.layui.com/doc/modules/form.html