Javascript_WebAPI_pink笔记

Web API 基础

作用和分类

• 作用：用JS操作HTML和浏览器
• 分类：DOM（文档对象模型） BOM（浏览器对象模型）

DOM

• 通过JS来操作网页内容

作用

• 开发页面内容特效实现交互

DOM树

• 将HTML文档以树状结构直观表示
• 描述网页内容关系的名词
• 作用：文档树直观的体现了标签与标签之间的关系

DOM对象

• 浏览器根据HTML标签生成的是JS对象

• 所有标签属性都可在对象上找到

• 修改属性会自动映射到标签身上

• DOM核心思想

  • 把网页当作对象来处理

• document对象

  • 是DOM提供的一个对象
  • 它提供的属性和方法都是用来访问和操作网页内容的
  • 网页所有内容都在document中

获取DOM对象

根据css选择器获取DOM元素

• 选择匹配的第一个元素

<ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
</ul>
<script>
const li=document.querySelector('ul li:first-child')
console.dir(li);
</script>

• 选择多个元素

const lis=document.querySelectorAll('ul li')
console.dir(lis);

• 返回一个列表
• 可以修改单个元素的属性，不能修改多个，只能通过遍历
• 哪怕只有一个元素，queryselectorall 得到的是一个伪数组
• 没有pop（）push（）方法

根据其他方法获取DOM元素

（早期）

document.getElementById('nav')
document.getElementsByClassName('w')
document.getElementsByTagName('div')

操作元素内容

修改元素里面的内容

对象.innerText

• 添加、更新文本内容
• 纯文本，不解析标签

const box=document.querySelector('div')

console.log(box.innerText);    // 获取文字内容

box.innerText='box'

对象.innerHTML

• 会解析文本标签

const box=document.querySelector('div')

box.innerHTML='<strong>box</strong>'

// 年会抽奖案例
const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
const random=Math.floor(Math.random()*personArr.length)
console.log(personArr);

const one=document.querySelector('#one')
one.innerHTML=personArr[random]
personArr.splice(random,1)

const two=document.querySelector('#two')
two.innerHTML=personArr[random]
personArr.splice(random,1)

const three=document.querySelector('#three')
three.innerHTML=personArr[random]
personArr.splice(random,1)

console.log(personArr)

操作元素样式属性

• 常用属性：比如src更换图片等，href，src，title等
• 样式属性：
  • 通过style操作css
  • 通过类名
  • 通过classList*********

div.style.backgroundColor='pink'
//小驼峰命名法
div.className='wrapper'
// classname是新值换旧值，可把之前的类名也带上

const div=document.querySelector('div')
div.classList.add('active')
//删除类
div.classList.remove('active')
//切换类---->有就删掉，没有就加上
div.classList.toggle('active')

操作表单元素属性

• 获取表单中值 表单.value

 const uname = document.querySelector("input");
      const ipt = document.querySelector("input");
      //获取表单中值    表单.value
      innerHTML得不到表单的内容
      console.log(uname.value);
      uname.value='new'
      uname.type='password'
      ipt.checked='true'    // 字符串中只有  空  为 false 
      const button=document.querySelector('button')
      console.log(button.disabled);   // disabled 默认false  不禁用

      button.disabled=true    //   禁用

自定义属性

data -

<div data-id="1" data-spm="know">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>

<script>
const one=document.querySelector('div')
console.log(one.dataset);
console.log(one.dataset.id);
console.log(one.dataset.spm);
</script>

定时器-间歇函数setInterval

• 开启定时器
  setInterval（函数名，间隔时间）
• 关闭定时器
  clearInterval(变量名)

事件监听

有事件触发就调用函数做出响应，也称为注册事件

• 三要素

  • 事件源
  • 事件类型
  • 事件调用的函数

• DOM L1
  事件源.on事件=function
  过时，会产生事件覆盖问题

• DOM L2
  元素对象.addEventListener('事件类型',要执行的函数)
  addEventListener可绑定多次，拥有事件更多特性

• DOM L3
  添加了更多事件

事件类型

• 鼠标事件
  • click
  • mouseenter
  • mouseleave

slider.addEventListener('mouseenter',function(){
        clearInterval(s)
      })
slider.addEventListener('mouseleave',function(){
   clearInterval(s)
   // 开启定时器
   s=setInterval(function(){
   // 利用js自动调用点击事件
   next.click()
 },1000)
 })

• 焦点事件
  • focus
  • blur

input.addEventListener('focus',function(){
            resultList.style.display='block'
            input.classList.add('search')
        })
input.addEventListener('blur',function(){
    resultList.style.display='none'
    input.classList.remove('search')
})

• 键盘触发
  • keydown
  • keyup
• 文本事件
  • input

// 获取用户输入的长度
   text.addEventListener('input',function(){
       record.innerHTML=`${text.value.length}/200字`
   })

事件对象

也是个对象，包含事件触发时的相关信息

