js2笔记

10.String对象
    拼接字符串：
        1)+号
        2)str.concat("world",['oh','nice']):把多个自己的参数(参数没有个数限制)添加到指定字符串的尾部
    
    字符串查找：
           1)str.charAt(n):返回字符串中下标为n的字符，参数是0 - str.length中间  如果不在，那么返回空字符串
        2)str.indexOf("a",3)和str.lastIndexOf("a",3)：根据参数字符串，返回执行字符串出现的下标
                       两个方法都有两个参数，第一个参数是查找的目标字符串，第二个参数是 查找的起始位置
                       如果查找不到则返回 -1
        
        3)str.search(/[a-zA-Z]/g):和indexOf是基本一样的，但是indexOf只能检测固定字符串，而search可以传入正则
               search查找符合传入参数的规定的字符串 第一次出现的位置下标
        
        4)str.match(/[a-zA-Z]/g):能找出所有的匹配的字符串，然后以数组的形式返回出来，如果没有 则返回null
        
    截取字符串：
        1)str.substr(4,5)：能够指定长度来截取字符串，两个参数，一个是起始下标 一个是长度，如果只有一个参数，那么代表直接截取到字符串的末尾（ECMA不推荐）
        
        2)str.substring(4,8)：根据起始下标截取字符串，包含起始，不包含结束
        
        3)str.slice(4,8)：它能截取字符串指定的区段的元素,有两个参数，分别代表区段起始的下标（包含）和 结束的下标（不包含）
                    如果值传递一个参数，在直接截取到数组的末尾
                    如果第二个参数是负数那就倒着数,返回一个不再截取范围内的字符串
        
    字符串的大小写转换:
        str.toLowerCase(): 转成小写字母
        
        str.toUpperCase(): 转成大写字母
        
    字符串转数组：
        str.split(','): 第一个参数可以根据指定的分隔符，把字符串转成数组
                   第二个参数，代表数组的最大长度
                   如果split没有指定任何分割符  把整个字符串当成数组的一个值
                   如果split指定的是一个空字符串作为分隔符，每一个字符串的值都被当做数组的值
                   
    前后去空格：
        str.trim():用来把字符串首部的和尾部空字符或行终止符等等去掉
                 经常用在表单验证
                 
    替换：
        str.replace("a","b"):参数1要被替换的字符串，参数2替换的新字符串    
    补零:
        str.padStart(2, 0):不够两位向前补0
    重复字符:
        str.repeat(2):复制str两份返回
        
11.Math对象：
    JS的内置对象，提供了一系列数学常数和数学方法，因为Math对象只提供了静态的属性和方法，所以使用的时候不需要实例化

    属性：
        PI：圆周率
        E：自然底数
        LN2： 2的自然对数
        SQRT2:2的平方根
        SQRT1/2:二分之一的平方根
        
     方法：
         Math.max(45, 32, 45, 65)和Math.min(45, 32, 45, 65):  求一组数字中的最大值和最小值
         
         Math.random():生成一个 [0,1) 之间的随机数    
             Math.floor(Math.random() * （b-a） + a)
        
        Math.ceil(3.1):向上取整  向大数取整
        
        Math.floor(3.1):向下取整  向小数取整
        
        Math.round(3.1):四舍五入
                   正数：小数点后大于等于5 则整数部分加1，小于5 整数部分不变
                   负数：小数点后大于5  整数部分减1
                          小于5  整数部分不变
                          等于5 如果小数点拥有后一位，则减1  如果没有后1位 则不变
        
        Math.abs(3.1):绝对值 对非纯数字的字符串转成NaN   
        
        Math.sin(30 * Math.PI / 0),Math.cos(),Math.tan()  求一个角度的 正弦 余弦  正切  接受的参数必须是弧度(1度的弧度 ：Math.PI / 180)
        
        Math.sqrt(4):求一个值的平方根
        
        Math.pow(2,2):两个数，第一个参数是底数  第二个参数是幂
        
        Math.atan2(a,b):求正切角度，得到的是弧度         特别点：a是临边，b是对边
        
