标签：输入 closed body 移动 blur 校验 地址栏 定时 turn
BOM:Browser Object Model 浏览器对象模型
2.组成:
window :窗口对象
1.创建:
2.方法:
*与弹出框有关
1.alert(); 弹出警告框
2.confirm(); 显示带有一段消息和确认按钮的对话框
如果用户点击确定按钮则方法返回true,如果用户点击取消按钮,则方法返回false
1 //confirm练习 2 var flag = confirm("您确定要退出吗?"); 3 if(flag){ 4 //退出操作 5 6 alert("欢迎再次光临") 7 8 9 }else{ 10 //提示 11 alert("手抖了吗"); 12 }
3.prompt(); 显示可提示用户输入的对话框
返回值,用来回去用户输入的信息
1 //prompt练习 输入框 2
var result = prompt("请输入用户名");
3 alert(result);
*与打开关闭有关的方法
1.close();关闭浏览器窗口
当前窗口,谁调用我,我关谁
2.open();打开一个新的浏览器窗口
返回新的window 对象
1 //打开一个新窗口 2 3 <input id="openBtn" type="button" value="打开窗口"> 4 <input id="closeBtn" type="button" value="关闭窗口"> 5 var newWindow; 6 var openBtn = document.getElementById("openBtn"); 7 openBtn.onclick=function(){ 8 //打开窗口 9 newWindow= open("http://www.baidu.com"); 10 } 11 //关闭 12 var closeBtn = document.getElementById("closeBtn"); 13 closeBtn.onclick=function(){ 14 //关闭窗口 15 newWindow.close(); 16 }
*与定时器有关的
1.setTimeout(); 在指定的毫秒数后调用函数或计算表达式
clearTimeout();取消上述
参数:
1.js代码或方法对象
2.毫秒值
返回值:
唯一标号,用于取消定时器
2.setInterval();指定周期
clearInterval();取消
1 //一次性的定时器 2 var id = setTimeout("alert(‘boom~~~‘)",3000); 3 4 //取消 5 clearTimeout(id) 6 function fun(){ 7 8 alert(‘boom~~~~~‘); 9 } 10 //循环定时器 11 setInterval(fun,2000); //每隔2秒出现弹框
3:属性:
1.获取BOM对象
history
location
Navigator
Screen
2.获取Dom对象
document
4.特点:
不需要创建,直接使用window使用 window.方法名();
window引用可以省略.
Location : 地址栏对象
方法:
* 1.reload 刷新
* 2.href :跳转
1 var btn = document.getElementById("btn"); 2 btn.onclick=function(){ 3 location.reload(); 4 5 } 6 7 8 var href = location.href; 9 var gotobaidu = document.getElementById("gotobaidu"); 10 gotobaidu.onclick=function(){ 11 12 location.href="https://www.baidu.com"; 13 14 }
Navigator :浏览器对象
Screen: 显示器屏幕对象
History : 历史记录对象
属性:
* length 返回当前窗口历史列表中的url值.
1 var btn = document.getElementById("btn"); 2 btn.onclick =function(){ 3 4 var length = history.length; 5 alert(length) 6 7 }
document 文档对象
1.创建
window.document
document
2.方法
1.获取Element对象
1.getElementByIdById();根据id属性直接获取元素对象,id一般唯一
2.getElementsByTagName();根据元素名称获取元素名称们,返回值是一个数组
3.getElementsByClassName();根据class属性值获取元素对象们
4.getElementsByName();根据name属性获取元素对象们
1 <div id="div1">div1</div> 2 <div id="div2">div2</div> 3 <div id="div3">div3</div> 4 5 <div class="cls1">div4</div> 6 <div class="cls1">div5</div> 7 8 <input type="text" name="username"> 9 <script> 10 //1. 11 //2. 12 var divs = document.getElementsByTagName("div"); 13 alert(divs.length); 14 15 //3 16 var cls1 = document.getElementsByClassName("cls1"); 17 alert(cls1.length); 18 19 //4. 20 var user = document.getElementsByName("username"); 21 alert(user.length); 22 23 24 </script>
2.创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
3.属性
. Element 元素对象
1.获取/创建:通过document来获取和创建
2.方法:
1.removeAttribute();:删除属性
2.setAttribute(): 设置属性
Node:节点对象,其他的5个父对象
Element对象
1 <a>点我试一试</a> 2 <input type="button" id="btn_set" value="设置属性"> 3 <input type="button" id="btn_remove" value="删除属性"> 4 <script> 5 //获取btn 6 var btn_set = document.getElementById("btn_set"); 7 btn_set.onclick=function(){ 8 //获取a标签 9 var element = document.getElementsByTagName("a")[0]; 10 element.setAttribute("href","https://www.baidu.com"); 11 } 12 13 var btn_remove = document.getElementById("btn_remove"); 14 btn_remove.onclick=function(){ 15 //获取a标签 16 var element = document.getElementsByTagName("a")[0]; 17 element.removeAttribute("href"); 18 } 19 20 </script>
Node 节点对象
节点对象 :其他5个的父对象
特点:所有dom对可以认为是一个节点
方法:
CRUE dom 树:
appendChild():向节点的子对象列表的节点添加字节点
removeChild():删除并返回当前节点的指定子节点
replaceChild():替换
1 <title>节点对象</title> 2 <style> 3 div{ 4 border: 1px solid red; 5 } 6 #div1{ 7 width: 200px; 8 height: 200px; 9 } 10 #div2{ 11 width: 100px; 12 height: 100px; 13 } 14 #div3{ 15 width: 120px; 16 height: 120px; 17 color: aqua; 18 } 19 20 21 </style> 22 </head> 23 <body> 24 <div id="div1"> 25 <div id="div2"></div> 26 div1 27 </div> 28 <a href="JavaScript:void(0)" id="del">删除div的子节点</a> 29 <a href="JavaScript:void(0)" id="add">增加div的子节点</a> 30 <!--<button id="del">删除子节点</button>--> 31 <script> 32 var element_a = document.getElementById("del"); 33 element_a.onclick=function () { 34 35 36 var div1 = document.getElementById("div1"); 37 var div2 = document.getElementById("div2"); 38 div1.removeChild(div3) 39 40 } 41 var element_add = document.getElementById("add"); 42 element_add.onclick=function () { 43 44 45 var div1 = document.getElementById("div1"); 46 var div2 = document.getElementById("div2"); 47 var div3 = document.createElement("div"); 48 div3.setAttribute("id","div3"); 49 div1.appendChild(div3); 50 51 } 52 </script>
事件对象系统学习
事件:操作
事件源:组件
监听器:代码
注册监听:将事件,事件源,监听器结合在一起
常见的事件:
1.点击事件
onclick:单击事件
ondblclick:双击事件
2.焦点事件
onblur:失去焦点 一般用于表单校验
onfocus:元素获得焦点
3.加载事件
onload:一张页面或一幅图像加载完成后实现
4.鼠标事件
onmousedown:鼠标按钮被按下
*定义方法时,定义一个形参,结束event对象
*event对象的button属性可以获得鼠标的哪个键被点击了
onmousemove:鼠标被移动
onmouseout:鼠标从某元素被移开
onmouseover:鼠标移动到某元素上
onmouseup:鼠标按键被松开
5.键盘事件
onkeydown:键盘某个按键被按下
onkeyup:键盘按键被松开
onkeypress:某个按下并松开
6.选择和改变
onchange:域的内容被改变
onselect:文本被选中
7,表单事件
onsubmit:确认按钮被点击,表单提交
可以阻止表单的提交,校验表单
onreset:重置
//加载事件 window.onload=function(){ //失去焦点事件 document.getElementById("username").onblur=function(){ alert("失去焦点了"); } //鼠标移到元素之上 document.getElementById("username").onmouseover=function(){ alert("鼠标来了"); } //鼠标点击事件 document.getElementById("username").onmousedown=function(event){ //alert("鼠标点击了"); alert(event.button); } //键盘被点击事件 document.getElementById("username").onkeydown=function(event){ //alert("键盘按了"); if (alert(event.keyCode==13)){ alert("提交表单"); } } //改变了触发 document.getElementById("username").onchange=function(event){ //alert("键盘按了"); alert("改变了..."); } document.getElementById("city").onchange=function(event){ //alert("键盘按了"); alert("改变了..."); } } //表单校验 document.getElementById("from").onsubmit=function(){ // var flag=true; return flag; } </script>
标签：输入 closed body 移动 blur 校验 地址栏 定时 turn
原文地址：https://www.cnblogs.com/yumu77/p/13650201.html
