BOM和window

最新推荐文章于 2022-08-25 19:33:04 发布

王十一是个喵

最新推荐文章于 2022-08-25 19:33:04 发布

阅读量417

点赞数

分类专栏： JavaScript 学习案例 web前端

本文链接：https://blog.csdn.net/qq_43398720/article/details/99759368

版权

学习案例同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

web前端

18 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

BOM和window

操作表单

获取表单元素form.name

<body>
    <form action="" id="form">
        <input type="button" value="登录" name="btn">
        <input type="submit">
        <input type="text" value="请输入" name="user">
        <input type="password" name="pass">
        <input type="radio" name="sex" value="女">女
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="保密">保密
        <input type="checkbox" name="che" value="吃饭">吃饭
        <input type="checkbox" name="che" value="睡觉">睡觉
        <input type="checkbox" name="che" value="学习">学习
        <input type="checkbox" name="che" value="刷微博">刷微博
        <input type="checkbox" name="che" value="睡觉">睡觉
        <select name="sel" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5" selected>5</option>
        </select>
    </form>
    <script>
        var form=document.getElementById('form');
        console.log(form.btn);
        console.log(form.sex);
        console.log(form.sex[1]);
        console.log(form.sel);
        console.log(form.sel.value);
        form.btn.onclick=function(){
            console.log('可以点击');
            form.user;
            form.pass;
            form.sex;
            form.che;
            form.sel;
        }
        </script>
</body>

表单事件聚焦，离焦，全选，更改内容，提交重置

<body>
    <form action="" id="form">
        <input type="text" name="user" value="请输入你的大名："><span>*</span>
        <br>
        <input type="submit" name="subm">
        <br>
        <input type="button" value="确认是你的大名！" name="btn">
        <br>
        <input type="reset" name="res">
    </form>
    <script>
        var form=document.getElementById('form');
        console.log(form.user);
        // 聚焦
        // form.user.οnfοcus=function(){
        //     // this.style.color='pink';
        //     if(form.user.value='请输入你的大名：'){
        //         form.user.value='';
        //     }
        // }
        // form.user.focus();//页面一加载就直接聚焦
        // 离焦
        // form.user.οnblur=function(){
        //     form.user.value='请输入你的大名：';
        // }
        // 选择
        // form.user.οnselect=function(){
        //     console.log('已经全选中')
        // }
        // form.user.select();
        // 内容改变
        // form.user.οnchange=function(){
        //     this.style.color='red';
        //     console.log('已经改变内容')
        // }
        // form按钮提交
        // submit
        // form.οnsubmit=function(){
        //     console.log('ok')
        // }
        // 普通按钮提交
        // form.btn.οnclick=function(){
        //     form.submit();
        //     console.log(111)
        // }
        // form按钮重置
        // form.οnreset=function(){
        //     form.user.value='已经重置，请重新输入';
        //     console.log('重置')
        // }
        // 普通按钮重置
        // form.btn.οnclick=function(){
        //     form.reset();
        //     console.log('ok');
        // }

        // 改变内容
        form.user.onchange=function(){
            console.log('已经改变内容');
            form.user.nextElementSibling.style.color='red';
        }
    </script>
</body>

BOM

BOM的核心是window

弹出对话框

alert（也叫警告框）

alret('请点击确认')
window.alert('请再次点击确认')
/window可以省略

confirm（带确认和取消的弹出框）

window.confirm('111');
console.log(confirm('111'))
 //点击确定返回true，点击取消返回false
btn1.οnclick=function(){
      var del=confirm('确定是否删除');
          if(del){
                btn1.remove();
            }
        }
//删除一个元素

prompt(‘提示信息’，‘修改信息’)

window.prompt('请修改','这里是默认数据');
btn2.οnclick=function(){
     var chang=window.prompt('请修改',spa.innerHTML);
         if(chang){
             spa.innerHTML=chang;
        }
   }

open和close

// open
        btn1.onclick = function () {
            var win = window.open('http://www.baidu.com', '_blank', 'width=100px，height=200px', true);//四个参数,url、在本页面还是新页面打开，大小，是否保留记录
            btn3.onclick = function () {
                win.window.close();//关闭打开的页面
            }
        }
        // close
        btn2.onclick = function () {
            window.close();//关闭本页面
        }

ersize

 // window.onresize()窗口大小改变会触发
        window.οnlοad=function(){
            var bw=document.documentElement.clientWidth;
            if(bw<700){
                box.style.background='red';
            }else {
                box.style.background='';
            }
        }
        // 如果不写window.onload(),即使屏幕一开始就小于700也会是最初的颜色，
        // 当第一次改变的时候，才会执行
        window.οnresize=function(){
            var bw=document.documentElement.clientWidth;
            if(bw<700){
                box.style.background='red';
            }else {
                box.style.background='';
            }
        }

location对象（最有用的bom对象之一）

<body>
    <button id="btn">跳转到百度</button>
    <button id="btn1">跳转到history</button>
    <script>
        btn.onclick=function(){
            window.location='http://www.baidu.com';
        }
        btn1.onclick=function(){
            window.location='07-history.html';
        }
    </script>
</body>

history对象

//连系上面
<body>
    <button id="btn">跳转的上一级</button>
    <a href="05-bom对象.html">跳转到05</a>
    <button id="btn1">跳转到下一级</button>
    <script>
        btn.onclick=function(){
            history.go(-1);
        }
        btn1.onclick=function(){
            history.go(1);
        }
    </script>
</body>

nacigator对象（了解）

获取浏览器信息
用处：PC端和移动端切换

body位置属性

client系列

//body高度由内容撑开，外边距不算
// console.log(document.body.clientHeight);
// console.log(document.body.clientWidth);
//width+padding
// console.log(box.clientWidth);
//height+padding
// console.log(box.clientHeight);

offset系列

//width+padding+border
// console.log(box.offsetWidth);
//height+padding+border
// console.log(box.offsetHeight);
//距离body的距离,和margin、定位等有关
// console.log(box.offsetTop);
// console.log(box.offsetLeft);

scroll系列

//某个元素的滚动条
box2.οnscrοll=function(){
// console.log(box2.scrollTop);
console.log(box2.scrollLeft);
}
//body的滚动条
window.οnscrοll=function(){
    console.log(document.documentElement.scrollTop);
 }

王十一是个喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM和window

BOM和window操作表单获取表单元素form.name<body> <form action="" id="form"> <input type="button" value="登录" name="btn"> <input type="submit"> <input ty...
复制链接

扫一扫

专栏目录