day10JavaScript基础知识：表单事件及方法、BOM、client、offset、scroll、懒加载

表单

快速获取表单元素

\1. 需要先获取表单 form

\2. 快速获取表单元素 form.name值

var form = document.getElementsByTagName('form')[0];
console.log(form);
// 2. 快速获取表单元素  form.name值
console.log(form.user); // 元素
console.log(form.user.value); // 值

// 快速获取单选按钮和单选按钮的值
console.log(form.sex);
console.log(form.sex.value);

// 复选按钮
console.log(form.hobby);
console.log(form.hobby.value); // 无法获取选中的复选框的值

// 下拉列表
console.log(form.city);
console.log(form.city.value);

<form action="">
    姓名: <input type="text" name="user" value="张三丰"><br>
    年龄: <input type="text" name="age"><br>
    性别: <input type="radio" name="sex" value="nan" id="">男
          <input type="radio" name="sex" value="nv" checked id="">女<br>
    爱好：
        <input type="checkbox" name="hobby" id="">睡觉
        <input type="checkbox" name="hobby" checked id="">LOL
        <input type="checkbox" name="hobby" id="">Dota
        <input type="checkbox" name="hobby" checked id="">饥荒
        <br>
    城市:
        <select name="city" id="">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="cd">成都</option>
        </select><br>
</form>

表单事件

重置事件: onreset

​ form表单.onreset = 函数

​ 可以设置返回值: return true; 表示当前表单可以被重置 初始值 默认值

​ return false; 表示当前表单不可以被重置

// 当年龄输入框不为空 不允许重置 
form.onreset = function(){
    // return true;
    // return false;
    if(form.age.value == ''){
        return true;
    } else {
        // 不为空
        return false;
    }
}

提交事件: onsubmit

​ form表单.onsubmit = 函数

​ return true; 表示当前表单可以被提交 默认值

​ return false; 表示当前表单不可以被提交

// 如果年龄为21提交表单
form.onsubmit = function(){
    if(form.age.value == '21'){
        return true;
    } else {
        return false;
    }
}

聚焦事件: onfocus

​ 表单元素.onfocus = 函数

​ 当输入框被选中 当光标位于输入框其中的时候

// 姓名聚焦触发  改变背景色为红色
form.user.onfocus = function(){
    this.style.background = 'red';
}

失去焦点: onblur

​ 表单元素.onblur = 函数

​ 当输入框失去焦点的时候触发 光标在输入框中移开

// 姓名失去焦点触发  改变背景色为绿色
form.user.onblur = function(){
    this.style.background = 'green';
}

内容改变 onchange

​ 表单元素.onchange = 函数

​ 当输入框失去焦点并且内容改变

// 年龄内容改变的时候 背景色变成蓝色
form.age.onchange = function(){
    this.style.background = 'blue';
}

oninput/onpropertychange

​ 表单元素.oninput/onpropertychange = 函数

​ 当输入框一边输入一边触发

form.age.oninput = form.age.onpropertychange = function(){
    console.log(this.value);
}

表单方法

1. 提交： form.submit();
2. 重置： form.reset();
3. 聚焦: 表单元素.focus();
4. 失焦: 表单元素.blur();
5. 自动选择: 表单元素.select();

​ 注册、登录、订单提交等等

submit

var divs = document.getElementsByTagName('div');

divs[0].onclick = function(){
    form.submit();
}

reset

divs[1].onclick = function(){
    form.reset();
}

focus

divs[2].onclick = function(){
    form.age.focus();
}

blur

setTimeout(function(){
    form.age.blur();
}, 3000);

select

divs[3].onclick = function(){
    form.age.select();
    // form.sex[0].select();
}

BOM

概念

BOM: Browser Object Model

​ 浏览器对象模型

​ 核心: window

既是js访问浏览器的一个接口 也是Global中的一个对象

​ 所有的浏览器都支持window

​ 声明全局的变量和函数

​ 全局变量: window的一个属性

​ 全局函数: window的一个方法

​ 如果变量和属性直接挂在window上会省略window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SCcGGAaK-1610761503319)(E:\1207\day10\图片1.png)]

系统对话框

alert

警告框： alert(‘内容’)

alert(1);

confirm

带有确定取消： confirm(‘提示的内容’);

​ 具有返回值 var 变量 = confirm();

​ 确定: true 取消: false

​```javascript

var a = confirm(‘此协议是否同意’);
console.log(a);
```

prompt

