JS进阶使用

最新推荐文章于 2024-09-13 10:46:15 发布
最新推荐文章于 2024-09-13 10:46:15 发布
阅读量568 收藏 13
点赞数 28
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80078038/article/details/138529625
版权

APIs3

1.DOM-获取元素

1.变量声明

const优先，var首先被排除

数组，对数组添加元素、删除元素之类的操作，可以用const， 因为数组地址没变

原因：

const语义化更好

很多变量声明的时候就知道会不会改

建议：

有变量先给const，如果发现后面要被修改的，再修改为let

2.作用和分类

作用：使用JS去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM（文档对象模型）

作用：开发网页内容特效和实现用户交互

操作网页内容

3.DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档数或DOM树

描述网页内容关系的名词

作用：文档树直观地体现了标签与标签之间的关系

4.DOM对象
1）浏览器根据html标签生成的JS对象

  • 所有的标签属性都可以在这个对象上面找到

  • 修改这个对象的属性会自动映射到标签身上

2）DOM的核心思想：

把网页内容当做对象来处理

3）document对象

是DOM里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的

网页所有内容都在document里面

5.获取DOM元素
1.根据CSS选择器来获取DOM元素

1）选择匹配的第一个元素

语法：

document.querySelector(' css选择器 ')

参数：

包含一个或多个有效的CSS选择器字符串，必须要加 引号

返回值：

CSS选择器匹配的第一个元素，一个HTMLElement对象

如果没匹配到，则返回null

2）匹配多个元素

语法：

document.querySelectorAll(' CSS选择器 ')

参数：

包含一个或多个有效的CSS选择器字符串，必须要加 引号

返回值：

对象集合

得到一个伪数组：

有长度有索引号的数组

但是没有pop()、push()的方法

image-20240420181149857

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        123
    </div>
    <script>
        const box = document.querySelector('div')
        console.log(box);
    </script>
</body>
</html>

image-20240420181928901

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        const li = document.querySelectorAll('ul li')
        console.log(li);
    </script>
</body>
</html>

2.其他获取DOM元素方法

document.getElementById( ' ' ) ID

document.getElementByTagName( ' ' ) 标签名

document.getElementByClassName( ' ' ) 类名

6.操作元素内容
1）对象.innerText属性

1.将文本内容添加、更新到任意标签位置

2.显示纯文本，不解析标签

image-20240422160140862

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        文字内容
    </div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.innerText)
        box.innerText = 'aaa'
    </script>
</body>
</html>

image-20240422160512404

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        文字内容
    </div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.innerText)
        box.innerText = '<strong>aaa</strong>'
    </script>
</body>
</html>

2）对象.innerHTML属性

1.将文本内容添加、更新到任意标签位置

2.会解析标签，多标签建议使用模版字符

注：button获得元素用该方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        文字内容
    </div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.innerText)
        box.innerHTML = '<strong>aaa</strong>'
    </script>
</body>
</html>

image-20240422163118408

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <strong>抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h2>二等奖：<span id="two">???</span></h2>
        <h3>三等奖：<span id="three">???</span></h3>
​
    </div>
    <script>
        const personArr = ['1','2','3','4','5','6']
        const random = Math.floor(Math.random()*personArr.length)
        console.log(personArr[random]);
        const one = document.querySelector('#one')
        one.innerHTML = personArr[random]
        personArr.splice(random,1)
        //console.log(personArr);
​
        const random1 = Math.floor(Math.random()*personArr.length)
        const two = document.querySelector('#two')
        two.innerHTML = personArr[random1]
        personArr.splice(random1,1)
        
        const random3 = Math.floor(Math.random()*personArr.length)
        const three = document.querySelector('#three')
        three.innerHTML = personArr[random3]
        personArr.splice(random3,1)
    </script>
</body>
</html>

7.操作元素属性

注：取body标签内的直接用document.body即可

1）操作元素常用属性

如：src,href,title

语法：

对象.属性 = 值

image-20240422163729510

image-20240422163746557

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    <script>
        const img = document.querySelector('img')
        img.src = "./images/2.jpg"
    </script>
</body>
</html>

2）操作元素样式属性

1.通过style属性操作CSS

语法：

对象.style.样式属性 = 值

注：出现多组单词的采取小驼峰命名

image-20240422214636775

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '300px'
    </script>
</body>
</html>

image-20240422214845532

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '300px'
        box.style.backgroundColor = 'red'
        box.style.border = '4px solid blue'
    </script>
</body>
</html>

2.操作类名操作CSS

语法：

元素.className = 'active' //active是一个css类名

注：

1.class是关键字，所以用className来代替

image-20240422220338130

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 1px solid red;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <script>
       const div = document.querySelector('div')
       div.className = 'box'
    </script>
</body>
</html>

这种操作会导致原来的类名被覆盖，如果需要保存原来的类名，则需要进行下面这个操作div.className = 'box1 box'

3.通过classList操作类控制CSS

这个方法类名不加 .

语法：

1）追加一个类

元素.classList.add('类名')

