js原生小小总结（二）_你看我独自一人_新浪博客

亦凉 2021-12-11 09:17 166阅读 0赞

### Day10 ###

#### DOM ####

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

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

##### 二.outerHTML/innerHTML/textHTML #####

##### 三.childNodes/children #####

> 1.去除空白文本节点

##### 四.高级选项 #####

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 ######

鼠标按钮兼容:

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

###### 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 + '\noffsetY:' + e.offsetY);
                    console.log("clientX:" + e.clientX + '\nclientY:' + e.clientY);
                    console.log("pageX:" + e.pageX + '\npageY:' + e.pageY);
                    console.log("screenX:" + e.screenX + '\nscreenY:' + 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

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

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.原理 : ==事件冒泡==

<body>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <h2>hhhh222</h2>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 </ul>
 <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';
 }
 
 }
 </script>
 </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 : 非字母数字下划线  
> \\b : 表示边界

##### 三.标志位 #####

###### g : 表示全局 ######

###### i : 不区别大小写 ######

##### 四.正则的方法 #####

###### 1.test() 返回boolean ######

###### 2.exec() :返回数组 null ######

##### 五.字符串的方法 #####

###### 1.match() :返回数组 null ######

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

###### 3.replace() ######

##### 六.exec与match的区别 #####

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

### 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自动指向所在函数外部的对象++

###### 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页面

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <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;
 }
 </style>
 </head>
 <body>
 <div id="fa">
 父类：无边界拖拽
 </div>
 <div id="so">
 子类：有边界拖拽
 </div>
 
 
 <script type="text/;"></script>
 <script type="text/;"></script>
 <script type="text/javascript">
 new Drag('fa');
 new Subdrag('so');
 </script>
 </body>
 </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';
 }
 }