BOM #第一天

最新推荐文章于 2024-08-25 09:57:22 发布

奋斗的小baby

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52809337/article/details/120004366

版权

一、窗口大小和事件

1.窗口大小

（1）innerWidth、innerHeight：这里的宽度和高度只是窗口可见区域的宽高,不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合兼容性不是很好

  <style>
    img {
      width: 200px;
      height: 200px;
      display: flex;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: black;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border: 3px solid black;
      background-color: red;
    }
  </style>
<div class="outer">
    <img src="./img/9012175.jpg_220x240.jpg" alt="">
    <img src="./img/9012177.jpg_220x240.jpg" alt="">
    <img src="./img/9012243.jpg_220x240.jpg" alt="">
  </div>
  <div class="box1"></div>
<script>
   // 1.窗口大小:
     /* （1）innerWidth、innerHeight：这里的宽度和高度只是窗口可见区域的宽高,
    不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合 兼容性不是很好 */
    console.log(window.innerWidth); 
    console.log(window.innerHeight);

    let outer = document.querySelector('.outer');
    setInterval(function() {
      if (innerWidth > 860) {
        outer.style.display = "flex";
      } else {
        outer.style.display = "block";
      }
    }, 1000);

    // （2）混杂模式（无文档声明<!DOCTYPE html>）下使用 (了解)
    document.body.clientWidth
    document.body.clientHeight

    //（3）标准模式（有文档声明<!DOCTYPE html>）下使用 (了解)
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    

    // 2.窗口的加载事件 onload: 界面上的资源加载完再执行里面的内容
    window.onload=function() {
      document.querySelector(".box").style.backgroundColor = 'pink';
    }
    
  </script>
  <div class="box"></div>

（2）混杂模式（无文档声明<!DOCTYPE html>）下使用 (了解)

document.body.clientWidth

document.body.clientHeight

（3）标准模式（有文档声明<!DOCTYPE html>）下使用 (了解)

document.documentElement.clientWidth

document.documentElement.clientHeight

2.窗口的加载事件 onload: 界面上的资源加载完再执行里面的内容

<script>
     window.onload=function() {
      document.querySelector(".box").style.backgroundColor = 'pink';
    }
</script>
<div class="box"></div>

结果：

二、窗口滚动距离和滚动事件

1.获取窗口滚动距离

window.pageXOffset // 窗口在x轴的滚动距离

window.pageYOffset // 窗口在y轴的滚动距离

1.1解决兼容性

document.body.scrollTop || document.documentElement.scrollTop

document.body.scrollLeft || document.documentElement.scrollLeft

2.操作让浏览器滚动

scrollTo(x, y) // x、y为坐标只滚动一次

scrollBy(x, y) // 滚动多次

【案例】界面自动滚动

  <style>
    div {
      height: 400px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <button>按钮</button>
  <div>内容块1</div>
  <div>内容块2</div>
  <div>内容块3</div>
  <div>内容块4</div>
  <div>内容块5</div>
  <button>置顶按钮</button>
</body>

<script>
  // 需求：点击按钮之后，界面自动往下滚动，点击置顶按钮，节点回到顶部
  let btn = document.querySelectorAll("button");
  let times; // 需要定义在全局，如果定义在内部，其他就不能访问
  btn[0].onclick = function() {
    let timse = setInterval(function() {
      scrollBy(0, 5); 
    }, 500) // 隔0.5秒就滚动一次
  }
  btn[1].onclick = function() {
    clearInterval(times); // 清楚定时器
    scrollTo(0, 0); // 界面直接回到顶部
  }
</script>

【案例】模拟粘性定位

  <style>
    div {
      width: 100%;
      height: 400px;
    }
    div:first-child {
      background-color: red;
    }
    div:nth-child(2) {
      background-color: green;
    }
    div:nth-child(3) {
      background-color: blue;
    }
    div:nth-child(4) {
      background-color: pink;
    }
    div:nth-child(5) {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div>内容块1</div>
  <div>内容块2</div>
  <div>内容块3</div>
  <div>内容块4</div>
  <div>内容块5</div>

  <script>
    // 需求：滚动到某个位置时，节点置顶
    let divs = document.getElementsByTagName("div");
    window.onscroll = function() {
      if (window.pageYOffset > 800) {
        divs[2].style.position = 'fixed';
        divs[2].style.top = 0;
      } else {
        divs[2].style.position = 'static';
      }
    }
    
  </script>

三、懒加载和预加载

1.懒加载：界面滑动到某个位置，所需资源才加载出来

  <div style="height: 1000px;"></div>
  <img data-src="./img/9012175.jpg_220x240.jpg" alt="">
  <img data-src="./img/9012177.jpg_220x240.jpg" alt="">
  <img data-src="./img/9012243.jpg_220x240.jpg" alt="">

  <script>
    window.onscroll = function() {
      if (pageYOffset > 315) {
        let imgs = document.querySelectorAll("img");
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].src = imgs[i].dataset.src;
        }
        window.onscroll = '';
      }
    }
  </script>