image-20240422221748945

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            color: #333;
        }
        .active{
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        文字
    </div>
    <script>
        const box = document.querySelector('div')
        box.classList.add('active')
    </script>
</body>
</html>

2）删除一个元素

元素.classList.remove('类名')

image-20240422221850493

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            color: #333;
        }
        .active{
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        文字
    </div>
    <script>
        const box = document.querySelector('div')
        box.classList.add('active')
        box.classList.remove('box')
    </script>
</body>
</html>

3）切换一个类（有就切换，没有就添加）

元素.classList.toggle('类名')

3）操作元素表单属性

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

注：表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除了该属性

image-20240423135449751

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" value="电脑">
  <script>
    const uname = document.querySelector('input')
    console.log(uname.value);
    uname.value = '我要买电脑'
    console.log(uname.type);
    uname.type = 'password'
  </script>
</body>
</html>

image-20240423140655506

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="checkbox" name="" id="" >
  <button > 点击</button>
  <script>
    const ipt = document.querySelector('input')
    ipt.checked = true
    const button = document.querySelector('button')
    button.disabled = true
  </script>
</body>
</html>

4）自定义属性

标准属性：标签天生自带的属性

自定义属性：

1.在html5中推出来专门的data-自定义属性

2.在标签上一律以data-开头

3.在DOM对象上一律以dataset对象方式获取

image-20240423141801858

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div data-id="1" data-spm="不知道">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>
</body>
</html>

8.定时器-间歇函数
1）介绍

2）基本使用

1.开启定时器

setInterval(函数，间隔时间)

let 变量名 = setInterval(函数，间隔时间)

作用：每间隔一段时间回头调用这个函数

间隔时间：毫秒

注：

1.函数名字不需要加括号

2.定时器返回的是一个id数字

image-20240423143328733

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    let i = 0
    setInterval(function(){
      i++
      document.write(i+'<br>')
    },1000)
  </script>
</body>
</html>

image-20240423143442317

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    function fn(){
      console.log('一秒钟执行一次');
    }
    setInterval(fn,1000)
  </script>
</body>
</html>

注：函数名不要加小括号

下面这种方法极为少见

image-20240423143706897

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    function fn(){
      console.log('一秒钟执行一次');
    }
    setInterval('fn()',1000)
  </script>
</body>
</html>

2.关闭定时器

语法：

clearInterval(变量名)

image-20240423144954293

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    let i = 0
    function fn(){
      document.write(i++)
      if(i===10){
      clearInterval(n)
    }
    }
    let n = setInterval(fn,1000)
   
    
  </script>
</body>
</html>

image-20240423155936160

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button  class="btn" disabled>我已阅读用户协议(5)</button>

  <script>
    let i = 5
    const btn = document.querySelector('.btn')
    function fn(){
      i--
      
      btn.innerHTML = `我已阅读用户协议(${i})`
      if(i === 0){

        clearInterval(n)
        btn.disabled = false
        btn.innerHTML = '同意'
      }
    
    }
    let n = setInterval(fn,1000)
   
    
  </script>
</body>
</html>

2.DOM-事件基础

1.事件监听

事件：

事件实在编程时系统内发生的动作或者发生的事情

事件监听：

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件

，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等。

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

1.事件源：哪个dom元素被事件触发了，要获取dom元素

2.事件类型：用什么方式触发，比如鼠标单击click,鼠标经过mouseover等

3.时间调用的函数：要做什么事

注意：

1.事件类型要加 引号

2.函数是点击之后再去执行，每次点击都会执行一次

image-20240423161336911

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>点击</button>
  <script>
    const btn  = document.querySelector('button')
    btn.addEventListener('click',function(){
      alert('111')
    })
  </script>
</body>
</html>

去除广告

image-20240423162535315

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 500px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      position: relative;
    }
    .smallbox{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    我是广告
    <div class="smallbox">
      X
    </div>
  </div>
  <script>
    const box1 = document.querySelector('.smallbox')
    const box = document.querySelector('.box')
    box1.addEventListener('click',function(){
      box.style.display = 'none'
    })
  </script>
</body>
</html>
2.事件监听版本
1）DOM L0

事件源.on事件 = function(){}

2）DOM L2

事件源.addEventListener(事件,事件处理函数)

区别：

on方式会被覆盖，addEventListener方式可多次绑定，拥有事件更多特性

3.事件类型
1）鼠标事件（鼠标触发）

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

image-20240426164713221

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
    <script>
        const div = document.querySelector('div')
        div.addEventListener('mouseenter',function(){
            console.log('111');
        })
        div.addEventListener('mouseleave',function(){
            console.log('222');
        })
    </script>
</body>
</html>

2）焦点事件（表单获得光标）

focus 获得焦点

blur 失去焦点

image-20240426165237351

image-20240426165246356

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('focus',function(){
            console.log('有焦点');
        })
        
        input.addEventListener('blur',function(){
            console.log('无焦点');
        })
    </script>
</body>
</html>

image-20240426165733922

image-20240426165741955

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <input type="text">
    <div>

    </div>
    <script>
        const input = document.querySelector('input')
        const div = document.querySelector('div')
        input.addEventListener('focus',function(){
            div.style.display = 'block'
        })
        
        input.addEventListener('blur',function(){
            div.style.display = 'none'
        })
    </script>
</body>
</html>

3）键盘事件（键盘触发）

Keydown 键盘按下触发

Keyup 键盘弹起触发

image-20240427101837933

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <input type="text">
    <div>

    </div>
    <script>
        const input = document.querySelector('input')
       input.addEventListener('keydown',function(){
        console.log('按下了');

       })
       input.addEventListener('keyup',function(){
        console.log('弹起了');
        
       })
    </script>
</body>
</html>

4）文本事件（表单输入触发）

input 用户输入事件

image-20240427102059093

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
       input.addEventListener('input',function(){
        console.log(input.value);

       })
       
    </script>
</body>
</html>
4.事件对象
1）什么事事件对象

  • 也是一个对象，这个对象里有事件触发时的相关信息

  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

2）使用场景

  • 可以判断用户按下哪个键，比如按下回车键可以发布新闻

  • 可以判断鼠标点击了哪个元素，从而做相应的操作

3）语法

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

  • 一般命名为event,ev,e

元素.addEventListener('click',function(e){

})

4)常用事件对象属性

