本地存储和正则的知识console.log 与 console.dir的区别区分方法和属性： property:属性

console.log 与 console.dir的区别

  <body>
    <button>点击</button>
    <script>
      /* 
        区别：
        有时候  我们使用console.log  打印dom元素的时候  输出一个标签格式  而不是一个对象格式
        console.dir   输出dom元素的元素  总是对象格式
        */
      const btn = document.querySelector('button');
      console.log(btn);   //<button></button>
	console.dir(btn)    //button
    </script>
  </body>

区分方法和属性：

property:属性

method:方法：

代码提示：

页面换肤功能; ``

input 标签具有 type="color" 属性可以点击绑定 change 事件触发就调用

兼容问题---chorme 用的少 ie全军覆没

本地存储

存储普通字符串不需要转JSON格式直接储存或取使用

    <script>
      //  html5 就有了
      //   localStorage
      // 1,生命周期 永久生效，除非手动删除  否则关闭页面也存在
      // 2，多个窗口（页面）  共享（同一浏览器可以共享）
      // 3，以键值对形式存储使用
      // 存储数据：  localStorage.setItem(key,value)
      // 获取数据：  localStorage.getItem(key)
    </script>

换肤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <input type="color" name="" id="color">
    <script>
        const color = document.querySelector('#color')
        // 需要给这个标签 绑定一个  change  事件  -- 选好值之后   就会触发
        // can i use 里查找   input type="color"   有兼容性 
        color.addEventListener('change',function(){
            // 通过  value属性 来获取   
            // 设置到body 标签中即可
            console.log('this.value  ----->  ', this.value);
            document.body.style.backgroundColor=this.value
            localStorage.setItem('setBackgroundColor',this.value)
        })
        window.addEventListener('load',function(){
            document.body.style.backgroundColor = localStorage.getItem('setBackgroundColor')
        })
    </script>
</body>
</html>

学生就业薪资 --本地储存

对于复杂数据类型 ---本地存储

先要转成字符串格式 JSON.Stringfy(要存的对象或者数组)

对于要使用本地存储中的数据先取出来

然后使用 JSON.parse(取出后保存的数据) ---可以使用

本地存储时，取数据没有返回 null

取数据要做判断

sessionStorage

关闭窗口就消失会话存储（打开页面到关闭窗口）

本地储存

    /* 
    localStorage
        本地存储四个API
        1,存  localStorage.setItem(key,value)
        2,取  localStorage.getItem(key)
        3,删除一个  localStorage.removeItem(key)
        4,清空  删除全部  localStorage.clear()   
        */
例子
       //     for(let i = 0;i<100;i++){
       //      localStorage.setItem('kk',`${i}个数据`)
       //    }
       //  localStorage.removeItem('kk')
       //   localStorage.clear()

       // 本地存储的技术  sessionStorage 会话（打开页面到关闭页面之间的过程  一次会话  ajax node 会用到）  存储它的用法和localStorage用法一样
       // 区别只有一个   ：
       // sessionStorage:  关闭页面后  数据会丢失
       // localStorage:  除法手动删除  否则一直存在  直到天荒地老
       // 存数据
      sessionStorage.setItem('SS', 123);
       // 取数据
       //   sessionStorage.getItem('SS')
       //   console.log(' sessionStorage.getItem  ----->  ', sessionStorage.getItem('SS') );
       // 删除
       //   sessionStorage.removeItem('SS')
       // 清空会话存储空间
      sessionStorage.clear();

自定义属性

data-自定义属性: 传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取

正则

表示重复至少 1 次 ? 表示重复 0 次或1次

表示重复 0 次或多次 {m, n} 表示复 m 到 n 次

