8.11JS高级编程------＞DOM操作

最新推荐文章于 2024-07-17 15:26:15 发布

zxf318

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量154

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zxf318/article/details/126294135

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

00.拓展：自适应大小（CSS）

使用方法:@media 多媒体类型 and (条件) and (条件)······

多媒体类型:

常见用于屏幕

all用于所有多媒体类型设备

print用于打印机

screen用于电脑屏幕，平板，智能手机等

speech用于屏幕阅读器

条件: max--->大,小于它，min----->小，大于它

max-width：输出设备中页面最大可视区域宽度，小于这个width时，其中的css生效

min-width：输出设备中页面最小可视区域宽度，大于这个width时，其中的css生效

max-height：输出设备中页面最大可视区域高度

min-height：输出设备中页面最小可视区域高度

媒体查询两种方法:

1.link的方式

大于1200px时的外部样式引入

   <link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/yellow.css"> <!-- 样式和条件自己重新设置引入 -->

2.css的方式

900px-1200px之间的内联样式引入

  @media screen and (min-width:900px) and (max-width:1200px){
    body {
    background-color:green; <!-- 方便观察直接改变body的背景色可改为自己需要的样式和CSS那里设置一样写入@media内即可 -->
        }
    }

写代码不知怎么办时：

1.想this------>通过它判断获取值

2.声明变量------->通过改变变量的值判断变量达到某个功能

3.event（事件对象，事件处理函数中）------->通过它拿到某个东西判断

01.标签的自定义属性：data- (自己定义需满足属性规范)

只能是data-不能是其他，属性值可自设，在浏览器的dataset中查看，也可直接在标签中添加，修改

例：

HTML代码：

 <div class="box box1" data-index="1" data-mybox1="mybox1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>

JS代码：

 let allBox = document.querySelectorAll(".box")
        console.log(allBox);
        console.log(allBox[0].dataset.index);
        console.log(allBox[0].dataset.my = "ta");
        console.log(allBox[0].dataset.mybox1);

02.预加载和懒加载：

预加载：提前加载好了，节省用户的时间

例：

HTML代码：

 <button>点击就往box里面添加图片</button>
    <div class="box"></div>

JS代码：

  // 创建一个img把图片预先加载出来
        let img = new Image();
        // 给img加一个src属性
        img.src = 'https://img2.baidu.com/it/u=1513943675,1427588238&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400'
        // 获取按钮和盒子标签
        let btn = document.querySelector("button")
        let box = document.querySelector(".box")
        // 给按钮添加点击事件
        btn.onclick = function () {
            box.innerHTML = `<img
                src="https://img2.baidu.com/it/u=1513943675,1427588238&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400"
                alt=""> `
        }

懒加载：需要它的时候才出来（有用户滚动查看），所有资源都加载需要请求多次时间过长

例：

HTML代码：

src那可设置同一张图片

<!-- 让浏览器有滚动 -->
    <div class="content"></div>
    <img src="" alt=""
        data-src="https://img0.baidu.com/it/u=2885147598,1952880129&fm=253&fmt=auto&app=138&f=JPG?w=499&h=279">
    <img src="" alt=""
        data-src="https://img2.baidu.com/it/u=4058470208,2582932665&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=378">
    <img src="" alt=""
        data-src="https://img2.baidu.com/it/u=3636570806,357118734&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=616">
    <img src="" alt=""
        data-src="https://img2.baidu.com/it/u=2767202070,1363491322&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">

CSS代码：

* {
    margin: 0;
    padding: 0;
 }

 /* 设置高度让它有滚动 */
 .content {
     height: 2000px;
     background-color: aqua;
  }

JS代码：

 // 获取所有图片标签
        let allImg = document.querySelectorAll('img');
        // 监听滚动绑定滚动事件
        window.onscroll = function () {
            // getBoundingClientRect()，不包含滚动距离的偏移量
            //判断图片img是否要显示在用户视觉范围内 偏移量小于浏览器高度
            if (allImg[0].getBoundingClientRect().y < window.innerHeight) {
                //图片的src改为真正的地址
                //循环拿到每个img设置src 箭头函数花括号在只有一句代码时可省
                allImg.forEach(el => el.src = el.dataset.src)
            }
        }

03.防抖和节流

常见于面试笔试题

防抖： 针对于高频触发事件，（例：滚动，鼠标移动）让事件处理函数（事件处理的逻辑代码）延迟一段时间执行，如果在这段时间内再次触发，则重新开始记时，直到重新计时的这段时间内没有再次触发则执行

HTML代码：

 <div class="box"></div>

CSS代码：随便设置一个高和背景即可

 .box {
            height: 500px;
            background-color: #ccc;
        }

JS代码：

 let box = document.querySelector('.box');
        let timeout = 0;
        box.onmousemove = function () {
            if (timeout) {
                clearTimeout(timeout)
            };
            timeout = setTimeout(() => {
                console.log(11, "很多行逻辑代码");
                timeout = 0;
            }, 1000); //隔1秒内无再次触发才执行
        }

封装：Debounce 防抖已改this指向和event事件

 function debounce(fn, wait) {
            let timeout = 0;
            return function () {
                let ev = event;
                if (timeout) clearTimeout(timeout);
                timeout = setTimeout(() => {
                    fn.call(this, ev); //调用时this执向调用标签
                    timeout = 0;
                }, wait);
            }
        }

  box.onmousemove = debounce(moveFn, 500);
        function moveFn() {
            console.log(1111);
        }

节流：针对高频触发事件，让事件处理函数（事件处理的逻辑代码）每个一段时间执行一次

稀释执行频率，提高效率和性能

HTML和CSS同防抖

JS代码：

 let box = document.querySelector(".box");
        let time = 0;
        box.onmousemove = function () {
            if (time) {
                return;
            }
            time = setTimeout(() => {
                console.log(1111);
                time = 0; //=====  不清零只会打印一次
            }, 1000);
        }

封装：throttle 节流已改this指向和event事件

function throttle(fn,wait){
    let timeout = 0;
    return function(){
        let ev = event;
        if(timeout){
            return ;
        }
        timeout = setTimeout(()=>{
            fn.call(this,ev);
            timeout = 0;
        },wait);
    }
}