学js的第11天

最新推荐文章于 2022-03-11 19:43:39 发布

回忆见、

最新推荐文章于 2022-03-11 19:43:39 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_48764743/article/details/119875724

版权

day11 BOM

1.DOM表单操作

1.1 快速获取表单元素

快速获取表单元素 form.标签name属性

//1.获取元素
var oForm = document.getElementsByTagName("form")[0];

//2.快速获取表单元素  form.标签name属性
console.log(oForm.user);
console.log(oForm.password);
console.log(oForm.sex); //RadioNodeList(2) [input, input, value: "on"]
console.log(oForm.sex.value);
console.log(oFormhobby);

1.2 表单事件

表单事件

oForm.onsubmit : 提交表单的时候触发

return true : 默认允许提交

return false：阻止提交

//2.  oForm.onsubmit : 提交表单的时候触发
oForm.onsubmit = function(){
    if(oForm.user.value == ""){
        alert("请输入内容");
        //阻止提交
        return false;
    }
}

oForm.onreset : 重置表单的时候触发

return true : 默认允许重置

return false：阻止重置

//3.oForm.onreset : 重置表单的时候触发
oForm.onreset = function(){
    //带确认的对话框，确定--true   取消---false
    var s = confirm("是否需要重置");
    if(s == true){
        return true;
    }else{
        return false;
    }
}

表单元素事件

input.onblur : 失去焦点时触发

input.onfocus : 获取焦点时触发

//4.input.onfocus : 获取焦点时触发
oForm.user.onfocus = function(){
    this.style.background = "green";
}
//5.input.onblur : 失去焦点时触发
oForm.user.onblur = function(){
    this.style.background = "red";
}

input.oninput : 内容发生变化时触发 / ie: input.onpropertychange

//6. input.oninput : 内容发生变化时触发
/*oForm.user.oninput = function(){ //标准
    console.log(this.value);
}
oForm.user.onpropertychange = function(){ //ie
    console.log(this.value); 
}*/
oForm.user.oninput = change;
oForm.user.onpropertychange = change; 
function change(){
    console.log(this.value);
}

input.onchange : 失去焦点时内容和上一次相比发生变化时触发

//7.input.onchange : 失去焦点时内容发生变化时触发
oForm.user.onchange = function(){
    console.log(this.value);
}

2.BOM

BOM：Browser Object Model 浏览器对象模型
window和document
- window：js中最顶层的一个对象，窗口
- document：文档

2.1.window提供的方法

2.1.1 系统对话框

alert(message) : 警告框
confirm("message"): 带确认的对话框

prompt(message,default) : 带输入的对话框

//1.   alert(message) : 警告框
alert("今天周一!!!");

//2. confirm("message"): 带确认的对话框  确定---true  取消---false
var s = confirm("明天听写吗？");
console.log(s);

//3. prompt(message,default) : 带输入的对话框   确定--输入的内容  取消--null 
var text = prompt("请输入今天的作业个数",0);  
console.log(text);

2.1.2 open与close

open（）打开一个新窗口

/*open写在行间，需要添加window
open(url,target[_self,_blank],特殊字符串,是否取代当前窗口在浏览记录中的位置)
返回新窗口的window*/
<button onclick = "window.open('http://www.taobao.com')">taobao</button>
<button οnclick='fun()'>京东</button>
<script>
    function fun(){
    var newWindow = open("http://www.jd.com","_blank","width:500px;height:500px");
    newWindow.alert("0713到处一游");
}
</script>

close（）关闭当前窗口

<button οnclick="window.close()">关闭当前窗口</button>

2.1.3 loaction

==location.href : 获取或设置当前窗口显示的url地址==
==location.search:获取url中搜索内容==

==location.protocol：协议==

//1.location.href : 获取或设置当前窗口显示的url地址
console.log(location.href);
setTimeout(function(){
    //location.href = "http://www.baidu.com";
    // location.reload(); //重构 刷新
},2000);


