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