WebAPIs

一·获取DOM元素及更改盒子样式

一般将盒子指定一个类名或者id名，后续再用document.querySelector（）获取元素，通过js可以修改盒子的样式，原本有样式修改样式，没有则增加。更改元素的style样式用box.style.hight = ''来更改，两个单词的则用小驼峰命名法，比如backgroundColor。

   <div class="box">
        我是一个盒子
    </div>
    <script>
        const box = document.querySelector('.box')
        box.innerText = '我是一个修改后的盒子'
        box.style.width = '200px'
        box.style.hight = '200px'
        box.style.backgroundColor = 'pink'

    </script>

但一般使用box.classList的方法给盒子增加属性，这样更加方便。add：增加已定义的样式属性，remove：删除；toggle则是没有则增加，有则删除。注意这里，样式不用加. 比如说直接写active就可以

 <div class="box">我是一个盒子</div>
    <script>
        const box = document.querySelector('.box')
        box.classList.remove('active')

二·间隙函数

间隙函数基本语法如下；setInterval（执行语句，各多少毫秒执行一次）注意的事，这里的时间是以毫秒为单位，1s等于1000毫秒；还有就是执行语句，如果是函数只写函数名不加括号比如说 setInterval（fn，1000）{}

  setInterval(function () {
            console.log('一秒执行一次');

        }, 1000)

关闭计时器就用 clearInterval（变量名）

   let n = setInterval(function () {
            console.log('一秒执行一次');

        }, 1000)
        clearInterval(n)

三·事件监听

语法如下，可以关闭一个广告 元素对象.addEventListener('事件类型',执行函数 ) 鼠标点击‘click’ 鼠标经过‘mouseenter’，鼠标离开‘mouseleave’

获得光标‘focus’ 失去光标‘blur’ 输入‘input’，键盘按下‘keydown’ 按键盘抬起‘keyup’

   <div class="box">
        我是广告
        <div class="box1">X
        </div>
    </div>
    <script>
        const box = document.querySelector('.box')
        const box1 = document.querySelector('.box1')
        box1.addEventListener('click', function () {
            box.style.display = 'none'
        })

    </script>

四·事件对象

一般放在函数里面，它存储了这个事件的基本信息有很多属性，比如说下面的代码，在事件e里面，当键盘按下回车，才会发表评论

  <input type="text">
    <script>
        let input = document.querySelector('input')
        input.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                console.log('发布评论');

            }
        })
    </script>

元素对象.trim()去除字符串左右两边的空格

五·环境对象与回调函数

this，指向当前调用函数的自己，这里的this就等同于btn

    <button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            this.style.color = 'red'
        })
    </script>

回调函数相当于c语言中的复合函数

六·选中数组对象

document.querySelectorAll获取的是数组，想要给数组每一个元素增加事件。则需要遍历数组

for (let i = 0; i < cks.length; i++) {
      cks[i].addEventListener('click', function () {
        checkall.checked = document.querySelectorAll('.ck:checked').length === cks.length

      })

    }

对象:checked为当前选中按钮是否被选中，返回的值是ture或者false

七·事件流

从父到子是捕获，从子到父是冒泡。DOM.addEventListener(事件类型,事件处理,是否使用捕获机制) ture 则是使用，false是不使用，就会使冒泡。但是注意的是，捕获和冒泡前提是，父到子都是相同事件。

阻止冒泡，e.stopPropagation()，本质上是阻止事件流动语法如下，创建的时候一定要加事件对象。阻止元素默认行为，用到的是。e.preventDefault()。用法和下面的语法一样，阻止的比如说有链接跳转，表单提交等等。

       so.addEventListener('click',function(e)
    {
        console.log(11);
        e.stopPropagation()
        
    })

事件解绑DOM.removeEventListener（事件类型，函数名称），添加事件解绑首先要把函数抽离，因为匿名事件没办法做事件解绑的，没有名称.

  fn=function (e) {
            console.log(11);
        }
        so.addEventListener('click',fn)
        so.removeEventListener('click',fn)

八·事件委托