// 3. 带有输入框的对话框： prompt('提示内容'[, '输入框默认内容']);
// 具有返回值: var 变量 = prompt();
// 确定: 输入框中的内容  取消: null
var b = prompt('请输入要去的页数', 100);
console.log(b);

open

打开页面

​ open(地址, 打开方式, ‘打开窗口的宽高’);

​ 地址: 必传

​ 打开方式: _blank(默认值) _self

​ 宽高： width=属性值,height=属性值 只有在新页面打开才起作用

具有返回值, 返回值是新页面的window对象

var btns = document.getElementsByTagName('button');
console.log(btns);
btns[0].onclick = function(){
    var nw = open('http://xue.ujiuye.com', '_blank', 'width=1200px,height=200px');
    console.log(nw);
    console.log(window);
}

close

close: 关闭页面

​ window.close();

setTimeout(function(){
    // 关闭哪个页面 就用哪个对象  关自己用window或者是直接用close()  关别人 用别人nw
    nw.close();
}, 3000);

open和close写在页面中时 行内js window不能省略

<a href="https://www.baidu.com" target="_self">打开百度</a>
<button>打开优学</button>
<!-- open和close写在页面中时  行内js  window不能省略 -->
<button onclick="window.open('http://xue.ujiuye.com')">直接打开优学</button>
<button onclick="window.close()">直接关闭</button>

location

location: 最有用的对象之一 包含了一些当前浏览器的信息 以及相关地址的信息 提供一些导航功能

​ 很特殊的一个对象 既是BOM的对象 也是document下的一个对象

console.log(location);
console.log(location.hash); // 哈希值  散列  #+内容
console.log(location.href); // 完整地址
console.log(location.host); // 服务器的名称+端口号
console.log(location.hostname); // 服务器的名称
console.log(location.port); // 端口号
console.log(location.protocol); // 协议  file  http https
console.log(location.pathname); // 文件地址路径
console.log(location.search); // 搜索内容  ?+内容
// 通过更改location改变页面地址
setTimeout(function(){
    // location.href = 'http://xue.ujiuye.com';
    // window.location = 'http://xue.ujiuye.com';
    // location.reload(); // 刷新
}, 3000);

history

history: 历史 存储相关历史记录的信息

back

back: 后退 history.back(); 表示在当前页面基础上后退一个页面

forward

forward: 前进 history.forward(); 表示在当前页面基础上前进一个页面

go

go: 跳转到第几个页面

​ history.go(数字);

​ 负数： 后退几个页面

​ 正数： 前进几个页面

​ 0: 刷新

console.log(history);
setTimeout(function(){
    // history.forward();
    // history.go(1);
    // history.go(0);
}, 3000);

setTimeout(function(){
    // history.back();
    history.go(-1);
}, 3000);

navigator

// 根据不同的浏览器处理兼容
console.log(navigator); // 存储的是相关浏览器的信息
console.log(navigator.appCodeName); // Mozilla
console.log(navigator.appVersion); // 浏览器版本
console.log(navigator.platform); // 浏览器所在系统平台
console.log(navigator.cookieEnabled); // 是否启用了cookie
console.log(navigator.language); // 语言
console.log(navigator.product); // 浏览器名称
console.log(navigator.systemLanguage);

​ appCodeName 浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此

​ appMinorVersion 次版本信息

​ appName 完整的浏览器名称

​ appVersion 浏览器的版本。一般不与实际的浏览器版本对应

​ buildID 浏览器编译版本

​ cookieEnabled 表示cookie是否启用

​ cpuClass 客户端计算机中使用的CPU类型（x86、68K、Alpha、PPC或Other）

​ javaEnabled() 表示当前浏览器中是否启用了Java

​ language 浏览器的主语言

​ mimeTypes 在浏览器中注册的MIME类型数组

​ onLine 表示浏览器是否连接到了因特网

​ opsProfile 似乎早就不用了。查不到相关文档

​ oscpu 客户端计算机的操作系统或使用的CPU

​ platform 浏览器所在的系统平台

​ plugins 浏览器中安装的插件信息的数组

​ preference() 设置用户的首选项

​ product 产品名称（如 Gecko）

​ productSub 关于产品的次要信息（如Gecko的版本）

​ systemLanguage 操作系统的语言

​ taintEnabled() 已经废弃。表示是否允许变量被修改（taint）。为了与Netscape Navigator 3向后兼容而保留下来

​ userAgent 浏览器的用户代理字符串

​ userLanguage 操作系统的默认语言

​ userProfile 借以访问用户个人信息的对象

​ vendor 浏览器的品牌

​ vendorSub 有关供应商的次要信息

元素的三大宽高

client

