js原生小小总结（二）

Day10

DOM

一.设置或访问元素节点中的属性(自定义属性)

1.获取自定义属性 getAttribute()
2.设置自定义属性 setAttribute()
3.删除属性 removeAttribute()

二.outerHTML/innerHTML/textHTML

三.childNodes/children

1.去除空白文本节点

    function removeSpace(node){
        var childs = node.childNodes;
        for(var i = 0;i < childs.length;i ++){
            if(childs[i].nodeType === 3 && /^s+$/.test(childs[i].nodeValue)){
                node.removeChild(childs[i]);
            }
        }
        return node;
    }

四.高级选项

parentNode : 父节点
previousSibling : 前一个兄弟节点
nextSibling : 后一个兄弟节点
firstChild: 第一个子节点
lastChild : 最后一个子节点
parentElementNode
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild

五.插入

insertBefore(新节点,指定的旧节点)

Day11

一.什么是事件对象?

当一个对象触发了所绑定的事件，所发生的一切详细信息都将保存在一个临时的地方，这个地方就叫做事件对象(相当于飞机上的黑匣子)。

二.如何获取事件对象?

1.ie : window.event

2.标准浏览器 : 给事件处理函数传递的第一个参数

3.兼容: 形参 || window.event

三.如何获取鼠标的编码值? event.button

1.标准浏览器 : 0 1 2

2.IE : 1 4 2

鼠标按钮兼容:

            function getButton(evt){
                var e = evt || window.event;
                if(evt){
                    return e.button;
                }else if(window.event){
                    switch(e.button){
                        case 1 : return 0;
                        case 4 : return 1;
                        case 2 : return 2;
                    }
                }
            }

四.如何获取鼠标的各种坐标值?

1.相对坐标值 : event.offsetX/event.offsetY

2.可视区坐标值: event.clientX/event.clientY

3.绝对坐标值 : event.pageX/event.pageY

滑动轮高度  scrollTop = document.documentElement.scrollTop || document.body.scrollTop

页面高度 event.pageY = event.clentY + scrollTop

            document.onscroll = function(evt){
                var e = evt || window.event;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(scrollTop)
            }