运用事件冒泡的特点，子元素的事件冒泡到父元素上，再用事件对象的target定位，选定的那个子元素。例子如下，点击li实行变色

 <ul>
        <li>第1个子元素</li>
        <li>第2个子元素</li>
        <li>第3个子元素</li>
        <li>第4个子元素</li>
        <li>第5个子元素</li>
        <p>我不要变色</p>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>

九·页面加载事件和滚动事件

事件滚动scroll，document.documentElement.scrollTop这个是整个页面滚动距离头部的用法。

  window.addEventListener('scroll', function () {
            let n = document.documentElement.scrollTop
            if (n > 100) {
                div.style.display = 'block'
            }

        })

事件加载load，但是一般不使用，用的更多的是DOMcontentloaded他是给dom元素增加加载事件

十·dom节点与日期对象

父级：parentNode，子类：children，一般用遍历的方法。

兄弟：nextElementSibling，previousElementSibling。通过节点可以获选中该节点的对象。

日期对象：

首先要new Date（）实例化，获得每个日期月份的十getFullYear（），月份：getMonth（），小时：getHour（）等等。用toLocaleString()可以直接获得当前时间。

十一·js的执行机制

首先执行同步任务，比如说log，在执行异步任务，比如说一些点击事件，间隙事件等等。将异步任务加入到任务队列里面，（以时间来排序），后执行

十二·location

自动跳转链接；location.href

location.href='http//www.baidu.com'

获取？后面的内容，location.search

获取#后面的内容，location.hash

强制刷新,location.reload,要赋值为ture

十三·navigator和history

navigator其中有一个值navigatorname可以检测当前是什么设备，pc，安卓还是苹果，通过检测就可以选择对应的的链接。使用的话一般都是复制粘贴，改链接就可以

history是有back（）后退，forward（）前进，也可以用go（-1|1）后退或者前进。这里指的是浏览页面的后退和前进。

十四·本地存储

存储在本地浏览器的内容

  // 存储
    localStorage.setItem('uname', '小王')
    // 获取
    console.log(localStorage.getItem('uname'));
    // 删除
    localStorage.removeItem('uname')

如果是复杂数据存储的话，需要转换，用JSON.stringify(obj)，获得是字符串数组,需要用对象去接取。再用JSON.parse（）转化回成对象

十五·map方法和join方法

map返回的是一个数组，ele是数组元素，index是数组下标。join是返回的一个字符串，括号内可以添加分割数组的分隔符。

    const arr = ['red', 'green', 'back']
    const newarr = arr.map(function (ele, index) {
        return ele + '颜色'
    })
    console.log(newarr);
    console.log(newarr.join(' '));
console.log(newarr.join('|'));

十六·正则表达和元字符量词

正则表达，是判断这个字符串是否在另一个字符串里面出现，用的是，dom.test(dom)，返回值是true或者false，例如下面的语法

    const str = '我们在学习前端'
    const reg = /前端/
    console.log(reg.test(str));

元字符量词边界，一般有^:匹配的是行首文本，而$是匹配行尾文本。但是这里边界词对应的文本是只一个字符，不算上相同字的另外字符，比如说

    console.log(/^哈$/.test('哈哈'));

这个就首字的哈，是否在文本中只出现这个一个哈，两个哈算错。首位都是特指的是那个哈。

量词：*文本出现零次或者多次；+：文本数据>=1; ?:出现零次或者一次。

{n}:重复n次；{n，}重复n次或者更多；

{n，m}重复n到m次；[a-z]输入字符在a-z之间区间，[0-9]可以输入0-9的一个数字；比如说[a-zA-Z0-9]可以输入任意一个a-z或者A-Z或者0-9的任意一个数；[^a-z]：^在中括号里面是取反，除了a-z的任意一个字符。d/就是输入0-9之间的一个字符。

还能实现替换，在/java/后面加一个i就可以选取，大写或者小写，加g就可以选取，文本中所有的要选取的内容。

    const st = 'java是一门编程语言，学完java对自己很有用'
    const re = st.replace(/java/ig, '前端')
    console.log(re);