2.预加载：资源在显示之前就加载出来

<div style="height: 1000px;"></div>
  <script>
    let arr = ["./img/9012175.jpg_220x240.jpg", "./img/9012177.jpg_220x240.jpg", "./img/9012243.jpg_220x240.jpg"];
    for (let i = 0 ; i < arr.length; i++) { // 循环多次创建img节点
      let img = new Image();
      img.src = arr[i];
      document.body.appendChild(img);
    }
  </script>

四、盒子大小和位置

类型	作用
element.offsetWidth	返回自身包括padding.边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding.内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.getBoundingClientRect()	返回自身的宽高以及距离界面左侧的距离常用！！！

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取盒子内容滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXoffset获得

五、表单方法和事件

1. form.onsubmit 表单提交事件

2. form.onreset表单重置事件

【案例】

 <body>
  <form action="">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="passwd"><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <!-- <button type="submit">提交</button>
    <button type="reset">重置</button> -->
  </form>
</body>

<script src="">
  // let submit = document.getElementsByClassName("[input=submit]");
  let form = document.querySelector("form");
  let user = document.getElementsByName("username")
  let pass = document.getElementsByName("passwd")

  // form.onsubmit表单提交事件
  form.onsubmit = function () {
    if (!(user.length > 6 && pass.length>6)) {
      alert("用户名或密码不规范");
      // 虽然提交失败，数据还是会提交到后台，所以我们应该阻止（阻止默认事件）
      return false; 
    }

  }

  // form.onreset表单重置事件
  form.onreset = function() {
    let re = confirm('确认提交表单吗？');
    if (re == false) {
      return false;
    }
  }
</script>

六、input事件

1.input：只要输入就会一直触发

2.change：失去焦点就会触发最近两次失焦状态的值有改变才会触发 input.value为最终的值

3.focus：鼠标聚焦显示下拉框

4.blur：鼠标失去焦点隐藏下拉框

  <style>
    .box {
      width: 300px;
      height: 240px;
      border: 2px solid blue;
      margin-left: 70px;
      display: none;
    }
  </style>
</head>

<body>
  搜索框：
  <input type="text">
  <div class="box"></div>

  <script>
    let input = document.querySelector("input");
    let box = document.querySelector('.box');
    // input标签的输入input、值改变change、聚焦focus、失焦blur

    // 1.input：只要输入就会一直触发
    input.oninput = function() {
      console.log(input.value + '***');
      
    }

    // 2.change：失去焦点就会触发 最近两次失焦状态的值有改变才会触发 input.value为最终的值
    input.onchange = function() {
      console.log(input.value + '--');
      
    }

    // 3.focus：鼠标聚焦显示下拉框
    input.onfocus = function() {
      box.style.display = 'block'
    }

    // 4.blur：鼠标失去焦点隐藏下拉框
    input.onblur = function() {
      box.style.display = 'none';
    }
    
  </script>