1.type 获取当前的事件类型

2.clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置

3.offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置

4.key

1）用户按下的键盘的值

2）现在不提倡使用keyCode

image-20240427120008323

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
       input.addEventListener('keyup',function(e){
        if(e.key==='Enter'){
            alert('高绍贵在偷看美女')
        }
       })
       
    </script>
</body>
</html>

5.环境对象
1）环境对象

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

2）作用

弄清楚this的指向，可以让我们代码更简洁

  • 函数的调用方式不同，this指代的对象也不同

  • （谁调用，this就是谁）是判断this指向的粗略规则

  • 直接调用函数，其实相当于是window.函数，所以this代指window

6.回调函数

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

function fn(){
            console.log('11');
        }
       setInterval(fn,1000)

fn就是回调函数

3.DOM-事件进阶

1.事件流
1.事件流与两个阶段说明

  • 事件流指的是事件完整执行过程中的流动路径（捕获阶段、冒泡阶段）

2.事件捕获
1）概念

从DOM的根元素开始去执行对应的事件（从里到外）

2）代码

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

3.事件冒泡
1）概念

当一个元素的事件被处罚时，同样的事件将会在该元素的所有祖先元素中依次被触发

（简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件）

注：事件冒泡是默认存在的

4.阻止冒泡
1）语法

事件对象.stopPropagation( )

可阻断事件流动传播，冒泡阶段和捕获阶段都有效

image-20240427174517921

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            height: 500px;
            width: 500px;
            background-color: red;
        }
        .son{
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>
</head>
<body>
    <script>
       const fa = document.querySelector('.father')
       const son = document.querySelector('.son')
       document.addEventListener('click',function(){
        alert('grandefather')
       })
        fa.addEventListener('click',function(){
        alert('father')
       })
       son.addEventListener('click',function(e){
        alert('son')
        e.stopPropagation()
       })
    </script>
</body>
</html>

5.解绑事件
1.L0事件解除方式（传统on注册）

直接用null覆盖偶就可以实现事件的解绑

语法：

btn.onclick = function(){
        alert('点击了')
       }
       btn.onclick = null
2.L2事件解除方式（事件监听注册）
function fn(){
            alert('点击了')
        }
        const btn = document.querySelector('button')
        btn.addEventListener('click',fn)
        btn.removeEventListener('click',fn)

注：匿名函数不可解绑

2.事件委托
1.概念

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：

减少注册次数，提高程序性能

2.原理：

事件委托其实是利用事件冒泡的特点

给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件

3.实现

事件对象.target.tagName可以获得真正触发事件的

image-20240428220601583

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
    
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
    </ul>
    <script>
      const ul = document.querySelector('ul')
      ul.addEventListener('click',function(){
       alert('123')
      })
       
    </script>
</body>
</html>

image-20240428221731123

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
    
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>dasdas dasd as</p>
        <h1>dsadasd asd </h1>
    </ul>
    <script>
      const ul = document.querySelector('ul')
      ul.addEventListener('click',function(e){
       if(e.target.tagName === 'LI')
       {
        e.target.style.color = 'red'
       }
       //e.target是选定的那个对象
      })
       
    </script>
</body>
</html>
4.阻止默认行为
语法：

e.preventDefault()

image-20240428222357765

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
    
</head>
<body>
    <form action="">
        <input type="submit" value="免费注册">
    </form>
    <script>
      const form = document.querySelector('form')
      form.addEventListener('submit',function(e){
        e.preventDefault()
      })
    </script>
</body>
</html>

3.其他事件
1.页面加载事件
1）加载外部资源加载完毕时触发的事件

事件名：load

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

  • 给Window添加load事件

语法：window.addEvenListener('load',function(){

})

注：不仅可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

2）DOMContentLoaded事件

  • 当厨师的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

  • 事件名：DOMContentLoaded事件

  • 监听页面DOM加载完毕：

给document添加DOMContentLoaded事件

语法：document.addEvenListener('DOMContentLoaded',function(){

})

2.元素滚动事件
1）元素滚动

滚动条在滚动的时候持续触发的事件

事件名：scroll

监听整个页面滚动

window.addEvenListener('scroll',function(){

})

给window或document添加scroll事件

监听某个元素的内部滚动直接给某个元素加即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 500px;
        }
    </style>
</head>
<body>
    
    <script>
        window.addEventListener('scroll',function(){
            console.log('aaaa');
        })
    </script>
</body>
</html>

2）获取位置