//2.如何快速获取url中搜索内容
console.log(location.search);

//3.协议
console.log(location.protocol);

2.1.4 history

1---》2----》3

当前处于2的页面，history.forward():前进就会去到 3

当前处于2的页面，history.back() : 后退就会去到 1

history.go() : 跳转，正数，前进n级，负数，后退n级

history.forward():前进
history.back() : 后退
history.go() : 跳转

2.2 BOM三大系列

获取元素的宽高

2.2.1 client : 可视区

==元素.clientWidth : 获取元素的可视宽 content+padding==
==元素.clientHeight : 获取元素的可视高 content+padding==
元素.clientTop/Left：获取元素的上/左边框

==获取屏幕的可视宽高：document.documentElement.clientWidth/Height==

client系列：
    元素.clientWidth : 获取元素的可视宽   content+padding
    元素.clientHeight : 获取元素的可视高
    元素.clientTop: 获取元素的上边框
    元素.clientLeft:获取元素的左边框

    获取窗口的可视宽高：
    document.documentElement.clientWidth/clientHeight

  
var oDiv = document.getElementsByTagName("div")[0];

//1.获取元素的可视宽高
console.log(oDiv.clientWidth); //120  content+padding

//2.元素.clientTop: 获取元素的上边框
console.log(oDiv.clientTop);

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

2.2.2 offset：占位

==元素.offsetWidth : 获取元素的占位宽 content+padding+border==
==元素.offsetHeight : 获取元素的占位高 content+padding+border==
==元素.offsetTop:获取当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离==

==元素.offsetLeft:获取当前元素的左部到定位父元素的距离，如果没有定位父元素到body的距离==

offset系列：占位宽高
    元素.offsetWidth：获取元素的占位宽
    元素.offsetHeight：获取元素的占位高
    元素.offsetTop : 获取元素的顶部距离定位父元素的距离，如果没有定位父元素获取到body的距离
    元素.offsetLeft : 获取元素的左部距离定位父元素的距离，如果没有定位父元素获取到body的距离

var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p")[0];

//1.元素.offsetWidth：获取元素的占位宽
console.log(oDiv.offsetWidth); //240  content+padding+border

//2元素.offsetTop : 获取元素的顶部距离定位父元素的距离，如果没有定位父元素获取到body的距离
console.log(oP.offsetTop); //120

2.2.3 scroll：滚动

元素.scrollWidth：元素的实际内容宽
元素.scrollHeight：元素的实际内容高
元素.scrollTop：元素被卷去的高
元素.scrollLeft：元素被卷去的宽
==onscroll：滚动条滚动的时候触发==

==页面被卷去的高：document.documentElement.scrollTop||document.body.scrollTop==

==注意：只有滚动距离可以设置：document.documentElement.scrollTop = 0;==

//1.获取元素
var oDiv = document.getElementsByTagName("div")[0];

//2.元素.scrollWidth：元素的实际内容宽
console.log(oDiv.scrollWidth); //1300

//3.onscroll ： 滚动条滚动的时候触发
oDiv.onscroll = function(){
    console.log(oDiv.scrollTop); //元素.scrollTop：元素被卷去的高
    console.log(oDiv.scrollLeft); //元素.scrollTop：元素被卷去的宽
}

//页面的滚动距离
window.onscroll = function(){
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

2.3 BOM三大事件

window.onscroll : 页面滚动事件，滚动条滚动的时候触发
window.onresize : 窗口可视区大小发生变化时触发
window.onload : 加载事件，等文档和资源都加载完成后触发

回忆见、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学js的第11天

day11 BOM1.DOM表单操作1.1 快速获取表单元素快速获取表单元素 form.标签name属性 //1.获取元素var oForm = document.getElementsByTagName("form")[0];//2.快速获取表单元素 form.标签name属性console.log(oForm.user);console.log(oForm.password);console.log(oForm.sex); //RadioNodeList(2)[i.
复制链接

扫一扫