client:

​ clientWidth/clientHeight: 可视宽/可视高 content + padding

​ clientLeft: 左边框的宽度

​ clientTop: 上边框的宽度

屏幕的可视区域:

​ document.documentElement.clientWidth/clientHeight

var div = document.getElementsByTagName('div')[0];
console.log(div);
console.log(div.clientWidth); // 300 + 10 + 33   343
console.log(div.clientHeight); // 200 + 20 + 10  230
console.log(div.clientTop, div.clientLeft); // 3  20


console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

offset

offset: 占位宽高

​ offsetWidth/offsetHeight: 占位宽/占位高 content + padding + border

​ offsetTop: 当前元素距离具有定位属性的父元素的距离 如果没有具有定位属性的父元素 距离body的距离

​ offsetLeft: 当前元素距离具有定位属性父元素的距离 如果没有具有定位属性的父元素 距离body的距离

console.log(div.offsetWidth, div.offsetHeight); // 343+20+20 = 383  230+3+10= 243
console.log(div.offsetLeft, div.offsetTop); // 50 5

scroll

scroll: 滚动的距离

​ scrollHeight: 元素的实际的高度

​ scrollWidth: 元素的实际的宽度

​ scrollLeft: 元素或页面滚动了的距离 水平

​ scrollTop: 元素或页面滚动了的距离 垂直

可以设置滚动距离

​ 页面滚动距离:

​ document.documentElement.scrollTop/scrollLeft

​ document.body.scrollTop/scrollLeft

滚动事件： onscroll

console.log(div.scrollHeight, div.scrollWidth);
div.onscroll = function(){
    console.log(div.scrollTop, div.scrollLeft);
}

window.onscroll = function(){
    // console.log(document.documentElement.scrollTop, document.body.scrollTop);
    console.log(document.documentElement.scrollLeft, document.body.scrollLeft);
}

document.onclick = function(){
    document.documentElement.scrollLeft = 500;
    document.documentElement.scrollTop = 0;
}

总结

​ 元素的三大宽高：

​ client:

​ 可视宽高 clientWidth/clientHeight

​ 左边框 clientLeft

​ 上边框 clientTop

​ offset:

​ 占位宽高 offsetWidth offsetHeight

​ 相对偏移: offsetTop offsetLeft

​ scroll:

​ 实际宽高: scrollHeight scrollWidth

​ 滚动的距离: scrollTop scrollLeft 可以设置

​ 回到顶部 懒加载 固定导航 居中 动画

​ 屏幕的可视宽高:

​ document.documentElement.clientWidth/clientHeight

​ 屏幕的滚动距离:

​ document.docuemntElement.scrollTop/scrollLeft

​ document.body.scrollTop/scrollLeft

懒加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7NixXbWf-1610761503323)(C:\Users\Administrator\Desktop\1.png)]

1. 页面中图片必须要有宽高做占位
2. 在页面一加载进来的时候 就需要对每一个img先做一次判断 判断图片是否显示
3. 当滚轮滚动的时候 判断当前的图片是否在页面中 每一张图片
4. 当窗口大小改变的时候判断当前的图片是否在页面中 每一张图片
5. 图片是否显示的判断: 图片距离页面顶部距离 <= 屏幕高度 + 滚动的距离

// 等待页面及资源
window.onload = function () {
    /*  
        图片不在页面中的时候  图片不加载
        图片处于页面中  图片加载 

        当滚轮滚动的时候  判断当前的图片是否在页面中 每一张图片
    */
    var imgs = document.getElementsByTagName('img');
    console.log(imgs);
    // 在页面一加载进来的时候 就需要对每一个img先做一次判断
    auto();
    // 加一个滚动事件
    window.onresize = window.onscroll = auto;

    // 当窗口大小改变的时候
    // window.onresize = function(){
    //     console.log(1);
    // }
    function auto() {
        // 获取屏幕的可视高度
        var ch = document.documentElement.clientHeight;
        console.log(ch);
        // 获取页面滚动的距离
        var st = document.documentElement.scrollTop;
        console.log(st);
        for (var i = 0; i < imgs.length; i++) {
            // console.log(imgs[i]);
            // 图片距离页面顶部的距离    图片距离页面顶部距离 <= 屏幕高度 + 滚动的距离
            // console.log(imgs[i].offsetTop);
            if (imgs[i].offsetTop <= ch + st) {
                // 获取自定义属性ns得值
                console.log(imgs[i].getAttribute('ns'));
                imgs[i].src = imgs[i].getAttribute('ns');
            }
        }
    }
}