JS核心知识

JS基础语法

JS是一门弱类型语言

基本数据类型:
    1.数值 Number
    2.字符串 String
    3.布尔类型 boolean
    4.空对象 null
    5.未定义类型 undefined
js声明变量都用var关键字
    书写规范:可以使用驼峰命名方法
        1.数字 字母 下划线 $组合
        2.不能以数字开头
        3.不能是关键字h和保留字
        4.区分大小写
JS里面的变量只分为函数内部的局部变量和函数外面的全局变量

匿名函数:
    var fn = function () {
            console.log("我是匿名函数");
        };
    fn();
    // 匿名函数自执行
    (function () {
        console.log("我是匿名函数");
    })();
    (function () {
        console.log("我是匿名函数");
    }());

js的引入:
    1.内部引入
        <script type="text/javascript"></script>
    2.外部引入
        <script type="text/javascript" src="index.js"></script>

简单的DOM操作

获取标签的方法:
    1.document.getElementById
        通过Id名获取标签，获取到的是一个标签
    2.document.getElementsByClassName
        通过类名获取标签，获取到的是一组标签
    3.document.getElementsByTagName
        通过标签名获取标签,获取到的也是一组标签
修改样式:获取到的标签.style.css属性(属性去掉-小驼峰写法)

获取、修改内容:
    innerHTML可以解析字符串里面的标签
    innerText不能解析 可以写留言板
    innerHTML / Text 常用于普通标签div span 修改/获取元素的内容
    value 常用于输入框 input/text/password 获取/修改内容

创建元素: document.createElement
添加元素: 
    body.appendChild(newDiv); body最后面添加
    body.insertBefore(newDiv,box); 把newDiv插入到box前面
删除元素:
    body.removeChild(box);
    box.remove();

尺寸:
    offsetWidth:可以返回对象的padding+border+width属性值之和
    clientWidth:是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变
    scrollHeight:滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）

相对于定位父级的一个位置:offsetTop offsetLeft

scrollTop 子元素滚动上去的一段距离
除了scrollTop(可设置属性)之外 以上属性都是只读的

定时器

一次性定时器 延时器:setTimeout
循环定时器: setInterval

清除定时器:
    clearTimeout
    clearInterval

事件名称

鼠标事件:
    鼠标在移动的时候触发 onmousemove
    单击事件 onclick
    双击事件 ondblclick
    鼠标按下事件 onmousedown
    鼠标抬起事件 onmouseup
    鼠标右击事件 oncontextmenu
    over移入事件 onmouseover
    out移出事件 onmouseout
    enter移入事件 onmouseenter
    leave移出事件 onmouseleave
over/out 会在鼠标从redDiv的父级移到子级的时候触发 先触发 out 再触发over
leave/enter 从父级到子级不会触发 只有鼠标离开整个redDiv 的时候 才会触发

键盘事件:
    down键盘按下 onkeydown
    press键盘按下 onkeypress
    onkeyup 键盘抬起事件

表单:
    onchange内容发生变化之后触发 onchange
    input内容发生变化之后触发 oninput
    聚焦 onfocus
    失焦 onblur
给form表单绑定事件:
    reg.onsubmit = function(){
    console.log("提交")
    }
    reg.onreset = function(){
        console.log("重置")
    }

window事件:
    窗口尺寸发生变化的时候 onresize
    窗口内容滚动的时候触发 onscroll
    窗口加载完毕之后触发 onload

阻止默认事件:
    1.ev.preventDefault();
    2.ev.returnValue = false;
    2.return false;

事件对象

当事件发生时会产生事件对象，事件对象的作用是用来记录“事件发生是一些相关的信息。
注意事件对象只有在事件发生时才会产生，我们无法手动创建
并且事件对象只能在处理函数内部访问，处理函数允许结束后该对象自动销毁。