12.Date对象
    创建一个时间对象：
    1)new Date():没有传入参数，获取当前的时间    Thu Jan 09 2020 16:16:09 GMT+0800 (中国标准时间)
    2)new Date(1000):传入一个毫秒数参数，计算把这个毫秒数加在1970年1月1号8:00  然后计算设置的时间
    3)new Date("2019-12-25 00:00:00"):传入一个时间的字符串参数  格式  XXXX-XX-XX XX:XX:XX
    4)new Date(2020,9,1,0,0,0):传入多个参数 分别代表各个时间  年月日时分秒毫秒      设置月份是 0-11 代表1-12月
    
    获取时间：
           获取年：getFullYear()
           获取月：getMonth()
           获取日：getDate()
           获取小时：getHours()
           获取分钟：getMinutes()
           获取秒：getSeconds()
           获取毫秒：getMilliseconds()
           获取星期：getDay()  0是周日 1是周一
           获取时间戳：getTime()  获取当前时间距离1970年1月1日的毫秒数
               全部无参数,时间对象调用
           
    设置时间：
        设置年：setFullYear(2010)
        设置月：setMonth(4)
        设置日：setDate(12)
        设置时：setHours(12)
        设置分：setMinutes(12)
        设置秒：setSeconds(12)
        设置毫秒：setMilliseconds(888)
            时间对象调用
        
    获取时间戳：
    1)getTime()
        new Date().getTime()
    2)valueOf() 获取对象的原始值
        new Date().valueOf()
    3)Date.now()
    4)将时间对象转换成数字类型
    
    获取代码执行时间:
        1)new Date().getTime():执行前获取一个时间,执行后获取一个时间,两个时间相减就是时差
        2)console.time() 需要传递一个参数，代表这个计时的名称 
             console.time("name");
            console.timeEnd("name") 需要传递一个参数，直接得到差值
            console.timeEnd("name");

13.arguments对象：
        可以获取到函数的实参
        
    属性：
        arguments.length：获取长度
        
    方法：
        arguments.callee():可以调用自身函数
        
14.JSON对象:
        字符串格式的数组和对象
        
    方法：
        1. JSON.stringify(obj/arr,null,2) js对象(数组)转换为json对象(数组),2代表打印出来的数据保留两个缩进
            JSON.stringify({})-->'{}'
            JSON.stringify(null)-->'null'
            JSON.stringify(undefind)-->'undefind'
            JSON.stringify()-->'undefind'
            
        2. JSON.parse(json) json对象(数组)转换为js对象(数组)
        
15.classList对象:
    保存着控制当前元素类名的各个方法和属性
    
    属性：
        oCon.length：返回类名的个数
        
    方法：
         oCon.classList.add("red")：在原有的类名基础上添加一个类名
        
        oCon.classList.remove("con")：在原有的类名基础上 移出某一个类名
        
        oCon.classList.item(0)：根据索引 获取类名
        oCon.classList.contains("con")： 判断元素是否包含某一个类名
        oCon.classList.toggle("blue")：如果有这个类名 则删除这个类名，如果没有 则添加减去
        
16.event对象：
    是由事件自动创建的，记录了当前事件的状态，比如事件发生的源节点、键盘的相应状态、鼠标的信息等等
    
    获得event对象：
        在DOM规范中，event事件对象被传递给了事件函数，也就是事件函数的第一个参数就是事件对象
        在IE低版本中，event事件对象被保存在了window对象中
        
    兼容性写法：
        var e = e || window.event;
        
    属性：
        bubbles：返回布尔值，判断是否属于冒泡类型的
        cancelable ：返回布尔值，判断当前的事件是否支持默认事件，支持则返回true
        target：返回事件的源节点
        type:判断事件类型
        
        
    event对象的鼠标定位值:
        e.clientX:以浏览器窗口左上角为原点，计算X的位置，  clientY类似(全兼容)
        e.offsetX：到最内层元素的距离（全兼容）
        e.pageX：以document对象（文档的）左上角为原点  计算位置(IE 8及以下不兼容)
        e.screenX：以屏幕的左上角为原点计算位置 （全兼容）
        
    方法：
        e.stopPropagation()：阻止当前元素的事件 向上或下继续传播，只能阻止掉相同的事件
            在现代浏览器中：
                使用 event.stopPropagation()     
                
            在老的IE中：
                使用event.cancelBubble = true;
        e.stopImmediatePropagation():只执行元素当前事件，其它事件不执行，同时也阻止事件传播
                
        e.preventDefault()：通知浏览器不要执行与事件相关联的默认动作（比如：右菜单）
            在现代浏览器中：
               event.preventDefault();
                   或return false;
            在IE低版本中：
            
               event.returnValue = false;
               
    键盘事件的event对象：
        属性：
            e.keyCode：对应键位的键码
            e.shiftKey、ctrlKey、altKey  判断用户是否按下shift ctrl alt键
            e.key:当前按键的符号（字符串）
            
    事件委托：
        委托就是把目标节点的事件绑定到祖先元素上
         oCon.onclick = function (e) {
            var e = e || window.event;
            if (e.target.nodeName.toLowerCase() == "li")
            e.target.style.background = "red";
        }