获取事件对象

• 事件绑定的回调函数的第一个参数就是事件对象
• event ev e

t.addEnentListener('click',function(e){
})

常用属性

• type
• clientX/clientY
• offsetX/offsetY
• key

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。

1. this 本质上是一个变量，数据类型为对象
2. 函数的调用方式不同 this 变量的值也不同
3. 【谁调用 this 就是谁】是判断 this 值的粗略规则
4. 普通函数中this指向window

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

• 把函数当作另外一个函数的参数传递，称为回调函数
• 本质是函数，不过当作参数来用
• 使用匿名函数作为回调函数比较常见

事件

事件流

指完整事件执行过程中的流动路径

事件捕获

父到子

事件冒泡

子到父

阻止冒泡

事件对象.stopPropagation()
阻止流动传播

解绑事件

匿名函数无法被解绑

鼠标经过事件

mouseover ，mouseout 有冒泡事件
mouseenter ，mouseleave 没有冒泡事件（推荐）

两种注册事件的区别

事件委托

是利用事件流特征解决一些开发需求的知识技巧
（例如：多个元素注册事件）

1. for循环
2. 事件委托

原理：给父元素注册事件，当触发子元素时，会冒泡到父元素上，从而触发父元素的事件

<body>
    <ul class="fu">
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>nihao</p>
    </ul>
    <script>
       const fu=document.querySelector('.fu')
       fu.addEventListener('click',function(e){
       // 找到真正触发的元素
        if(e.target.tagName==='LI'){
            e.target.style.color='red'
        }
           
       })
    </script>
</body>

阻止默认行为

e.preventDefault()

页面加载事件

• 加载外部资源（eg. 图片、外联css和javascript等）加载完毕时触发的事件

• 事件名：load

  • 监听页面所有资源加载完毕

  // 等待页面所有资源执行完毕就回去执行回调函数
  window.addEventListener('load',function(){
      const btn=document.querySelector('button')
      btn.addEventListener('click',function(){
      alert('已点击')
    })
  })	
  

  • 也可以针对某个资源绑定load事件
    img.addEventListener('load',回调函数)

• 事件名：DOMContentLoaded

  • 当初始html文档被完全加载和解析完成后，该事件被触发，无需等待样式表、图像等完全加载

  document.addEventListener('DOMContentLoaded',function(){
    // 执行的操作
  })
  

元素滚动事件

eg. 固定导航栏，例如返回顶部

• 事件名:scroll

  	window.addEventListener('scroll',function(){
  	  // 执行的操作
  	})
  

  • 也可以给document或某个元素添加
  • scrollLeft 和scrollTop
    • document.documentElement.scrollTop
    • 可读写
    • 得到的是 数字型，不带单位

页面尺寸事件

• 获取元素的可见部分宽高
• clientWidth和clientHeight 包含padding不包含border

元素尺寸与位置

• 获取元素自身宽高 包含padding和border
• offsetWidth和offsetHeight

总结

日期对象

• 实例化

  //当前时间
  const date=new Date()
  //指定时间
  const date1=new Date('2022-5-1 08:30:51')
  

• 方法
  • 指定格式
    

时间戳

指1970年01月01日00时00分00秒到现在的毫秒数

• getTime方法 （必须实例化）

const date=new Date()
console.log(date.getTime());

• 简写 +new Date（）

console.log(+new Date());

• 使用Date.now() (无需实例化)
  console.log(Date.now());
  只能得到当前的时间戳
  

节点操作

Dom节点

DOM树中每个内容都称为节点

• 节点类型
  • 元素节点
    • 所有的标签 body、div
    • html为根节点
  • 属性节点
    • 所有的属性 href、id、class
  • 文本节点
    • 所有的文本
  • 其他

查找节点

根据节点关系查找

• 父节点查找
  • parentNode
  • 最近一级的父节点，找不到返回null
• 子节点查找
  • childNodes
    • 获得所有的子节点、包括文本节点（空格、换行）、注释节点等
  • children属性
    • 仅获得所有元素节点
    • 返回的 还是一个伪数组
• 兄弟关系
  • 下一个兄弟节点
    • nextElementSibling
  • 上一个兄弟节点
    • previousElementSibling

增加节点

1、创建一个新结点
2、把创建节点的新节点放入到指定元素的内部

//1. 创建节点
const div = document.createElement('div')
//2. 追加节点  作为最后一个子元素
document.body.appendChild(div)

const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
// ul.appendChild(li)
// ul.children
// 3. 追加节点
// insertBefore(插入的元素, 放到哪个元素的前面)
ul.insertBefore(li, ul.children[0])

特殊情况：
1、复制一个原有节点
2、把复制的节点放入到指定的元素内部

• 克隆节点
  元素.cloneNode(布尔值)
  

// 克隆并追加
const ul=document.querySelector('ul')
ul.appendChild(ul.children[0].cloneNode(true))

