02.Dom和Bom复习-cnblog

最新推荐文章于 2024-06-16 12:11:30 发布

凌歆

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量190

点赞数

分类专栏：蓝桥杯备战文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_33938234/article/details/129459641

版权

蓝桥杯备战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Dom和Bom复习-cnblog

文章目录

- Dom和Bom复习-cnblog

1. getElementsByTagName

返回值为一个伪数组对象（其他获取多个元素的方法也是如此）
注意遍历方式

2. 获取特殊元素body和html

// 获取body
var bodyEle=document.body

// 获取html
var htmlEle=document.documentElement

3. 表单元素的属性操作

4. 事件处理函数中的this指向

5 实现密文明文切换的解决方案

改输入框类型type(text–>password)
纯js，n个原点----> 原来的内容

6 原生JS操作样式的方法

display样式

className注意点

7 .常用的事件

8. 多元素绑定事件

9. 自定义属性值操作

QQ截图20230114165621

QQ截图20230114165628

setAttribute设置类名

10.tab栏切换

设置自定义属性，li标签对应每个div大盒子
- 为什么不直接用i，let的情况下可以，var i为最后一个（不行）
- 解决方案
  - 使用let关键字（生成闭包）
  - 每个li设置自定义属性，lis[i].setAttribute(‘index’,i)
  - 立即执行函数（生成闭包）

11. H5自定义属性

QQ截图20230114171156

获取data-list-name类型的自定义属性

div.dataset.listName
div.getAttribute('data-list-name')
div.dataset['data-list-name']

12. 节点属性

13. 节点操作

QQ截图20230114192925

QQ截图20230114192952

QQ截图20230114192959

QQ截图20230114193008

QQ截图20230114200216

QQ截图20230114200234

QQ截图20230114200246

QQ截图20230114200310

QQ截图20230114200526

14. 注册事件的兼容性解决方案

16. 删除事件的兼容性解决方案

17. DOM事件流

QQ截图20230115095818

QQ截图20230115095826

QQ截图20230115095836

18 阻止事件冒泡

if(e && e.stopPropagation){
 e.stopPropagation();
 }else{
 window.event.cancelBubble = true;
 }

19 鼠标事件

20 鼠标的事件对象

21. 键盘事件

注意点

22 BOM构成

23. 窗口事件对象

QQ截图20230115183305

QQ截图20230115183316

24 button内容修改

25 this指向

26 JS执行机制

QQ截图20230115185517

QQ截图20230115185526

27 URL

28. location对象

29 navigator对象

30 history对象

31. offset系列

QQ截图20230115200024

QQ截图20230115200038

31. offset与事件对象配合使用

点击盒子，获取点击处与盒子的距离

<script>
        var div=document.querySelector('div');
        div.addEventListener('mousemove',function(e){
            // 获取鼠标距离页面的左边坐标
            // 获取当前盒子距离body的左边坐标
            // 相减得到鼠标在盒子内的坐标

            var x=e.pageX-this.offsetLeft;
            var y=e.pageY-this.offsetTop;
            this.innerHTML='x的坐标'+x+',y的坐标'+y;
        })
    </script>

32 拖动模态框（编程）

33 京东放大镜效果(编程)

34 client系列

35 特色事件

36 scroll系列

37 三大系列区别

38 mouseenter事件

39 缓动函数的封装

function animateLow(obj,target,callback){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        // 缓动原理，移动的距离越来越小
        // 移动距离=（目标距离-当前移动距离）/10
        var move=(target-obj.offsetLeft)/10;
        // 移动距离取整，往大的方向取
        // 移动距离为负数，往小的方向取
        move=move>=0 ? Math.ceil(move) : Math.floor(move);
        obj.style.left=obj.offsetLeft+move+'px';

        // 停止
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);

            // 定时器的任务执行完毕后
            // 执行回调函数
            if(callback){
                callback();
            }
            
        }
    },15);
}

40 轮播图(编程)

41. 轮播图节流阀

42 带动画的回到顶部

window.scroll(x,y)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>

    <script>
        // 获取banner
        var banner=document.querySelector('.banner');
        var sliderbar=document.querySelector('.slider-bar');
        var bannerTop=banner.offsetTop;
        // 固定定位后的距离
        var sliderTop=sliderbar.offsetTop-bannerTop;

        // 获取main
        var main=document.querySelector('.main');
        var mainTop=main.offsetTop;
        // 获取回到顶部
        var goBack=document.querySelector('.goBack');
        // 当页面被卷去的距离为banner区域的offsetTop时，滚动导航栏变为固定单位
        document.addEventListener('scroll',function(){
            
            
            if(window.pageYOffset>=bannerTop){
                sliderbar.style.position='fixed';
                sliderbar.style.top=sliderTop+'px';

            }else{
                sliderbar.style.position='absolute';
                sliderbar.style.top='300px'; 
            }

            if(window.pageYOffset>=mainTop){
                goBack.style.display='block';
            }else{
                goBack.style.display='none';
            }

            goBack.addEventListener('click',function(){
                // window.scroll使窗口滚动到顶部
                // window.scroll(0,0);

                // 2.使用缓动函数实现带动画的回到顶部
                animateLow(window,0);

            })


            function animateLow(obj,target,callback){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    // 缓动原理，移动的距离越来越小
                    // 移动距离=（目标距离-当前移动距离）/10
                    var move=(target-obj.pageYOffset)/10;
                    // 移动距离取整，往大的方向取
                    // 移动距离为负数，往小的方向取
                    move=move>=0 ? Math.ceil(move) : Math.floor(move);
                    // obj.style.left=obj.offsetLeft+move+'px';
                    obj.scroll(0,move+obj.pageYOffset);

                    // 停止
                    if(obj.pageYOffset==target){
                        clearInterval(obj.timer);

                        // 定时器的任务执行完毕后
                        // 执行回调函数
                        if(callback){
                            callback();
                        }
                        
                    }
                },15);
            }

        })
        
    </script>
    