17.表单对象    
    oUser.focus()：让表单获取焦点
    oUser.blur()：让表单失去焦点
    oForm.submit()： 提交表单
                   
17.Object对象
    Object.values(person)：取对象的值组成数组，并返回一个数组
    Object.keys(person)：取对象的键组成数组并返回一个数组
    Object.entries(person)：对象转数组，数组的每一个元素是一个数组包含键名和键值
    Object.assign(target,obj1,obj2)：将多个对象的属性合并到目标对象target上，并返回target对象
        深拷贝：
            //合并obj1、obj2和obj3形成新的obj1
            Object.assign(obj1,obj2,obj3)
    Object.create(obj2）：创建对象obj1继承了obj2的属性和方法
        var obj1 = Object.create(obj2）
    Object.defineProperty(obj,'pro',{})：添加单个属性
        参数1: 添加属性的对象
        参数2: 要添加的属性名字,字符串的类型
        参数3: 配置对象
        const person = {
          firstName: '东方', // 姓氏
          lastName: '不败' // 名字
        }
        Object.defineProperty(person, 'fullName', {
          configurable: false, // 默认值是false,表示的是该属性是否可以被修改(删除)
          enumerable: false, // 默认值是false,表示的是该属性是否可以被枚举(遍历)
          //value:'哈_哈', // 该属性的默认值
          //writable:false, // 默认值是false,表示的是该属性的值是可以被修改
          // 要使用get()和set()就不能设置默认值和writable
          get() {
            // 获取firstName和lastName的值给fullName属性
            return this.firstName + '_' + this.lastName
          },
          set(val) {
            // val是fullName属性值，获取fullName属性值设置给firstName和lastName
            const name = val.split('_')
            this.firstName = name[0]
            this.lastName = name[1]
          }
        })
    Object.defineProperties(obj,description)：添加多个对象属性
    Object.getOwnPropertyDescriptor(obj, "like"):获取对象属性的描述符，返回一个对象
                {value: "唱跳rap篮球@", writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyNames(obj):获取对象属性名组成的数组，继承的属性不获取
    Object.prototype.hasOwnProperty.call(obj,"name"):判断自身上是否有name属性（直接属性，不是原型上的属性）
        可以简写obj.hasOwnProperty("name")
    补充:
        1.判断空对象的方法
            JSON.stringify({})-->'{}'
    
18.正则表达式:
             一些具有特殊意义的符号组合成的一个表达式
     * 主要的作用:匹配字符串的,表单验证
     * 
     * 正则表达式是用元字符组合成的
          元字符: 元字符和限定符
          
       元字符:
       .    除了\n以外任意的单个字符   'hello a '
       []   范围和干掉原有的意义  [0-9]   '今天好开心啊,hello 98362?'   [.]  就是普通的点,
            [a-z] 所有的小写字母    [A-Z]  所有的大写字母    [a-zA-Z] [a-zA-Z0-9]
    
        ()  提升优先级及分组
          [3-8]([.][a-z])  3到8之间任意的一个数字后面是一个.后面是一个小写字母
          分组:   (([a-zA-Z0-9_.-])([@]))  有三组, 每一对括号都是一组,将来是用来替换操作的,从最左边的(计算
    
        |  或者     ^(([0-9])|([A-Z]))$    '3D'  
    
        ^  以什么开始     ^[0-9] '23fsfsdfds'    [^0-9] 取反   [^a-z]
        $  以什么结束     
    
        限定符:一般都是限定次数的
        {5}  表示的是:当前这个式子前面的表达式出现了5次    [1-5][a-d]{0}
        {0,5} 表示的是: 当前这个式子前面的表达式出现了0次到5次   ^([1-6]{1,5})$  '345678'
          通配符-----限定符----元字符
        *  表示的是:当前这个式子前面的表达式出现了0次到多次 {0,}    [*] 就是*
        ?  表示的是:当前这个式子前面的表达式出现了0次到1次  {0,1}   [?]  就是?
        +  表示的是:当前这个式子前面的表达式出现了1次到多次    {1,}  [+] 就是+     [.] 就是点 [^] [@]
        /b(?=a)/g:匹配a前面的b
             正则表达式中的小括号"()"。是代表分组的意思。 如果再其后面出现\1则是代表与第一个小括号中要匹配的内容相同。
    
        
    
        \d   数字中的任意一个     [0-9]
    
        \D    非数字中的任意一个   [^0-9]
    
        \s    空白符中的任意一个                          
        \S    非空白符中的任意一个 
        \w    非特殊符号   sfdsf 12313212   _
        \W    特殊符号    $$##@
    
    
        \b 单词边界  'hello world'  'dadasdas dasdasdasd'
        \B 非单词边界  'hello world'  'dadasdas dasdasdasd'
    
        方法：
            1）reg.test(str)：用来匹配是否成功的，匹配上了放回true,没有则false
            2）reg.exec(str)：对字符串进行查找，每次调用只会查找一次，查找到1个以后，便停止查找然后把小标移到查找元素的后一位。
                            返回查找到信息的相关数组  ["110", index: 9, input: "报警的电话号码是:110,119,120", groups: undefined]
            3）str.search(/[a-zA-Z]/g):search可以传入正则,查找符合传入参数的规定的字符串 第一次出现的位置下标
            4)str.match(/[a-zA-Z]/g):能找出所有的匹配的字符串，然后以数组的形式返回出来，如果没有 则返回null
            5）str.split(reg)：以98362为分隔符分割字符串组成数组
                        var str = '今天晚上9真是开心的日期8然而3真的是6哈哈2真有意思'
                        var reg = /\d/g
                        // 截取后产生的是一个数组
                        str = str.split(reg)
        
        身份证号码的正则表达式
    
      (\d{17}[xX])|(\d{18})
    
       ([1-9][0-9]{16}([0-9]|[xX]))|([1-9][0-9]{17})  身份证号码
       ([1-9][0-9]{16})(([0-9])|([xX])) 身份证号码
    
        邮箱的正则:  
    
        younghongbo_1-2.3@fd12-_.6.com.cn  邮箱
    
        [a-zA-Z0-9_.-]+[@][a-zA-Z0-9_.-]+([.][a-zA-Z]+){1,2}

19.DOM元素属性
    属性：
     获取元素大小
     1)offsetWidth和offsetHeight：获取元素的宽高(content+padding+border)
     2)clientWidth和clientHeight：获取元素的宽高(content+padding)
     3)scrollWidth和scrollHeight:获取元素的可以滚动的宽度（包含的内容的完全的宽度 + 自身的padding）
     4)获取窗口的大小：
         怪异模式下，body是顶层的可视元素，所以在怪异模式下获取窗口的大小是document.body.clientWidth,document.body.clientHeight
         标准模式下，html是顶层的可视元素，所以在标准模式下获取窗口的小是document.documentElement.clientWidth，document.documentElement.clientHeight
         补充：
         window.innerWidth;        //浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
        window.innerHeight;   //浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。        
        document.documentElement.clientWidth;   //浏览器视口（viewport）宽度（单位：像素），不包含垂直滚动条
        document.documentElement.clientHeight   //浏览器视口（viewport）高度（单位：像素），不包含水平滚动条
         兼容性写法（必写兼容）：
           document.documentElement.clientWidth||document.body.clientWidth
    5)获取文档的大小
           兼容性写法：
           document.documentElement.offsetWidth||document.body.offsetWidth
    获取元素位置：
        1)offsetLeft和offsetTop：以最近的定位父级为参考的上、左偏移位置,如果元素没有定位，则获取父级的偏移值
        2)clientLeft和clientTop:获取左边框和上边框的大小
        3)scrollLeft和scrollTop:读写向左或向上滚动条已经滚过的距离
             获取浏览器窗口的滚动条的值
                  window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop
    
               设置窗口滚动条的值
                   window.scrollTo(x,y)可以定义滚动条的位置
                   其中x是在水平的偏移   y是垂直的偏移
        4)getBoundingClientRect（）：获取某个元素距离窗口的距离，返回一个对象有left top  right  bottom属性
    *                               left:元素的左边到窗口左边的距离
    *                               top:元素的上边到窗口上边的距离
    *                               bottom:元素的下边到窗口上边的距离
    *                               right:元素的右边到窗口左边的距离
    *
    *                               height/width:  获取当前元素的宽高，IE9+ 兼容
            
               
    节点：
        在网页中所有的对象和内容都被称作为节点。比如元素、文本、属性等等,节点是DOM最基本的组成部分。
        
    常见的节点：
    *                               节点类型        节点的名称            节点的值    
    *       Element  元素节点            1            大写标签名P/LI         null
    *       Attr     属性节点                 2            属性名                属性值
    *       Text     文本节点            3            #text                文本内容
    *       documentFragment  文档片段节点   11
        
    节点属性：
    nodeType：  获取节点的类型
    nodeName：  节点的名称
    nodeValue：  节点的值
    
    节点关系：
         节点的关系包含两种：上下父子关系  相邻兄弟关系
         
    访问元素节点属性:
    *   oCon.children:获取元素所有的子代元素节点(得到的是集合，只有DOM元素)
            使用中括号语法 或者是 item()方法可以获取其中的某一个节点
        oCon.childNodes：获取所有的子代元素节点（包含文本注释），得到节点的集合 NodeList类型
            使用中括号语法 或者是 item()方法可以获取其中的某一个节点
    *
    *   oCon.parentNode：获取元素的父节点
        oCon.offsetParent：获取一个元素最近的定位父级 返回的是定位父级这个元素
        
        oCon.nextElementSibling：获取下一个兄弟元素
        oCon.previousElementSibling：获取上一个兄弟元素
        oCon.firstElementChild：获取第一个子元素
        oCon.lastElementChild：获取最后一个子元素
    
    *   previousSibling，nextSibling，firstChild，lastChild：在IE8及以下获取的是元素节点，在IE9+获取的是节点
    
    节点操作：
        document.createElement("li"):能够根据参数指定的标签名创建一个新的元素，并返回新元素的引用
        document.createTextNode("you 这谁呀 怎么这么帅"):创建文本节点, 参数是一个字符串
        oCon.appendChild(oBox):父级元素调用，可以向当前节点的子节点列表的末尾添加一个新的节点,如果插入的是文档中已经有的节点，则把该节点先删除，然后插入新位置
    *           该方法返回被插入的元素
        insertBefore(newChild,oldChild):可以在已有的节点之前插入一个节点,newChild代表被插入的节点，oldChild代表指定插入节点的后边兄弟节点如果插入的是文档中已经有的节点，则把该节点先删除，然后插入新位置,该方法返回被插入的元素
        oCon.cloneNode(true):可以创建一个节点的副本,参数是一个布尔值，true代表克隆整个节点和里边的内容，false代表只克隆当前节点
        oCon.replaceChild(new,old)  父级元素调用，将一个新节点去替换旧节点,替换的是当前节点及所以子节点,返回的是 被替换的节点 
        oCon.removeChild(ele)：父级元素调用，可以从子元素列表删除某一个节点,返回被删除的元素
        

    元素内容的读取与写入属性:
        innerHTML：获取元素所有包含的子节点及对应的HTML字符串，可以用来设置标签内容，可以识别标签字符串
        outerHTML：与innerHTML一样，但是outerHTML会设置元素自身
        innerText(textContent)：获取元素内容，获取元素内容的时候，只能获取到文本节点，元素节点将被忽略
        outerText：和innerText类似，只不过会包含设置的元素自身
        

    属性的节点操作：
        属性：