删除节点

const ul=document.querySelector('ul')
ul.removeChild(ul.children[0])

windows对象

BOM（浏览器对象模型）

定时器（延时函数）

setTimeout（回调函数，等待毫秒数）// 让代码延迟执行

• 只执行一次

JS执行机制

• JS为单线程，即同一时间只能做一件事

• 浏览器可以多线程

• 同步任务都在主线程上执行，形成一个执行栈

• 异步任务

  • 普通事件
  • 资源加载
  • 定时器

• 异步任务相关添加到任务队列中

• 过程
  1、先执行执行栈中的同步任务
  2、异步任务放入任务队列中
  3、一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
  
  由于主线程不断地重复获得任务、执行、再获取、执行，这种机制被称为事件循环
  （event loop）

location 对象

location数据类型：对象，其拆分并保存了URL地址的各个组成部分

<body>
    <a href="http://www.itcast.cn">支付成功<span>5</span>秒后跳转到首页</a>
    <script>
      const t = document.querySelector("span");
      let num = 5;
      const time=setInterval(function () {
        num--;
        t.innerHTML = num;
        if(num===0){
            clearInterval(time)
            location.href="http://www.itcast.cn"
        }
      }, 1000);
    </script>
 </body>

• reload

location.reload(true)   // 用来刷新页面，传入true表示强制刷新

navigator

location数据类型：对象，记录了浏览器自身的相关信息

// 自动跳转到移动端页面
!(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
      const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      // 如果是Android或iPhone，则跳转至移动站点
      if (android || iphone) {
        location.href = 'http://m.itcast.cn'
      }
    })();

history 对象

history数据类型：对象，与浏览器地址栏操作相对应，如前进、后退、历史记录等

本地存储

数据存储在用户浏览器中

本地存储分类-localStorage

• 可将数据永久存储在本地，除非手动删除
• 同一浏览器可共享
• 键值对存储
• 本地存储只能存储字符串数据类型，不能存复杂数据类型

// 存储数据
localStorage.setItem('uname','feng')
// 获取数据
console.log(localStorage.getItem('uname'));
// 删除本地存储
localStorage.removeItem('uname')

本地存储分类-sessionStorage

• 生命周期为关闭浏览器窗口
• 在同一个窗口（页面）下数据可以共享
• 以键值对形式存储使用
• 用法与localStorage基本相同

存储复杂数据类型

• 需将复杂数据类型转换成JSON字符串，再存储到本地
  • JSON.stringify(复杂数据类型)
• 把JSON字符串转换为对象
  • JSON.parse(字符串类型)

字符串拼接新方法

• map 可遍历数组处理数据，并返回新数组

• join 用于把数组中的所有元素转换成一个字符串
  （小括号为空默认为逗号分隔）

const arr1=['red','yellow','blue']
const newArr=arr1.map(function(ele,index){
  console.log(ele)  //数组的值
  console.log(index)  // 索引
  return ele+'颜色'
})
console.log(newArr);

console.log(arr1.join('*'))   //red*yellow*blue

正则表达式

用于匹配字符串中字符组合的模式

• 语法
  const reg=/表达式/
  1、定义正则表达式
  2、检测是否匹配
• test()

reg.test(被检测的字符串)  // 用来查看正则表达式与指定字符串是否匹配

• exec()

reg.exec(被检测的字符串)  // 在指定字符串中执行一个搜索匹配

匹配成功，exec()返回一个数组，否则返回null

元字符

具有特殊含义的字符，极大提高灵活性和强大的匹配功能

• 边界符
• 量词
• 字符类

// 边界符
console.log(/哈/.test('哈哈'));
console.log(/^哈/.test('哈哈')); // ^ 表示以它开头
console.log(/哈$/.test('哈哈')); // $ 表示以它结尾
console.log(/^哈$/.test('哈哈')); // 加了开头和结尾表示精确匹配，只有一个
// 量词
console.log(/^哈*$/.test('哈哈'));  // * 重复0次或多次  >=0
console.log(/^哈+$/.test('哈哈'));  // + 重复1次或多次  >=1
console.log(/^哈?$/.test('哈哈'));  // * 重复0次或1次
console.log(/^哈*$/.test('哈哈'));  // {n} 重复n次
console.log(/^哈+$/.test('哈哈'));  // {n,} 重复n次或多次  >=n
console.log(/^哈?$/.test('哈哈'));  // {n,m} 重复n到m次

//字符类

逗号左右两侧不要空格

- [abc] 只要包含abc其中一个即可
console.log(/[abc]/.test('baby'));  //true
-  [^] 中括号里加^表示取反
-  .匹配除换行符之外的任何单个字符

修饰符

约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配

• 语法
  /表达式/修饰符

• i 不区分大小写

• g 匹配所有满足正则表达式的结果（全局）

• replace

  • 字符串.replace(/正则表达式/，‘替换的文本’)