如何获取事件对象?
    var e = event || window.event;
    这句话就是定义了一个变量来获取事件对象，因为不同的浏览器获取事件对象的方法有点不太一样，
    IE下是window.event，标准下是event，为了兼容所以写了event || window.event.

JS对象

日期对象: Date
例如:
    var date = new Date("2018-1-2");
    var date1 = new Date("2018-1-1");
    console.log(date);
    //两个日期相减得到是时间差 单位是毫秒
    var res = date - date1;
    console.log(res/1000/3600/24 +1)
获取/设置:getFullYear() setFullYear()

数组对象:
    创建数组
        var arr1 = [1, 2, 3]
        var arr2 = new Array(); // 空数组
        var arr3 = new Array(5); // 长度为5
        var arr4 = new Array("8"); // ["8"]
        var arr5 = new Array(4, 5); // [4, 5]

方法:
    push/pop 对数组末尾添加/删除元素
    unshift/shift  对数组的首位添加/删除元素
    reverse 数组反转
    join 把数组转为字符串
    sort 排序
    splice splice(index,length,item1,item2....itemN)
    用后面的item覆盖前面的index和length组成的范围

数学对象:
    属性:
        PI / E / LOG2E LOG10E
    方法:
        返回数的绝对值 abs(x)
        返回数的平方根 sqrt(x)
        返回 0 ~ 1 之间的随机数 random()
        把数四舍五入为最接近的整数 round(x)

字符串对象:
    属性:
        字符串的长度 length
        允许您向对象添加属性和方法 prototype
        对创建该对象的函数的引用 constructor
    方法:
        返回在指定位置的字符 charAt
        检索字符串 indexOf
        替换与正则表达式匹配的子串 replace
        检索与正则表达式相匹配的值 search
        从起始索引号提取字符串中指定数目的字符 subStr
        提取字符串中两个指定的索引号之间的字符 subString
        把字符串分割为字符串数组 split
        从字符编码创建一个字符串 fromCharCode
        提取字符串的片断，并在新的字符串中返回被提取的部分 slice

正则表达式:
    // reg = /正则部分(定义的规则)/正则的属性
    // g 全局匹配 i是否区分大小写
    var reg = /test/gi
    var str = "hellotesthowTESTareyoutest";
    console.log(str.match(reg));

    // \d 代表数字
    var reg2 = /\d/g;
    var str2 = "dasdasdas543667623sadjklasda465sadf45das2sd11"
    console.log(str2.match(reg2))

    // \w 单词字符 数字 字母 下划线
    var reg3 = /\w/g;
    var str3 = "dsfdasASDA12132_+-/*~!~@@#@#$@%#%^&%*&)*(##{}=";
    console.log(str3.match(reg3))

    // . 匹配任意字符 (除去换行符 \n)
    var reg4 = /./g;
    var str4 = "dsfdasASDA12132_+-/    *~!~@@#@#$@%sd%   ^&%*&)*(##{}=";
    console.log(str4.match(reg4));

    // \s 匹配空格字符
    var reg5 = /\s/g;
    console.log(str4.match(reg5))

    // 量词
    var reg6 = /\d{1,3}/g;
    var str6 = "456465fd1sf45641"
    console.log(str6.match(reg6))

    // 方括号
    // 2,3,4,6里面的任何一个
    var reg7 = /[2-46]{2}/g
    var str7 = "6564676468746546876456465411123668746"
    console.log(str7.match(reg7));
    // 除去123以外的字符
    var reg8 = /[^123]/g
    var str8 = "1234516273890";
    console.log(str8.match(reg8));

    // 小括号
    var reg9 = /(34)|(32)/g
    var str9 = "3486513248672486861854487468686986546879"
    console.log(str9.match(reg9))


    // 开头和结尾
    var reg10 = /^34$/g
    var str10 = "34456453435456434"
    console.log(str10.match(reg10))

    // 11位 纯数字 1开头
    var reg11 = /^1(3[01379])\d{8}$/g
    var str11 = "12745926338"
    console.log(str11.match(reg11))