！！        oCon.dataset：获取当前元素所有 data- 前缀的属性的集合对象（获取到的属性都会被变成小写）
        delete：删除某个属性值
        方法：
        document.createAttribute("my")：创建属性节点，一个参数，属性节点的名称，使用属性节点的value属性 可以设置或获取属性的值
            var newAttr = document.createAttribute("my");
            newAttr.value = "js";
        oCon.setAttribute("his","jQuery"):设置属性值
        oCon.getAttribute("class"):读取元素指定属性的值
        oCon.removeAttribute("your"):删除属性, 一个参数 属性名
          
    补充：      
            html标签的属性有几种方式:
        // 1. 系统自带的属性   系统自带的属性直接可以通过DOM对象.属性-->设置或者获取属性的值
            也可以通过setAttribute('属性的名字')设置属性，getAttribute('属性的名字')获取属性
        // 2. 自己定义的属性   setAttribute('自定义的属性名字','值') 设置属性值,
        // 获取属性的值  pObj.getAttribute('属性的名字')
        
        文档片段节点：
        *   documentFragment是一个虚拟的节点类型，仅仅存在于内存中，没有添加到DOM树中，所以看不到它的渲染效果
        *   使用文档碎片的好处：避免浏览器一直渲染和占用资源
        
        //先创建一个文档碎片
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < 200; i++) {
            var newLi = document.createElement("li");
            newLi.innerHTML = "77777";
    
            //每次向文档碎片插入节点
            fragment.appendChild(newLi);
    
        }
        //for循环结束后，将文档碎片一次插入到box中
        oBox.appendChild(fragment);