28 表单、BOM、元素的三大宽高

表单

快速获取表单元素

\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);
}

表单方法

提交： form.submit();
重置： form.reset();
聚焦: 表单元素.focus();
失焦: 表单元素.blur();
自动选择: 表单元素.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

系统对话框

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先做一次判断判断图片是否显示
当滚轮滚动的时候判断当前的图片是否在页面中每一张图片
当窗口大小改变的时候判断当前的图片是否在页面中每一张图片
图片是否显示的判断: 图片距离页面顶部距离 <= 屏幕高度 + 滚动的距离

// 等待页面及资源
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');
            }
        }
    }
}

posted @ 2021-05-07 21:54 一花一世界111 阅读(414) 评论(0) 收藏举报

刷新页面返回顶部

一花一世界111

28 表单、BOM、元素的三大宽高