【案例】以select 选项框举例change 事件的使用，实现三级联动下拉框

数据：

data = [
    {
    name: "四川",
    next: [{
        name: '成都1',
        next: ["东站1", "北站2", "南站3"]
    }, {
        name: '成都2',
        next: ["东站4", "北站5", "南站6", "东站7", "北站8", "南站9"]
    }, {
        name: '成都3',
        next: ["东站11", "北站12"]
    }]
}, 
{
    name: "云南",
    next: [{
        name: '云南1',
        next: ["东站13", "北站14", "南站15"]
    }, {
        name: '云南2',
        next: ["东站16", "北站17", "南站18", "东站19", "北站21", "南站22"]
    }, {
        name: '云南3',
        next: ["东站23", "北站24"]
    }, {
        name: '云南4',
        next: ["东站25", "北站26", "南站27"]
    }, {
        name: '云南5',
        next: ["东站23", "北站33", "南站34", "东站35", "北站36", "南站37"]
    }, {
        name: '云南6',
        next: ["东站41", "北站42"]
    }]
},
{
    name: "dnf",
    next: [{
        name: '四川',
        next: ["一区", "二区", "三区","四区",'五区',"六区"]
    }, {
        name: '北京',
        next: ["1区", "2区"]
    }, {
        name: '山东',
        next: ["壹区", "贰区","叁区","肆区"]
    }]
}
]

html+js:

地址：
    <select name="" id="">
        <option value="null">==请选择省份==</option>
    </select>
    <select name="" id="">
        <option value="null">==请选择分区==</option>
    </select>
    <select name="" id="">
        <option value="null">==请选择实际地址==</option>
    </select>


<script src="./30-联动下拉框数据.js"></script>
<script>
    //一级选择框
    // console.log(document.querySelector("select")); 这样获取的是页面当中的第一个select标签
    
    for(let i=0;i<data.length;i++){
        document.querySelector("select").innerHTML+=`
            <option value="${data[i].name}">${data[i].name}</option>
        `
    }

    //联动二级菜单
    let seconSelect=document.querySelectorAll("select")[1];
    document.querySelector("select").onchange=function(){
        console.log( this.value );
        seconSelect.innerHTML=`<option value="null">==请选择分区==</option>`;//清空历史选项
        threeSelect.innerHTML=`<option value="null">==请选择实际地址==</option>` // //清空历史选项
        for(let i=0;i<data.length;i++){//循环匹配比较

            if( data[i].name==this.value ){//匹配成功

                
                data[i].next.forEach(item => {//循环二级数据，往二级select 框追加选项
                    seconSelect.innerHTML+=`
                        <option value="${item.name}">${item.name}</option>
                    `
                });
            }

        }
    }

    let threeSelect = document.querySelectorAll("select")[2];
    seconSelect.onchange = function() {
        threeSelect.innerHTML=`<option value="null">==请选择实际地址==</option>`;// 清空历史选项
        // console.log(this.value);
        for (let i = 0; i < data.length; i++) {
            data[i].next.forEach(item => {
                if (item.name == this.value) {
                    item.next.forEach(item1 => {    
                        threeSelect.innerHTML += `
                            <option value="${item1}">${item1}</option>
                        `;
                    })
                }
            })
        }
        
    }
    </script>

结果：

奋斗的小baby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM #第一天

目录一、窗口大小和事件二、窗口滚动距离和滚动事件三、懒加载和预加载四、盒子大小和位置五、表单方法和事件六、input事件一、窗口大小和事件1.窗口大小（1）innerWidth、innerHeight：这里的宽度和高度只是窗口可见区域的宽高,不包括菜单栏、工具栏以及滚动条等的高度。任何模式下都适合兼容性不是很好 <style> img { width: 200px; height: 200px; di...
复制链接

扫一扫