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(){ // 执行代码 });

47 本地存储

QQ截图20230117172502

48 jquery入口函数

49 jquery和dom的转换

QQ截图20230117203700

50 jquery选择器

QQ截图20230117204356

QQ截图20230117204411

51 jquery设置样式

QQ截图20230117210458

52 jquery排他思想

53 jquery获取当前元素索引号

54 jquery链式编程

55 jQuery动画效果

  • 其他动画效果的参数也大致相同

56 jquery事件切换，即mouseover和mouseout的结合体

57 jquery stop

58 jquery属性操作

QQ截图20230118095031

QQ截图20230118095043

QQ截图20230118095124

  • data-index自定义属性获取，data("index")

59 jquery内容文本值

QQ截图20230118101317

60 jquery祖先选择器

61 jquery遍历元素

QQ截图20230118102852

62 jquery节点操作

QQ截图20230118103659

QQ截图20230118103729

QQ截图20230118103816

63 jquery位置

QQ截图20230118104554

QQ截图20230118104603

QQ截图20230118104626

QQ截图20230118105139

64 jQuery实现返回顶部

65 jquery事件

QQ截图20230118110557

QQ截图20230118110622

QQ截图20230118110642

QQ截图20230118110658

QQ截图20230118110718

66 jquery自动触发事件

QQ截图20230118111805

67 jquery事件对象

68 jquery对象拷贝

posted @   凌歆  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· JSDOM和BOM学习第五天（上）
· JS的DOM和BOM学习第二天（上）
· javascript之BOM与DOM、navigator、history、location、弹出框、计时器、查找标签、节点操作、获取值操作、属性操作、事件
· JavaScript-Web APIs-DOM/BOM-入门
· 前端之BOM、DOM操作
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示