4.屏幕坐标值: event.screenX/event.screenY

            var oDiv = document.querySelector('#box');
            oDiv.onclick = function(evt){
                var e = evt || window.event;
                console.log("offsetX:" + e.offsetX + '
offsetY:' + e.offsetY);
                console.log("clientX:" + e.clientX + '
clientY:' + e.clientY);
                console.log("pageX:" + e.pageX + '
pageY:' + e.pageY);
                console.log("screenX:" + e.screenX + '
screenY:' + e.screenY);
            }

一.clientX/clientY属性介绍
    鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,
即是以浏览器滑动条此刻的滑动到的位置为参考点,不随滑动条移动 而变化.
二.offsetX/offsetY属性介绍
    鼠标点击位置相对于点击(鼠标所在对象区域)的坐标位置
三.pageX/pageY属性介绍
    鼠标在页面上的位置,从页面左上角开始,
即是以页面为参考点,随滑动条移动而变化
四.扩展：screenX和screenY属性
    鼠标点击位置到windows屏幕窗口的坐标位置

五.事件流(事件捕获——事件目标——事件冒泡)

兼容阻止冒泡

            document.getElementById("btn").onclick = function(evt){
                evt = evt || window.event;
                alert(this.nodeName);
//              evt.stopPropagation();//IE不兼容
//              evt.cancelBubble = true;//IE
                evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
            }

六.键盘事件

onkeydown/onkeyup    keyCode   
onkeypress
event.keyCode || event.charCode || event.which

### Day12
##### 一.如何阻止事件的默认行为?
###### 1.右键菜单 : oncontextmenu return false
###### 2.超链接:
event.preventDefault? event.preventDefault() : event.returnValue = false

            var oA = document.getElementById("aa");
            oA.onclick = function(evt){
                evt = evt || window.event;
                evt.preventDefault();
                evt.returnValue = false;
            }

###### 3.拖拽 : ondragstart return false

        <<span class="hljs-name" style="margin: 0px; padding: 0px;">style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
            img{
                width: 100px;
                height: 100px;
                position: absolute;
                left :150px;
            }
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">style>
    </<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
    <<span class="hljs-name" style="margin: 0px; padding: 0px;">body style="height: 5000px;">
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="box">
            
            
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">img src="img/1.jpg" id="img1"/>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
            drag('box');
            drag('img1')
            function drag(id){
                var ele = document.getElementById(id);
                ele.onmousedown = function(evt){
                    var e = evt || window.event;
                    var disX = e.offsetX;
                    var disY = e.offsetY;
                    document.onmousemove = function(evt){
                        var e = evt || window.event;
                        ele.style.left = e.pageX - disX + 'px';
                        ele.style.top = e.pageY - disY + 'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                    //去掉拖拽的默认行为
                    document.ondragstart = function(){
                        return false;
                    }
                }
            }
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
    </<span class="hljs-name" style="margin: 0px; padding: 0px;">body>

##### 二.添加事件监听器

function addEventListener(obj,event,fn,boo){
    if(obj.addEventListener){
        obj.addEventListener(event,fn,boo);
    }else{
        obj.attachEvent('on' + event,fn);
    }
}

##### 三.移除事件监听 器

function removeEventListener(obj,event,fn,boo){
    if(obj.removeEventListener){
        obj.removeEventListener(event,fn,boo);
    }else{
        obj.detachEvent('on' + event,fn);
    }
}

##### 四.事件委托/事件代理
###### 1.事件委托的优点:==提高性能==
###### 2.原理 : ==事件冒泡==

    <<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">ul>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>1</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>2</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>3</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>4</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>5</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">h2>hhhh222</<span class="hljs-name" style="margin: 0px; padding: 0px;">h2>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>6</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>7</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>8</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>9</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
            <<span class="hljs-name" style="margin: 0px; padding: 0px;">li>10</<span class="hljs-name" style="margin: 0px; padding: 0px;">li>
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">ul>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
            var oUl = document.getElementsByTagName_r('ul')[0];
            oUl.onmouseover = function(evt){
                var e = evt || window.event;
                var target = e.target || e.srcElement;
                if(target.nodeName.toUpperCase() === 'LI'){
                    target.style.background = 'red';
                }
                
            }
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
    </<span class="hljs-name" style="margin: 0px; padding: 0px;">body>

##### 五.事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover : 移入事件
onmouseout :移出事件
onmouseenter : 移入事件(默认阻止事件冒泡)
onmouseleave : 移出事件(默认阻止事件冒泡)
onmousemove
onkeydown
onkeyup
onkeypress
onload
onblur
onfocus
onchange
onscroll
onresize
oncontextmenu
ondragstart
onsubmit
##### 六.拖拽

##### 七. offset

offsetWidth : width + padding + border

offsetHeight : height + padding + border

offsetLeft : 相对于父节点的left值

offsetTop : 相对于父节点的top值

Day13

一.什么是cookie?

存储在浏览器的文档
在本地的客户端的磁盘上以很小的文件 形式保存数据。

二.如何创建cookie?

==document.cookie = "key=value;[expires=日期对象;path='/']"==

三.cookie的特点:

==1.一个cookie的大小不超过4KB
2.一个域中的cookie数量在50条左右
3.cookie存在一定的风险==

Day14

一.什么是正则表达式?

匹配字符的一组规则

二.如何定义正则表达式?

1. /正则表达式/标志位

2. new RegExp("正则表达式",'标志位')

3.元字符 : 三三二三个一

三: {} [] ()
X{} : 表示括号前的一个或一组字符连续出现的次数.
X{m} : 表示括号前的一个或一组字符连续出现m次.
X{m,} : 表示括号前的一个或一组字符连续出现m至无限次.
X{m,n} : 表示括号前的一个或一组字符连续出现m至n次.
[] : 表示范围 (可以把正则的符号放进[]中解析为字符);
[u4e00-u9fa5]
() : 表示组

三: * + ?
X* : {0,}
表示*前的一个或一组字符连续出现0至无限次.
X+ : {1,}
表示+前的一个或一组字符连续出现1至无限次.
X? : {0,1}
表示?前的一个或一组字符连续出现0至1次.

二 : ^ $
^ : 用于正则的开头 : 表示定头
用于[]的开头: 表示取反 [^0-9]
$ : 表示定尾

三个一: . |  
. : 表示模糊匹配任意一个字符
| : 表示或者
 : 转义符 (将正则的符号放在后,解析为字符串);
d : 数字
D : 非数字
s : 空白符
S : 非空白符
w : 字母数字下划线
W : 非字母数字下划线
 : 表示边界

三.标志位

g : 表示全局

i : 不区别大小写

四.正则的方法

1.test() 返回boolean

2.exec() :返回数组 null

五.字符串的方法

1.match() :返回数组 null

2.search() : 返回下标值, -1

3.replace()

六.exec与match的区别

exec是正则调用,参数是字符串
match是字符串调用,参数是正则表达式

        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
            var str = 'how do you do';
            var re = /o/;
            console.log(re.exec(str));
            console.log(str.match(re));
            
             
             
            var str = 'how do you do';
            var re = /o/g;
            console.log(re.exec(str));
            console.log(str.match(re));
            
            //全局匹配时,exec无效
            
            var str = 'how do you do';
            var re = /(o).*(o)/;
            console.log(re.exec(str));
            console.log(str.match(re));
            
             //()有几个就代表有几个相应的匹配个数，整体也是一个
            
            
            var str = 'how do you do';
            var re = /(o).*(o)/g;
            console.log(re.exec(str));
            console.log(str.match(re));
            

Day15

一.ES6

1. bind()/call()/apply()

==bind() : 返回一个函数==
==call()/apply() :返回一个对象==

2. JSON : 网络数据传输格式

JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。

JSON的优点：

1. 基于纯文本，跨平台传递极其简单
2. JS原生支持，后台语言几乎全部支持
3. 轻量级数据格式，占用字符数量极少，特别适合互联网传递
4. 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的
5. 容易编写和解析，当然前提是你要知道数据结构

1.==[]==

2. =={"key" : "value","key" : "value"}==

    //原生对象 : {key : 'value',"key" : "value",key : "value"}

【注】
==JSON 的健和值必须加双引号，数字可不加，不可加单引号。==
一个JSON中只能有一个JSON数据。[ ]
可以在[ ] 中写多个 { }。

3. JSON.parse()/JSON.stringify() IE8以下不兼容

==JSON.parse()== : 将json字符串转为json对象
==JSON.stringify()== :将json对象转为json字符串

            var str = '{"name" : "张志林","age" : 18}';
            //转为json对象
            //eval_r() : 存在风险
//          var json = eval_r('(' + str + ')');
//          console.log(json.name);
            var json = JSON.parse(str);
            json.address = "青岛";
            //转为json字符串
            str = JSON.stringify(json);
            console.log(str);

4.let/const

1> let声明的变量不能做变量提升

2> 同一个作用域中不能重复声明一个变量

3> let声明,会产生块级作用域
注: for循环有两个作用域,for循环本身是一个块级作用域,for循环的{}又是for循环的子级作用域

4> let声明的全局变量不再是window的属性

const 好处: 一改全改

【注】const
使用const命名是为了当有大量重复常量时，方便修改
常量要求全大写，
当常量是数组时，可以修改数组的元素，地址不可修改。

5.变量的解构赋值

[] // 返回一个数组
可以直接对应赋值;
++交换变量的值[x, y] = [y, x];++
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

{} // 返回一个对象
++从函数返回多个值,传参可不按顺序++
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

            ;
//          var a = 3;
////            ;
//          let b = 4;
//          var a = 5;
//          var a = 6;
//           b = 8;
//          {
//              let a = 3;
//              
//          }
//          ;

//          for(let i = 1;i < 5;i ++,console.log(i)){
//              let i = 8;
//              console.log(i);
//          }
//          const G = 10;
//          const ARR = [1,2,3,4];
//          ARR[0] = 10;
//          console.log(ARR[0]);
//          let a = 3;
//          ;
//          let b = 3 * G;
//          let [a,b,c] = [1,2,3];
//          let [q,[w,[e],r],t] = [1,[2,[3],4],5];////不写的话显示,undefined
//          [a,b] = [b,a];
//          console.log(a,b,c);
//          let {a,b=9,c} = {c : 8,a : 2};
//          console.log(a,b,c);
            
            
            function fn({a = 1,b = 2,c = 3}){
                return [a,b,c];
            }
            let [x,y,z] = fn({a : 3,c : 5,b : 4});
            console.log(x,y,z);

6.字符串的扩展方法

1> includes() :
判断子串是否在父串中包含,如果有,返回true,没有,返回false

2> startsWith():
判断子串是否在父串的开头部分,如果在,返回true,不在,返回false

3> endsWith() : 判断子串是否在父串的结尾部分,如果在,返回true,不在,返回false

4> repeat() :
重复字符串
注: 如果<= -1 报错
如果是小数 : 自动取整
如果是字符串:自动转为数字,如果转不了数字的,转为NaN,NaN按0算

            var str = "how do you do";
            console.log(str.includes('do',str.length));
            console.log(str.startsWith('do',4));
            console.log(str.endsWith('do',5));

7.生成器函数:解决异步产生的问题

==异步:同时进行==
==同步:执行完一个,再执行一个==
//生成器函数
*指针函数,按照指针一步一步执行,每次要点一次 fn().next()

    function * fn(){
        yield  setTimeout(()=>{
            alert('1');
        },3000);
        yield  setTimeout(()=>{
            alert('2');
        },2000);
        yield  setTimeout(()=>{
            alert('3');
        },1000);
        
    }
    var me = fn();
    console.log(me.next())

8.箭头函数 =>

++唯一好处: this自动指向所在函数外部的对象++

            var fn = ()=>{
//              var a = 3;
//              var b = 3;
//              return a + b;
//          }
//          ;
//          var fn1 = (a,b)=>a + b;
//          ;
            document.onclick = function(){
            //;
//          var that = this;
            setTimeout(()=>{
                alert(this);
            },5000)
        }

9.set

1>自动去重

 let set = new Set([1,2,1,2,3,2,1,1,4]);//构造一个新的set
 console.log(set.size);//获取集合长度
 console.log([...set]);//转成数组
 

2>添加元素
set.add('a');

3>删除元素
set.delete(1);

4>判断是否包含某个元素
console.log(set.has(2));

5>清空整个set
// console.log(set.clear());
// console.log(set);

6>遍历
//keys
//values
//entries
//forEach()

        for(let key of set.keys()){
            console.log(key);
        }
        for(let key of set.values()){
            console.log(key);
        }
        for(let [key,value] of set.entries()){
            console.log(key,value);
        }
        set.forEach(function(value,key,set){
            console.log(key +'=>' + value);
        })

10.

数组 
set
原生 对象
map

//          var a = {x : 2},b = {x : 3},c = {};
//          ;
//          c[a] = 7;// '[object Object]'
//          c[b] = 8; //'[object Object]'
//          console.log(c);
//          var obj = {};
//          obj[[]] = 3;
//          obj[[]] = 4;
//          console.log(obj);
            //原生对象：所有key默认都会自动 转为字符串
            //map {name : '张三',[] : '1',[] : '2'}
            let map = new Map([
                [1,2],
                [[],3],
                [[],4],
                [{},5],
                [{},6],
                ['a',7]
            ]);
//          console.log(map);
//          ;
//          console.log(map.size);
            //1.添加元素
            map.set('b',8).set('c',9);
            //2.访问元素
//          console.log(map.get('b'));
            //3.删除元素
//          console.log(map.delete('b'));
//          console.log(map.delete([]));
            //4.清除map中所有的元素
//          map.clear();
            //5.判断是否包含某个key的value
//          console.log(map.has('c'));
//          console.log(map);
            //6.遍历map
            //keys
            //values
            //entries
            //forEach()
            for(let key of map.keys()){
                console.log(key);
            }
            for(let value of map.values()){
                console.log(value);
            }
            for(let [key,value] of map.entries()){
                console.log(key,value);
            }
            map.forEach(function(value,key,map){
                console.log(key,value);
            })

11.Symbol : 保证变量中的值是唯一的.

            var str1 = Symbol('hello');
            var str2 = Symbol('hello');
//          console.log(str1 == str2);
//          console.log(typeof str1);
            var obj = {};
            obj[str1] = 1;
            obj[str2] = 2;
            console.log(obj);

12.class extends

        // Father
    

 

            class Father{
            //默认的方法
            //构造器
            constructor(name,age){
                //属性
                this.name = name;
                this.age = age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }
        class Son extends Father{
            constructor(name,age){
                //调用父类的构造器方法
                super(name,age);  //超类，基类，父类
                
            }
        }
        var son = new Son('张三',18);
        console.log(son.name);
        console.log(son.showName());

class例子,拖拽

html页面

<<span class="hljs-name" style="margin: 0px; padding: 0px;">html>
    <<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">meta charset="UTF-8">
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">title></<span class="hljs-name" style="margin: 0px; padding: 0px;">title>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">style type="text/css">
            body{
                height: 5000px;
            }
            #fa{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
            #so{
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                left: 130px;
            }
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">style>
    </<span class="hljs-name" style="margin: 0px; padding: 0px;">head>
    <<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="fa">
            父类：无边界拖拽
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">div id="so">
            子类：有边界拖拽
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">div>
        
        
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/;"></<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/;"></<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
        <<span class="hljs-name" style="margin: 0px; padding: 0px;">script type="text/javascript">
            new Drag('fa');
            new Subdrag('so');
        </<span class="hljs-name" style="margin: 0px; padding: 0px;">script>
    </<span class="hljs-name" style="margin: 0px; padding: 0px;">body>
</<span class="hljs-name" style="margin: 0px; padding: 0px;">html>

父类

class Drag{
    constructor(id){
        this.ele = document.getElementById(id);
        this.ele.onmousedown = function(evt){
            this.fnDown(evt);
        }.bind(this);
    }
    fnDown(evt){
        var e = evt || window.event;
        this.disX = e.offsetX;
        this.disY = e.offsetY;
        document.onmousemove = (evt)=>{
            this.fnMove(evt);
        }
        document.onmouseup = this.fnUp;
    }
    fnMove(evt){
        let e = evt || window.event;
        this.ele.style.left = e.pageX - this.disX + 'px';
        this.ele.style.top = e.pageY - this.disY + 'px';
    }
    fnUp(){
        document.onmousemove = null;
    }
}

子类

class Subdrag extends Drag{
    constructor(id){
        super(id);
    }
    fnMove(evt){
        let e = evt || window.event;
        let left = e.pageX - this.disX;
        let top = e.pageY - this.disY;
        //设置边界
        if(left <= 0){
            left = 0;
        }else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
            left = document.documentElement.clientWidth - this.ele.offsetWidth;
        }
        if(top <= 0){
            top= 0;
        }else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
            top = document.documentElement.clientHeight - this.ele.offsetHeight;
        }
        this.ele.style.left = left + 'px';
        this.ele.style.top = top + 'px';
    }
}