属性：scrollLeft scrollTop(属性)

  • 获取被卷去的大小

  • 获取元素内容往左、往上滚出去看不到的距离

  • 这两个值是可读写的

  • document.documentElement.scrollTop 相对于整个页面(数字型，不要带单位)

  • 尽量在scrool事件里面获取被卷去的距离

image-20240428231046667

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        div{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
    </div>
    <script>
        const div = document.querySelector('div')
        div.addEventListener('scroll',function(){
            console.log(div.scrollTop);
        })
    </script>
</body>
</html>

image-20240429162643884

image-20240429162722742

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        div{
            display: none;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
    </div>
    <script>
        const div = document.querySelector('div')
        window.addEventListener('scroll',function(){
            //console.log(document.documentElement.scrollTop);    //获得html标签
            const n = document.documentElement.scrollTop
            if(n >= 100)
            {
                //console.log('aaa');
                div.style.display = 'block'
            }
            else{
                div.style.display = 'none'
            }
        })
    </script>
</body>
</html>
3)滚动到指定的坐标

  • scrollTo方法可把内容滚动到指定坐标

  • 语法：

元素.scrollTo(0,1000)

const one = document.querySelector('.one')
        one.addEventListener('click',function(){
            window.scrollTo(0,0)
        })

3.页面尺寸事件
1）窗口尺寸改变时触发事件

resize

window.addEventListener('resize',function(){

})

image-20240429165438021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //resize    浏览器窗口大小发生变化的时候触发的事件
        window.addEventListener('resize',function(){
            console.log(123)  })
        
    </script>
</body>
</html>

检测屏幕宽度

image-20240429165625559

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //resize    浏览器窗口大小发生变化的时候触发的事件
        window.addEventListener('resize',function(){
            let w = document.documentElement.clientWidth
            console.log(w);
        })
        
    </script>
</body>
</html>
2）获取元素宽高

  • 获取宽高

    • 获取元素的可见部分宽高（不包含边框，margin,滚动条等）

    • clientWidth和clientHeight

4.元素尺寸与位置
1）获取宽高

  • 获取元素的自身宽高、包含自身元素设置的宽高、padding、border

  • offsetWidth 和 offsetHeight

  • 获取出来的是数值

  • 获取的是可视宽高，如果盒子是隐藏的，获取结果是0

2）获取位置

  • 获取元素距离自己定位父级元素的左、上距离

  • offsetLeft 和 offsetTop是只读属性

image-20240429223833081

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        console.log(div.offsetLeft);
    </script>
</body>
</html>

image-20240429224027840

image-20240429224051772

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
            position: relative;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <script>
        const div = document.querySelector('div')
        const p = document.querySelector('p')
        console.log(div.offsetLeft)
        console.log(p.offsetLeft)
    </script>
</body>
</html>

注：检测盒子的位置，最近一级带有定位的祖先盒子

image-20240429225306192

image-20240429225317057

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 5000px;
        }
        .one{
            display: none;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 1px solid black;
            position: absolute;
            right: 100px;
            top: 200px;
        }
        .two{
            margin-top: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="two">adadsasdsad</div>
    <div class="one">
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaa
    </div>
    <script>
        const div = document.querySelector('.one')
        const div1 = document.querySelector('.two')
        window.addEventListener('scroll',function(){
            const n = document.documentElement.scrollTop
            if(n >= div1.offsetTop)
            {
                
                div.style.display = 'block'
            }
            else{
                div.style.display = 'none'
            }
        })
    </script>
</body>
</html>

固定导航栏

image-20240429231747274

image-20240429231758656

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header{
            position: fixed;
            width: 100%;
            height: 70px;
            background-color: pink;
            z-index: 1;
        }
        .content{
            width: 800px;
            height: 2000px;
            background-color: red;
            margin: auto;
            position: relative;
        }
        .sk{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="header">导航栏</div>
    <div class="content">
        <div class="sk">秒杀</div>
    </div>
    <div class="backtop">
        <img src="" alt="">
        <a href=""></a>
    </div>
    <script>
        const header = document.querySelector('.header')
        const sk = document.querySelector('.sk')
        window.addEventListener('scroll',function(){
            const n = document.documentElement.scrollTop
            if(n>=sk.offsetTop)
            {
                header.style.top = 0
            }
            else{
                header.style.top = '-80px'
            }
        })
    </script>
</body>
</html>

4.DOM-节点操作

1.日期对象
1.简介

日期对象：用来表示时间的对象

作用：得到当前系统时间

2.实例化

  • 一般有new关键字时，这个操作一般被称为实例化

  • 创建一个时间对象并获取时间

    • 获得当前时间

      const date = new Date( )

    • 获得指定时间

image-20240430140726379

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const date = new Date()
        console.log(date);
        const date1 = new Date('2022-5-1 08:30:00')
        console.log(date1);
    </script>
</body>
</html>

3.时间对象方法

image-20240430141052060

image-20240430141654893

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const date = new Date()
        console.log(date.getFullYear());
        console.log(date.getMonth()+1);
        console.log(date.getDay());//返回的星期几，星期天是0
        console.log(date.getDate());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
    </script>
</body>
</html>

4.时间戳
1）介绍

时间戳是只1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

2）算法

  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

  • 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

  • 1000ms转换为就是0小时0分1秒

3）获取时间戳的方法

1.getTime()方法

image-20240430145724932

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

2.+new Date()方法

注：无序实例化

既可以返回当前时间的时间戳，又可以返回指定时间的时间戳

image-20240430145850399

console.log(+new Date());

3.Date.now()方法

注：

无序实例化

但只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

image-20240430145932128

 console.log(Date.now());

image-20240430145940294

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="one"></div>
    <div class="two"></div>
    <script>
        const date = new Date()
        console.log(date.getTime());
        console.log(+new Date());
        console.log(Date.now());
    </script>
</body>
</html>
2.节点操作
1）DOM节点
1.DOM节点

DOM树里每一个内容都称之为节点

2.节点类型

  • 元素节点

    • 所有标签，比如body,div

    • html是根节点

  • 属性节点

    • 所有的属性，比如href

  • 文本节点

    • 所有的文本

  • 其他

2）查找节点
1.节点关系

父节点

子节点

兄弟节点

2.父节点查找

  • parentNode属性

  • 返回最近一级的父节点，找不到返回为null

语法：子元素.parentNode

关闭广告

image-20240430164928955

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 500px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      position: relative;
    }
    .smallbox{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    我是广告
    <div class="smallbox">
      X
    </div>
  </div>
  <script>
    const box1 = document.querySelector('.smallbox')
    //const box = document.querySelector('.box')
    box1.addEventListener('click',function(){
      this.parentNode.style.display = 'none'
    })
  </script>
</body>
</html>

选择删除哪一个广告，点击哪一个哪一个就消失

image-20240430165532707

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 500px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      position: relative;
    }
    .smallbox{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">
    我是广告
    <div class="smallbox">
      X
    </div>
  </div>
  <div class="box">
    我是广告
    <div class="smallbox">
      X
    </div>
  </div>
  <div class="box">
    我是广告
    <div class="smallbox">
      X
    </div>
  </div>
  <script>
    const one = document.querySelectorAll('.smallbox')
    for(let i = 0;i<one.length;i++)
    {
        one[i].addEventListener('click',function(){
            this.parentNode.style.display = 'none'
        })
    }
  </script>
</body>
</html>

3.子节点查找

  • childNodes

    • 获得所有子节点、包括文本节点（空格、换行）、注释节点等

  • children属性（重点）

    • 仅获得所有元素节点

    • 返回的还是一个伪数组

语法：父元素.children

4.兄弟关系查找

1.下一个兄弟节点

nextElementSibling属性

2.上一个兄弟节点

previousElementSibling属性

3）增加节点
1.创建节点

语法：document.createElement('标签名')

2.追加节点

1）插入到父元素的最后一个子元素：

语法：父元素.appendChild(要插入的元素)

image-20240505172439982

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <script>
    const li = document.createElement('li')
    const ul = document.querySelector('ul')
    li.innerHTML = 'aaaa'
    ul.appendChild(li)
  </script>
</body>
</html>

2）插入到父元素中某个子元素的前面：

语法：父元素.insertBefore(要插入的元素，在哪个元素前面)

image-20240505173220108

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <script>
    const li = document.createElement('li')
    const ul = document.querySelector('ul')
    li.innerHTML = 'aaaa'
    ul.insertBefore(li,ul.children[0])
    
  </script>
</body>
</html>
3.克隆节点

语法：元素.cloneNode(布尔值)

会克隆出一个跟原标签一样的元素，括号内传入布尔值

  • 若为true,则克隆时会包含后代节点一起克隆

  • 若为false,则克隆时不包含后代节点

  • 默认为false

image-20240505175604041

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.appendChild(ul.children[0].cloneNode(true))
  </script>
</body>
</html>

image-20240505175652626

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.appendChild(ul.children[0].cloneNode())
  </script>
</body>
</html>

4）删除节点

注：

  • 在js原生dom操作中，要删除元素必须通过 父元素 删除

  • 如果不存在 父子关系则删除不成功

  • 删除节点和隐藏节点有区别：隐藏节点，节点还存在；删除节点，节点就在html中消失

语法：父元素.removeChild(要删除的元素)

image-20240505180346130

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.removeChild(ul.children[0])
  </script>
</body>
</html>

3.M端事件

  • 触屏事件touch

  • touch对象代表一个触摸点

  • 触屏事件

image-20240505192636167

image-20240505193133020

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    div.addEventListener('touchstart',function(){
      console.log(111);
    })
    div.addEventListener('touchstart',function(){
      console.log(222);
    })
    div.addEventListener('touchmove',function(){
      console.log(333);
    })
  </script>
</body>
</html>

4.JS插件

image-20240506160643787

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./swiper/swiper.min.css">
  <style>
    *{
      padding: 0;
      margin: 0;

    }
    .box{
      width: 800px;
      height: 200px;
      background-color: pink;
      margin: 300px auto;
    }
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  
</head>
<body>
  <div class="box">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <script src="./swiper/swiper.min.js">
     var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
</body>
</html>

5.BOM-操作浏览器

1）window对象

1.BOM（浏览器对象模型）

  • BOM（Browser Object Model）是浏览器对象模型

  • window对象是一个全局变量，也可以说是js中的顶级对象

  • 像document、alert()、console.log()、这些都是window属性，基本BOM的属性和方法都是Window的

  • 所有通过var定义在全局作用域中的变量、函数都会变成Window对象的属性和方法

  • Window对象下的属性和方法调用的时候可以省略window

2.定时器-延时函数

  • JS内置的一个用来让代码延迟执行的函数，叫setTimeout

  • 语法： setTimeout(回调函数,等待的毫秒数)

  • setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

  • 清楚延时函数：

    let timer = setTimeout(回调函数,毫秒数)
    clearTimeout(timer)

  • 注：

    • 延时器需要等待，后面代码先执行

    • 每一次调用延时器都会产生一个新的延时器

image-20240506163945676

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    setTimeout(function(){
      console.log('2s到了');
    },2000)
    
  </script>
</body>
</html>

image-20240506164616177

image-20240506164600984

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <img src="./images-chifeng/1.jpg" alt="">
  <script>
    const img = document.querySelector('img')
    setTimeout(function(){
      img.style.display = 'none'
    },2000)
    
  </script>
</body>
</html>

3.JS执行机制

JS大特点： 单线程，同一时间只能做一件事

JS脚本可以创建多个线程

1）同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

2）异步

在做一件事时，这件事会花费很长时间，在做这个事的同时，可以去处理别的事情

3）同步任务

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

4）异步任务

js的异步是通过回调函数实现的

1.普通事件

如：click,resize等

2.资源加载

如load、error

3.定时器

如：setInterval、setTimeout等

异步任务相关添加到任务队列中（任务队列也称为消息队列

5）执行机制

1.先执行执行栈中的同步任务

2.异步任务放入任务队列中

3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行

image-20240506190248152

<script>
    console.log(1);
    console.log(2);
    setTimeout(function(){
      console.log(3);
    },2000)
    console.log(4);
  </script>

6）事件循环

主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制被称为事件循环

4.location对象
1）location

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

2）属性方法
1.href属性

获取完整的URL地址，对其赋值时用于地址的跳转

image-20240506192302867

image-20240506192333946

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="./aaaa.html">支付成功   <span>5</span>s后跳转首页</a>
  <script>
    const a = document.querySelector('a')
    let i = 5
    let timer = setInterval(function(){
      i--
      a.innerHTML = `支付成功   <span>${i}</span>s后跳转首页`
      if(i === 0)
      {
        clearTimeout(timer)
        location.href = './aaaa.html'
      }
    },1000)
  </script>
</body>
</html>
2.search属性

获取地址中携带的参数，符号？后面部分

语法：console.log(location.search)

image-20240506192928191

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input type="text" name="userName">
    <input type="password" name="password">
    <button>提交</button>
  </form>
  <script>
    console.log(location.search);
  </script>
</body>
</html>

3.hash属性

获取地址中的哈希值，符号#后面部分

image-20240506193741923

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input type="text" name="userName">
    <input type="password" name="password">
    <button>提交</button>
  </form>
  <a href="#./my">我的</a>
  <a href="#/aaa">aaa</a>
  <script>
    console.log(location.hash);
  </script>
</body>
</html>
4.reload方法

用来刷新当前页面，传入参数true时表示强制刷新

 const reload = document.querySelector(".reload")
    reload.addEventListener('click',function(){
      console.log(111);
      location.reload()
      
    })

5.navigator对象
1）navigator

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

2）属性方法
1.userAgent

检测浏览器的版本及平台

6.history对象
1）history

数据类型是对象，主要管理历史记录该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

2）属性方法
1.back()

后退

2.forward()

前进

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>后退</button>
  <button>前进</button>
  <script>
   const back = document.querySelector('button')
   const forward = back.nextElementSibling
   back.addEventListener('click',function(){
    history.back()
   })
   forward.addEventListener('click',function(){
    history.forward()
   })
  </script>
</body>
</html>

3.go(参数)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>后退</button>
  <button>前进</button>
  <script>
   const back = document.querySelector('button')
   const forward = back.nextElementSibling
   back.addEventListener('click',function(){
    history.go(-1)
   })
   forward.addEventListener('click',function(){
    history.go(1)
   })
  </script>
</body>
</html>

2）本地储存

1.本地存储介绍

  • 数据存储在 用户浏览器 中

  • 设置、读取方便、甚至页面刷新不丢失数据

  • 容量较大

2.本地存储分类
1）localStorage
1.作用：

可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在

2.特性：

  • 可以多窗口共享（同意浏览器可以共享）

  • 以键值对的形式存储使用

3.语法：

存储数据：

localStorage.setItem(key,value)

image-20240506214702502

localStorage.setItem('uname','jiumeng ')

获取数据：

localStorage.getItem(key)

image-20240506214856910

 localStorage.setItem('uname','jiumeng ')
 console.log(localStorage.getItem('uname'));

删除数据：

localStorage.removeItem(key)

image-20240506215018890

localStorage.setItem('uname','jiumeng ')
console.log(localStorage.getItem('uname'));
localStorage.removeItem("uname")

注：本地存储只能存储字符串

2）sessionStorage
1.特性：

  • 生命周期为关闭浏览器窗口

  • 在同一个窗口下数据可以共享

  • 以键值对的形式存储使用

  • 用法与localStorage基本相同

3.存储复杂数据类型

需要将复杂数据类型转换成JSON字符串，再储存到本地

语法：JSON.stringify(复杂数据类型)

image-20240506221605180

const obj = {
      uname:'jiumeng',
      age:19,
      gender:'男'
    }
    localStorage.setItem('obj',JSON.stringify(obj))

将字符串转化为对象

image-20240506221756885

const obj = {
      uname:'jiumeng',
      age:19,
      gender:'男'
    }
    localStorage.setItem('obj',JSON.stringify(obj))
    console.log(JSON.parse(localStorage.getItem('obj')));

6.补充

1.去除字符串左右两侧空格

image-20240427152846897

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       const str = '           dasdas da    '
       console.log(str.trim());
    </script>
</body>
</html>
2.计时器
1）

image-20240430143554860

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        
        const div = document.querySelector('div')
        function myDate(){
            const date = new Date()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getSeconds()
            return `今天是:${date.getFullYear()}年${date.getMonth() + 1}月${h}:${m}:${s}`
        }
        div.innerHTML = myDate()//清除开始时的空白
        setInterval(function(){
            div.innerHTML = myDate()
        },1000)
    </script>
</body>
</html>
2）

image-20240430144047614

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="one"></div>
    <div class="two"></div>
    <script>
        
        const div = document.querySelector('div')
        const div1 = document.querySelector('.one')
        const div2 = document.querySelector('.two')
        const date = new Date()
        div.innerHTML = date.toLocaleString()
        div1.innerHTML = date.toLocaleDateString()
        div2.innerHTML = date.toLocaleTimeString()
    </script>
</body>
</html>

3）

image-20240430144309738

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="one"></div>
    <div class="two"></div>
    <script>
        
        const div = document.querySelector('div')
        const date = new Date()
        div.innerHTML = date.toLocaleString()
        setInterval(function(){
            const date = new Date()
            div.innerHTML = date.toLocaleString()
        },1000)
    </script>
</body>
</html>

3.倒计时

image-20240430163308519

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span id="hour">
        00      :
    </span>
    <span id="minutes">
        25 :
    </span>
    <span id="second">
        20
    </span>
    <script>
        
        function getCountTime(){
            const now = +new Date()
        const last = +new Date('2024-5-1 18:30:00')
        const count = (last - now) / 1000
        let d = parseInt(count/60/60/24)
        let h = parseInt(count/60/60%24)
        let m = parseInt(count/60%60)
        let s = parseInt(count%60)
        const hour = document.querySelector('#hour')
        const minutes = document.querySelector('#minutes')
        const second = document.querySelector('#second')
        hour.innerHTML = h + ' : '
        minutes.innerHTML = m + ' : '
        second.innerHTML = s
        }
        getCountTime()
        setInterval(getCountTime,1000)
    </script>
</body>
</html>

4.轮播图

image-20240505124018909

<!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>aaa</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            bottom: 0;
            text-decoration: none;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgb(170, 190, 250);
        }
        .shell {
            width: 900px;
            height: 500px;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            border: 10px #fff solid;
            box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
        }

        .images {
            width: 300%;
            height: 100%;
            display: flex;
            position: absolute;
            left: 0;
            transition: .2s;
        }

        .img{
            width: 100%;
            background-size: cover;
        }
        .img:nth-child(1){
            background-image: url("./images-chifeng/1.jpg");
        }
        .img:nth-child(2){
            background-image: url("./images-chifeng/2.jpg");
        }
        .img:nth-child(3){
            background-image: url("./images-chifeng/3.jpg");
        }

        .min-images {
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 20px;
            width: 40%;
            z-index: 999;
            right: 10%;
        }

        .min{
            width: 60px;
            height: 60px;
            cursor: pointer;
            border-radius: 50%;
            background-size: cover;
            border: solid rgba(255, 255, 255, 0.5) 5px;
            background-position: -20px 0;
        }
        .min:nth-child(1){
            background-image: url("./images-chifeng/1.jpg");
        }
        .min:nth-child(2){
            background-image: url("./images-chifeng/2.jpg");
        }
        .min:nth-child(3){
            background-image: url("./images-chifeng/3.jpg");
        }

        .button {
            width: 100%;
            height: 100%;
            position:absolute;
            display: flex;
            justify-content: space-between;
            user-select:none;
        }

        .button-left,
        .button-right {
            font-size: 50px;
            background-color: rgba(160, 193, 255, 0.7);
            padding: 0 20px;
            cursor: pointer;
            line-height: 500px;
        }

    </style>
</head>

<body>
    <div class="shell">
        <ui class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ui>
            <ui class="min-images">
                <li class="min"></li>
                <li class="min"></li>
                <li class="min"></li>
            </ui>
        <div class="button">
            <div class="button-left"><</div>
            <div class="button-right">></div>
        </div>
    </div>
</body>
<script>
    let left = document.querySelector(".button-left")
    let right = document.querySelector(".button-right")
    let min = document.querySelectorAll(".min")
    let images = document.querySelector(".images")
    let index = 0
    let time
    function position() {
        images.style.left = (index * -100) + "%"
    }
    function add() {
        if (index >= min.length-1) {
            index = 0
        } else {
            index++
        }
    }
    function desc() {
        if (index < 1) {
            index = min.length-1
        } else {
            index--
        }
    }
    function timer(){
        time = setInterval(() => {
            index++
            desc()
            add()
            position()
        }, 3000)
    }
    left.addEventListener("click", () => {
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener("click", () => {
        add()
        position()
        clearInterval(time)
        timer()
    })
    for (let i = 0; i < min.length; i++) {
        min[i].addEventListener("click", () => {
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    timer()
</script>

</html>
5.两种定时器对比

延时函数：执行一次

间歇函数：每隔一段时间就执行一次，除非手动清除

6.数组中map方法 迭代数组

map可以遍历数组 处理数据 ，并且返回新的数组

map也称为 映射

map重点在于有返回值，forEach没有返回值

image-20240506223401303

const arr = ['red','blue','pink']
    const newArr = arr.map(function(ele,index) {
      return ele + '颜色'
    })
    console.log(newArr);
7.数组中的join方法

作用：join()方法用于把数组中的所有元素转换成一个字符串

语法：

const arr = ['red','blue','pink']
    console.log(arr.join(''));

参数：

数组元素是通过参数里面指定的分隔符进行分隔的，空字符串(''),则所有元素之间都没有任何字符

image-20240506223622274

const arr = ['red','blue','pink']
    console.log(arr.join(''));

image-20240506223940373

const arr = ['red','blue','pink']
    console.log(arr.join('    '));

image-20240506224014044

const arr = ['red','blue','pink']
    console.log(arr.join());
旧梦想吃汤圆
关注
JS---进阶
2301_79102128的博客
10-22 70
（打断回城）使用场景：搜索框搜索输入。只需用户最后一次输入完，再发送请求手机号、邮箱验证输入检测。
Js进阶1
m0_65769258的博客
02-19 309
(一) 基本数据类型和引用数据类型的区别 基本数据类型和引用数据类型数据在内存中的存储 基本数据类型存放在栈区 引用数据类型存放在堆区, 同时在栈区存放数据,在堆区存放的地址(引用) (二) 函数的调用方式 1.普通函数的调用, 函数名(); 2.回调函数: // 回调函数: 函数作为参数 // callback是个函数 function foo(callback) { callback(100); // callback就是goo(100) } function...
JavaScript进阶部分知识总结
guai_guai_guai的博客
04-22 1003
局部作用域分为函数作用域和块作用域。
Javascript进阶内容
triggerV的博客
04-08 979
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
JS进阶.xmind
02-20
js进阶阶段总结（xmind编辑的思维导图）
wps-excel办公+JS宏编程教程基础到进阶+函数使用手册
07-05
《WPS Excel与JS宏编程教程基础到进阶》是一门专为经常使用Excel办公的人员设计的课程，尤其适合初学者和进阶者。这门课程深入浅出地介绍了如何利用JavaScript进行WPS Excel的宏编程，以提高工作效率。JS宏在WPS中的...
JavaScript进阶练习及简单实例分析
10-22
本文介绍了一个JavaScript的进阶练习示例，该示例涉及的主要知识点包括对象的创建与属性操作、事件监听、...这样的练习有助于提高对JavaScript语言特性的理解和代码编写能力，是学习JavaScript进阶内容的重要实践方式。
Vue.js进阶知识点总结
10-18
通过学习和熟练运用这些进阶知识点，开发者可以更好地驾驭Vue.js，提高开发效率，编写出更加健壮和易于维护的前端应用。同时，对Vue生态中的其他工具如Webpack、Vue Router和Vuex的深入了解也是成为Vue.js大师的重要...
javascript进阶版纯手写课件
04-09
### JavaScript进阶知识点详解 #### 1. 函数防抖与节流 在JavaScript中，函数防抖（debounce）和节流（throttle）是两种常见的性能优化手段，主要应用于处理高频触发的事件。 **防抖**技术是通过设置一个延时器，...
水平居中的几种方法（总结）
致未来的你。的博客
09-11 764
水平居中的几种方法（总结）
基于Spring Boot构建一个点餐系统
嵌入式行业打工人，不定期更新博客。
09-08 1056
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如用户认证、购物车管理、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问和需求，可以私信联系我。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1309
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 866
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
最新发布
weixin_73253843的博客
09-13 829
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 691
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 963
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
前端——JS基础
m0_73557953的博客
09-12 171
字符串函数判断语句对象数组字符串、数字对象循环类和继承错误捕获3个点操作符回调函数和匿名函数。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 697
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
javascript进阶
10-09
引提供了一些关于JavaScript的进阶内容，包括获取元素的不同方式和JS的引入方式。其中，通过类名、标签名、name属性名、id名以及选择器都可以获取元素。而关于JS引入方式，可以通过内联方式、外部文件引入方式和动态引入方式来引入JS代码。 引用中的代码展示了如何为每个对象处理事件。通过querySelectorAll方法获取到所有img元素，然后通过for循环为每个img元素绑定点击事件，在点击时弹出相应的title属性值。需要注意的是，在循环中定义的函数存在异步问题，导致i的值变成了固定值3。 引用中的代码展示了如何使用字符拼接创建列表。通过将li标签拼接为一个字符串，然后循环遍历flowers数组，将每个元素拼接为一个li标签，并将所有li标签拼接为一个ul标签，最后将ul标签添加到div标签中。 这些是一些JavaScript的进阶内容，可以帮助你更深入地了解和应用JavaScript。接下来，请问还有什么其他相关问题吗？ 相关问题: 1. JavaScript的闭包是什么？如何使用闭包？ 2. 如何在JavaScript中实现数据的持久化存储？ 3. JavaScript中的继承有哪几种方式？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值