固有属性-与-自定义属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义属性的演示</title>
  </head>
  <body>
    <a href="http://www.baidu" aa="AA" data-aa="AA">a</a>
    <button data-pp="PP">点击</button>
    <script>
      const a = document.querySelector('a');
      console.log('a.getAttribute(aa)  ----->  ', a.getAttribute('aa'));
      // a.setAttribute('aa',"BB")
      // a.removeAttribute('aa')
      // console.log('a.getAttribute(data-aa)  ----->  ', a.getAttribute('data-aa'));
      // console.log('a.getAttribute(herf)  ----->  ', a.getAttribute('href'));
      // a.removeAttribute('data-aa')   //可以删除data-xxx
      // a.setAttribute('data-aa',"BB")   //可以设置data-xxx
      // a.removeAttribute('href')   //可以删除 固有属性
      //   a.setAttribute('href', 'kk'); //可以修改  固有属性值
      // const btn = document.querySelector('button')
      // console.log('btn.dataset.pp  ----->  ', btn.dataset.pp);
      // btn.dataset.pp = "gg"

      /* 
        一：
        自已定义的：
        <a aa="AA"><a/>
        const a = document.querySelect('a')
        获取：
        getAttribute(key)
        a.getAttribute('aa')
        设置：
        setAttribute(key,value)
        a.setAttribute('aa',"BB")
        删除
        removeAttribute(key)
        a.removeAttribute("aa")

       
           <a data-aa="AA"><a/>
        const a = document.querySelect('a')
         二：
        自己定义：data-xxx
        获取：
        dom.dataset-xxx
        a.dataset.aa
        修改值：
        dom.dataset.xxx = 值
        a.dataset-aa = "皮皮"

         <a aa="AA"><a/>
        const a = document.querySelect('a')
        三：固有属性
        固有属性通过点语法获取
        a.id  获取id
        固有属性通过点语法修改
        a.href = "kk"
          自定义属性  通过点语法： 不能获取和设置

        总结：
        Attribute()属性比data-xxx
        强大
        Attribute(属性名) 可以获得任意的属性
        包括固有属性和 自定义属性
            总结：
           Attribute()  可以获取到任意的属性
           （固有属性和h5建议的自定义属性）
          //  
         
        */
    </script>
  </body>
</html>

设置固有属性

设置自定义属性

修改自定义

删除自定义属性

自定义属性使用

高阶函数

什么是高阶函数

把一个函数看成是个普通属性应用在形参或者返回值技术

把函数当成形参来使用：定时器

把函数里面返回一个函数也是高阶函数

重绘和回流

事件绑定-取消绑定

可以绑定多个同名事件

事件流动

碰到底部;元素触发事件dom 触发事件叫目标阶段

底部dom触发事件叫：目标阶段

最底层的元素触发事件：一个元素占一个阶段，叫目标阶段

字符串转大写，转小写，转成数组

1，转大写 toUpperCase()

2,转小写 toLowerCase()

3,转数组 split("") //有什么符号里面就放什么符号

数组转成字符串

join()

let arr = [1,2,3]
let symbol = arr.join('')  //"123"
let str = arr.join('-')  //"1-2-3"

 // 数组转字符串  join方法：

   //  const arr = ['a', 'b', 'c'];

   //  console.log(arr.join('')); //abc

   //  console.log('arr.join("*")  ----->  ', arr.join("*"));



   // 连接  数组和数组之间的连接

   // const arr1 = ['1','2','3']

   // const arr2 =['a','b','c']

   // // 将两个数组合并到一个数组

   // arr1.concat(arr2)  //表示合并

   // console.log('arr1.concat(arr2)  ----->  ',arr1.concat(arr2)  );



   // 字符串也有一个contat() 也是表示合并

   // const str1 = '123'

   // const str2 = 'abc'

   // console.log('str1.concat(str2)  ----->  ', str1.concat(str2));

   // console.log('str1 + str2  ----->  ', str1 + str2);

量词

点代表除换行的任意一个字符

中括号表示范围一个 [a-zA-Z0-9] 中任意一个

手机正则

邮箱

表示点（。）号本身加反斜杠

修改input 框内的placeholder 颜色

webAPI

区分属性和方法：

属性：一般使用.点语法

proprety

const a = document.querySelector('a')

a.href href属性

方法：一般后面有小括号

method

const arr = []

arr.push() 数组的追加元素的push方法

可以查看代码提示：一般正方体方法

长方形属性

本地存储

localStorage

setItem('key',value)存

getItem(key)取

生命周期永久，除非手动清除

sessionStorage

setItem('key',value)存

getItem(key)取

浏览器关闭，清除

元素属性

自定义属性

h5建议的写法

data-index

dataset.index

存储 data-index

取 dom.dataset.index