</body>

</html>

43. 移动端触屏特效

QQ截图20230117110156

QQ截图20230117110225

44 移动端轮播图

不同点：前后都复制了一张图片
不使用定位，直接使用了translate
使用了过渡完成的事件transitionend

window.addEventListener('load',function(){
    // alert(11);

    var banner=this.document.querySelector('.banner');
    // console.log(banner);

    var ul=banner.querySelector('ul');
    var ol=banner.querySelector('ol');

    // 循环创建轮播小圆点
    for(var i=0;i<ul.children.length;i++){
        var li=this.document.createElement('li');
        li.setAttribute('index',i);
        ol.appendChild(li);
    }

    // 第一张图片设置current属性

    ol.children[0].className='current';

    // 移动端与pc端的无缝轮播有区别，防止第一张左滑留白，第一张前面也添加一张图片

    var copy1=ul.children[0].cloneNode(true);
    var copy2=ul.children[ul.children.length-1].cloneNode(true);
    ul.appendChild(copy1);
    ul.insertBefore(copy2,ul.children[0]);



    // 设置图片自动滚动，定时器+css3的位移（translate）

    // 获取焦点图盒子的大小
    var b_width=banner.clientWidth;
    // console.log(b_width);

    var index=0;
    var timer=this.setInterval(function(){
        index++;

        // 设置transform过渡
        ul.style.transition='all .3s';
        ul.style.transform='translateX('+(-b_width*index) +'px)'


        
    },2000);
    
    // 判断过渡是否完成，如果完成，在执行操作
    ul.addEventListener('transitionend', function() {
        // 无缝滚动
        if (index >= 3) {
            index = 0;
            // console.log(index);
            // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置
            ul.style.transition = 'none';
            // 利用最新的索引号乘以宽度 去滚动图片
            var translatex = -index * b_width;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            // 利用最新的索引号乘以宽度 去滚动图片
            var translatex = -index * b_width;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 在过渡接收后检测小圆点的变化
        // 去除当前的小圆点，实现小圆点切换
        ol.querySelector('li.current').classList.remove('current');
        ol.children[index].classList.add('current');
    })

    // 手指滑动实现轮播图切换
    var mouseX=0;
    var moveX=0;
    var liStep=ul.children[0].clientWidth/7;

    // 定义一个变量判断用户是否移动
    var touch=false;
    ul.addEventListener('touchstart',function(e){
        // 手指摸上去，停止计时器
        clearInterval(timer);
        timer=null;
        mouseX=e.targetTouches[0].pageX;
    })

    // 手指滑动轮播图
    ul.addEventListener('touchmove',function(e){
        // 鼠标的移动距离
        moveX=e.targetTouches[0].pageX-mouseX;
        // translateX的距离
        
        var translatex=(-b_width*index)+moveX;
        ul.style.transform = 'translateX(' + translatex + 'px)';
        touch=true;

        // 取消默认滚动屏幕行为
        e.preventDefault();

    })

    ul.addEventListener('touchend',function(){

        if(touch){
            if(Math.abs(moveX)>liStep){
                //  大于0，播放上一张
                if(moveX>0){
                    index--;
                }else if(moveX<0){
                    // 播放下一张
                    index++;
                }
    
            }
            var translatex=-index*b_width;
            ul.style.transition='all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        
        // 手指离开，定时器开始
        timer=setInterval(function(){
            index++;
    
            // 设置transform过渡
            ul.style.transition='all .3s';
            ul.style.transform='translateX('+(-b_width*index) +'px)'
        },2000);
    })
    
})

45 classList

QQ截图20230117163924

排他思想更容易实现

// 在过渡接收后检测小圆点的变化
        // 去除当前的小圆点，实现小圆点切换
        ol.querySelector('li.current').classList.remove('current');
        ol.children[index].classList.add('current');

46 双击延时解决方案

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
 var isMove = false;
 var startTime = 0; // 记录触摸时候的时间变量
 obj.addEventListener('touchstart', function (e) {
 startTime = Date.now(); // 记录触摸时间
 });
 obj.addEventListener('touchmove', function (e) {
 isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
 });
 obj.addEventListener('touchend', function (e) {
 if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
 callback && callback(); // 执行回调函数
 }
 isMove = false; // 取反 重置
 startTime = 0;
 });
}
//调用 
 tap(div, function(){ // 执行代码 });