Web APIs

Gigabyte
250 阅读1分钟

第一天

开发网页内容特效实现用户交互 image.png 通过原生JS拿过来DOM对象，纯天然无污染的一种，jQuery来了一次封装包装过处理过的，从html里拿过来的标签以对象形式存储。

image.png

image.png 伪数组

image.png

    <div>我是一个盒子</div>
    <div>我是er个盒子</div>
    <div class="three">我是三个盒子</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <span>就1个</span>
    <script>
        // 1. js 获取 第一个元素 
        // let div = document.querySelector('div')
        // let div = document.querySelector('.three')
        // console.log(div)

        // let li = document.querySelector('ul li:last-child')
        // console.log(li)
        // 2. 获取多个元素  伪数组
        let lis = document.querySelectorAll('ul li')
        // console.log(lis)   [div, div, div]
        // 通过遍历的方式，获得里面的每一个dom对象（元素）
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }
        let span = document.querySelectorAll('span')
        console.log(span)
    </script>
</body>

</html>

image.png

image.png

image.png

image.png

image.png

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        粉红色的回忆
    </div>

    <script>
        // 1. 获取标签(元素)
        let box = document.querySelector('div')
        // 2. 修改标签（元素）内容  box是对象   innerText 属性
        // 对象.属性  = 值   不识别标签
        // box.innerText = '有点意思~'
        // box.innerText = '<strong>有点意思~</strong>'
        // 3. innerHTML解析标签
        box.innerHTML = '<strong>有点意思~</strong>'
    </script>
</body>

</html>

image.png 修改元素样式属性

image.png

image.png toggle有这个类就干掉，没有就添加

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

image.png 间歇函数

image.png

<body>
    <script>
        // setInterval(function () {
        //     console.log('高薪就业')
        // }, 1000)

        function show() {
            console.log('月薪过2万')
        }

        let timer = setInterval(show, 1000)
        // let timer1 = setInterval(show, 1000)

        // 清除定时器
        clearInterval(timer)
    </script>
</body>

</html>

image.png 数据都从后台取过来的，叫数组对象，把数据取过来写到标签内部就行了，他的基本结构，和对应的数据关系

第二天

image.png

image.png

image.png 最难的退出

image.png

<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    // 1. 获取元素  全选 和   ck 小复选框
    let all = document.querySelector('#checkAll')
    let cks = document.querySelectorAll('.ck')
    let span = document.querySelector('span')
    // 2. 事件监听   全选按钮  
    all.addEventListener('click', function () {
      // console.log(all.checked)  // true  false 
      // 我们需要做的就是把 all.checked 给下面三个小按钮
      // 因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给值
      for (let i = 0; i < cks.length; i++) {
        cks[i].checked = all.checked
      }
      // 当我们的全选按钮处于选中状态，则可以改为取消
      if (all.checked) {
        // console.log('要改')
        span.innerHTML = '取消'
      } else {
        span.innerHTML = '全选'
      }
    })


    // 3. 小按钮的做法 同时给多个元素绑定相同事件
    for (let i = 0; i < cks.length; i++) {
      // 绑定事件
      cks[i].addEventListener('click', function () {
        // console.log(11)
        // 只要点击任何一个小按钮，都要遍历所有的小按钮  
        for (let j = 0; j < cks.length; j++) {
          // 都来看看是不是有人没有选中
          if (cks[j].checked === false) {
            // 如果有false 则退出循环 结束函数
            all.checked = false
            span.innerHTML = '全选'
            return
          }
        }
        // 当我们的循环结束，如果代码走到这里，说明没有false，都被选中了，则全选按钮要选中
        all.checked = true
        span.innerHTML = '取消'
      })
    }

  </script>
</body>

</html>

高阶函数

image.png 回调函数

image.png

image.png

image.png

第三天

DOM节点

image.png

image.png 查找子节点

image.png

查找父节点

image.png 小结

image.png 增加节点

image.png

<body>
    <ul>
        <li>我是大毛</li>
        <li>我是二毛</li>
    </ul>
    <script>
        // 二毛   ul.children[1]
        // 1. 创建新的标签节点
        // let div = document.createElement('div')
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')

        li.innerHTML = '我是xiao ming'
        // 2. 追加节点  父元素.appendChild(子元素) 后面追加
        // ul.appendChild(li)
        // 3. 追加节点  父元素.insertBefore(子元素， 放到那个元素的前面)   
        ul.insertBefore(li, ul.children[0])
    </script>
</body>

</html>

克隆节点

image.png 删除节点

image.png 时间对象封装好了

<body>
    <script>
        // let arr = []
        // let arr = new Array()
        // let obj = {}
        // let obj = new Object()

        // new 实例化 时间对象
        // 小括号为空可以得到当前的时间
        let date = new Date()
        console.log(date)
        // 小括号里面写上时间，可以返回指定的时间 
        let last = new Date('2021-8-29 18:30:00')
        console.log(last)
    </script>
</body>

</html>

时间对象的方法

image.png 重绘和回流

image.png

image.png

image.png

image.png 第四天 获取事件对象

image.png

image.png

image.png 事件流

image.png

image.png

image.png

image.png

image.png

image.png

image.png

</head>

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        // 1.l0 on
        // 多次相同的事件，只执行最后一次
        // btn.onclick = function () {
        //     alert('第一次')
        // }
        // btn.onclick = function () {
        //     alert('第二次')
        // }
        // 解绑事件
        // btn.onclick = null
        // 2. addEventListener
        btn.addEventListener('click', add)
        function add() {
            alert('第一次')
        }
        // btn.addEventListener('click', function () {
        //     alert('第二次')
        // })
        btn.removeEventListener('click', add)
    </script>
</body>

</html>

事件委托

image.png

第五天

滚动事件和加载事件 image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

第六天

Windows对象

image.png

image.png

image.png

image.png

1.3 JS 执行机制

image.png

image.png

image.png

image.png

image.png

image.png

image.png

1.4 localtion

image.png

image.png

image.png

image.png

image.png

1.5 navigator对象

image.png

1.6 histroy对象

image.png

image.png

二 swiper

image.png

三 本地存储

image.png

image.png

image.png

image.png

image.png

拓展：自定义属性

image.png


<body>
    <div class="box" data-index="0" data-name="andy"></div>
    <script>
        // 设置自定义属性
        let box = document.querySelector('.box')
        // box.setAttribute('myid', 10)
        // console.log(box.getAttribute('myid'))
        console.log(box.dataset)
        console.log(box.dataset.index)
    </script>
</body>

</html>

第七天>正则表达式

一 正则表达式

image.png

image.png

image.png

image.png

1.2 语法

image.png

image.png

image.png

image.png

image.png

1.3 元字符

image.png

image.png

image.png

image.png

image.png

image.png

2 量词

image.png

image.png

image.png

image.png

3 字符类

image.png

image.png

image.png

image.png

image.png

image.png

1.4 修饰符

image.png

image.png

1.5 change事件


<body>
    <input type="text">
    <input type="password">
    <script>
        let input = document.querySelector('input')
        // 当表单里面的值发生变化的时候触发，和 blur 不一样 
        // input 事件  只要输入就会触发
        // change 事件 是 离开表单时候才触发  并且值有变化
        input.addEventListener('change', function () {
            console.log(111)
        })
    </script>
</body>

</html>

image.png

avatar
文章
阅读
粉丝