改 dom.dataset.inex = "value"

自己随便定义

如：

存 dom.Attribute("aa",value)

取 dom.Attribute("aa")

改 dom.Attribute("aa","cc")

删 dom.Attribute('aa')

固有属性

取 dom.id dom.href dom.src

改 dom.id = "你好"

高阶函数

什么是高阶函数

一个函数被当成参数使用

如：

function getName(){

console.log(123)

}

setInterval(getName,1000) //一秒打印一次

重绘和回流

重绘

页面颜色，字体颜色的改变，不影响结构变化

回流

页面字体大小的改变，格式改变，定位，浮动等

要减少回流

损耗电脑性能

重绘不一定回流

回流一定重绘

事件绑定-取消

前提：addEventListener绑定事件并是具名函数才可以取消事件绑定

匿名函数不可以取消事件绑定

addEventListener可以绑定多个同名事件

语法：

dom.removeEventListener(事件类型，处理函数)

事件的流动三个过程

addEventListener可以绑定多个同名事件

事件捕获

由父到子

事件冒泡

事件委托的原理

事件目标阶段

当最里层的元素触发事件

被称为：处于目标阶段

绑定事件第三个参数

true 设置为捕获

默认false /不写默认冒泡

字符串方法：

小写字母转大写字母

dom.toUpperCase()

大写字母转小写字母

dom.toLowerCase()

两个字符串合并

let str1 = '123'

let str2 = 'abc'

console.log(str1.concat(str2))

方法二： console.log(str1 + str2)

字符串转数组方法：

split()

中间有- 就 split('-')

可以转换为数组

const str = "a-b-c"

console.log(str.split('-'))

//['a','b','c']

数组的方法：

合并两个数组方法

concat()

let arr1 = [1,2,3]

let arr2 = ["a",'b','c']

console.log(arr1.concat(arr2))

//[1,2,3,"a","b","c"]

数组变为字符串

数组.join('')

join可以返回字符串，也

可以中间用符号连接

const arr = ['a','b','c']

console.log(arr.join('')

//abc

const arr = ['a','b','c']

console.log(arr.join("-"))

a-b-c

正则表达式：

什么是正则表达式

正则的数据类型是对象

定义的一种检测寻找匹配的规则

检测正则的方法：

test()

返回一个Boolean值

let reg = /123/

let str = "12345"

reg.test(str) //true 返回里面有 123 就为true

定义规则：

let reg = // //是正则字面量

边界符

/^/

表示匹配以这个开头

let reg = /^123/ 表示匹配必须要以123开头

否则为false

/$/

表示匹配以这个结尾

let reg = /789$/ 表示匹配必须要以789结尾

否则为false

/^$/

表示精确匹配在开头和结束一致下里面一一对应

let reg = /^abcd$/

表示检测的必须要是 abcd

否则为false

量词

表示出现一个或者多个

表示至少是一个

？

表示 0个或者1个

{a}

表示 a 个

{a,}

表示至少a 个

{a,m}

表示至少a 个最多 m 个

分支主题

字符

. 点

表示除了空格以外的任何字符

表示 0-9 的任意字符 [0,9]

表示 [0,9] 以外的任意字符 [^0,9]

数字，字母下划线任意一个 [a-zA-Z0-9]

相当于[^\d] 除所有字母，数字，下划线以外的字符相当于[^A-Za-z0-9]

匹配所有的空格符(包括换行符，制表符，空格符) ，相当于[\t\r\n\v\f]

匹配所有空格符以外的字符 ,相当于[^\t\r\n\v\f]

不需要背正则

可以根据文档看懂正则，会使用正则即可

工作当中，可以取cv别人写好的代码

本地存储和正则的知识

本地存储

存储普通字符串 不需要转JSON格式 直接储存 或 取使用

对于复杂数据类型 ---本地存储

sessionStorage

本地储存

自定义属性

正则

固有属性-与-自定义属性

高阶函数

重绘和回流

事件绑定-取消绑定

事件流动

字符串 转大写，转小写 ，转成数组

数组转成字符串

量词

手机正则

邮箱

修改input 框内的placeholder 颜色

存储普通字符串不需要转JSON格式直接储存或取使用

字符串转大写，转小写，转成数组