BOM：browser object module 浏览器对象模型

BOM 主要处理浏览器窗口和框架。

window对象

open、close

打开（关闭）新的页面，窗口

 <script type="text/javascript">//window对象//  close方法 => 关闭当前窗口function close2(){window.close();            }// open方法  => 打开一个新的窗口//参数1: 打开的url//参数2: 窗口名称=> name属性//参数3: 窗口的特征=> 长宽(其他属性未必好使)...//参数4: 是否将新窗口的地址加入到浏览器历史记录中// 返回值: 返回一个window对象. 新打开的窗口的window对象function open2(){window.open("../猜数字.html", "",'width=100,height=100');}</script><body><input type="button" onclick="close2();"  value="关闭当前窗口"  /><input type="button" onclick="open2();"  value="打开猜数字窗口"  /></body>

点击关闭，关闭当前页面

定时器

通俗说就是每隔，多长时间执行一次

 <script type="text/javascript">//window对象//定时器方法// setInterval  设置定时器// clearInterval 清除定时器//-----------------------------------------------//参数1: 可以是一段string, 内容是js代码//参数2: 毫秒单位的时间//返回值: 当前开启的定时器id// 功能: 每个参数2毫秒,执行参数1代码.var id = window.setInterval("alert('abc');", 2000);//------------------------------------------------function stop(){window.clearInterval(id);}</script></head><body><input type="button" onclick="stop();"  value="停止"  /></body>

没隔两秒，弹一次哈哈，有没有觉得很烦啊，点击停止就ok啦

延时器

当指定的时间到了之后，才执行，而且执行一次就ok啦

 //window对象//定时器方法// setTimeout  设置定时器// clearTimeout 清除定时器//-----------------------------------------------//参数1: 可以是一段string, 内容是js代码//参数2: 毫秒单位的时间//返回值: 当前开启的定时器id// 功能:参数2毫秒后,执行参数1代码(只执行一次).var id = window.setTimeout("alert('abc');", 2000);//------------------------------------------------function stop(){window.clearTimeout(id);}</script></head><body><input type="button" onclick="stop();"  value="停止"  /></body>

定时器扩展

<script type="text/javascript">//window对象function fun1(){alert("fun1!!!!");}//参数1: 也可以接受一个函数类型的对象// 如下两行代码,执行效果是一样的var id=window.setInterval(fun1, 2000)//window.setInterval("fun1()", 2000)function stop(){window.clearInterval(id);}</script></head><body><input type="button" onclick="stop();"  value="停止"  /></body>

注意，刚开始笔者没写停止函数，要疯了都，不断弹窗，而且怎么停止也关不掉，那感觉你懂得，当然不是浏览器，是编辑器，好了

前进和后退

 <script type="text/javascript"></script></head><body><a href="06-history对象02.html" >06-history对象02.html</a><input type="button" onclick="window.history.forward()"  value="前进"  /><input type="button" onclick="window.history.go(1)"  value="前进"  /></body>

必须要有打开过，有历史记录，才可以前进和后退的，不然也没效果

这里可以先点击a链接，就可以啦

06-history对象02.html代码

 <script type="text/javascript"></script></head><body><input type="button" onclick="window.history.back()"  value="后退"  /><input type="button" onclick="window.history.go(-1)"  value="后退"  /></body>

DOM：Document object module 文档对象模型

DOM 将把整个页面规划成由节点层级构成的文档

DOM个人觉得掌握如何获取对象和基本事件，以及元素的增删改查，基本ok了

dom对象的获取

 <script type="text/javascript">// 浏览器把 dom的定点对象 Document对象的引用交给了 window对象//代码:window.document//document    var doc = window.document;//alert(doc);//element 的获得 (重点)var div1 = document.getElementsByTagName("div")[0];var div2 = document.getElementById("one");var div3 = document.getElementsByClassName("two")[0];var div4 = document.getElementsByName("three")[0];alert(div3 == div4);</script>

事件1

Onclick 事件点击

 <body><input type="button" value="点我" id="one" onclick="alert('heihei')" /></body><script type="text/javascript">//演示 给id为one的 按钮 添加事件的方法//方式1:    /* //1 获得要添加的元素对象var one = document.getElementById("one");//2 添加事件函数属性one.onclick=function(){alert("haha");} *///方式2:// <input type="button" value="点我" id="one" onclick="alert("heihei")" /> </script>

事件2

onblur、onfocus 焦点得到失去事件

<script type="text/javascript">var one = document.getElementById("one");one.onblur=function(){alert("失去焦点!");}one.onfocus=function(){alert("得到焦点!");}</script>

事件3

onchange 值发生改变事件

 <body><input type="text" id="one"  /><select id="two" ><option>大专</option><option>本科</option></select></body><script type="text/javascript">var one = document.getElementById("one");one.onchange=function(){alert("被改变了!");}var two = document.getElementById("two");two.onchange=function(){alert("被改变了!");}</script>

事件4

onkeydown、up 、press

按键事件

<script type="text/javascript">/*  onkeydown 某个键盘按键被按下。 3 1 No Yes onkeypress 某个键盘按键被按下并松开。 3 1 9 Yes onkeyup 某个键盘按键被松开。 3 1 9 Yes  *///event =>　封装了事件发生的详情//keyCode属性 => 按下按键的unicode码var one = document.getElementById("one");one.onkeydown=function(event){//1 获得摁下的按键var key = event.keyCode;//2 判断按键按下的是否是回车if(key==13){//是=>表单提交alert("表单被提交了");                 }}</script>

事件5

onload

页面加载事件

  </head><script type="text/javascript">//onload 当页面加载完成时触发</script><body onload="alert('haha');" ><input type="text" id="one"  /></body>

事件6

onmousedown、out、over、move

鼠标按下、松开、从某元素移开、移到某一元素

 <style type="text/css">div{border:1px red solid;width:300px;height: 300px;}</style></head><body  ><div id="one"></div></body><script type="text/javascript">/*  onmousedown 鼠标按钮被按下。 4 1 9 Yes onmouseup 鼠标按键被松开。onmouseout 鼠标从某元素移开。 4 1 9 Yes onmouseover 鼠标移到某元素之上。 3 1 9 Yes onmousemove 鼠标被移动。 3 1 9 Yes */var one = document.getElementById("one");/*     one.onmousedown =function(event){alert(event.button);}one.onmouseout =function(event){alert("onmouseout");}one.onmouseover =function(event){alert("onmouseover");} */one.onmousemove =function(event){alert(event.clientX+"==>"+event.clientY);}</script>

事件7

onsubmit、event.preventdefault

表单提交、阻止默认事件的发生

  <body  ><form action="#" id="one"  >用户名:<input type="text" /><br><input type="submit" value="提交" /></form></body><script type="text/javascript">//onsubmit 当表单提交时触发//作用: 表单验证//onsubmit="return fun();"var one = document.getElementById("one");one.onsubmit = function (event){//校验//校验通过alert("校验不通过!");//校验不通过 => 拦截表单提交//return false;// 阻止默认事件的发生event.preventDefault();} </script>

事件8

event.stopPropagation

阻止事件继续传播

 <style type="text/css">div{border:1px red solid;}#one{width:300px;height: 300px;}#two{width:100px;height: 100px;}</style></head><body  ><div id="one"><div id="two"></div></div></body><script type="text/javascript">//event.stopPropagation();//阻止事件的继续传播document.getElementById("two").onclick=function (event){alert("two");event.stopPropagation();}document.getElementById("one").onclick=function (){alert("one");}</script>

补充一下吧：

CRUD：元素的增删改查

<!--加入样式表-->
<style type="text/css">
div {border:#0099FF 1px solid;height:60px;width:120px;margin:20px 0px 20px 20px;padding:10px 0px 0px 20px;}#div_1{background-color:#00FFFF;}#div_2{background-color:#FF3399;}#div_3{background-color:#0000FF;}#div_4{background-color:#FFFF66;}
</style></head><body><div id="div_1"></div><div id="div_2">div区域2</div><div id="div_3">div区域3</div><div id="div_4">div区域4</div><hr /><input type="button" value="创建并添加节点" onclick="addNode()" /><input type="button" value="删除节点" onclick="deleteNode()" /><input type="button" value="替换节点" onclick="updateNode()" /><input type="button" value="克隆节点" onclick="copyNode()" /></body>
<script type="text/javascript">//创建并添加节点function addNode(){// 1 创建A标签对象   <a></a>var a = document.createElement("a");// 2 为创建的a标签增加属性a.setAttribute("href", "http://www.itcast.cn");// 3 为a标签添加标签体a.innerHTML = "点我";// 4 找到div标签var div_1 = document.getElementById("div_1");// 5 添加div_1.appendChild(a);}//删除节点function deleteNode(){//1 获得要删除的divvar div_2 = document.getElementById("div_2");//2 获得div的父元素var parent = div_2.parentNode;//3 通过爹删除孩子parent.removeChild(div_2);}//替换节点function updateNode(){//1 获得被替换的divvar div_3 = document.getElementById("div_3");//2 创建img元素对象<img />var img = document.createElement("img");//3 为img添加属性img.setAttribute("src", "mn.jpg");img.setAttribute("width", "300");//4 找到爹var parent = div_3.parentNode;//5 替换parent.replaceChild(img, div_3);}//克隆节点function copyNode(){// 1.获得div4var div_4 = document.getElementById("div_4");// 2.调用克隆方法克隆var div_copy = div_4.cloneNode(true);// 3.获得父亲\var parent = div_4.parentNode;// 4.添加到最后一个div之前//parent.appendChild(div_copy);parent.insertBefore(div_copy, div_4);}
</script>

好吧，其实我已经非常努力的在写了，看不懂的话，我只能说：怪我咯，哈哈哈，最后愿你能够早日实现你的梦想。

web前端之js快速入门（BOM和DOM）相关推荐

web前端之js快速入门（ECMAscript）
javascript:首先和java没有任何关系,蹭热度.... 静态网页组成:结构(html).样式(css).动作(javascript 简称 js). 详细教程地址:菜鸟教程 - 学的不仅是技术 ...
web前端之css快速入门
css:又称层叠样式表具体英文单词(好吧,我又不是学英文) w3c,中文也称之为万维网.网页地址:http://www.w3school.com.cn/ 里面包最详细的教程,但是前提你愿意花费那么多 ...
54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础能够与后端程序员更加紧密的配合 ...
好程序员web前端分享js剪切板Clipboard.js 使用
好程序员web前端分享js剪切板Clipboard.js 使用,clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素. 必须要与一个DOM元素相关联,并 ...
好程序员web前端分享JS引擎的执行机制
好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言. JS的EventLoop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的eventloop. 1.灵魂三问: ...
TensorFlow.js快速入门
by Pau Pavón 通过保罗·帕文(PauPavón) TensorFlow.js快速入门 (A quick introduction to TensorFlow.js) TensorFlow ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
Web前端，JS基础之ATM取款机案例
前言持续学习总结输出中,今天分享的是Web前端,JS基础之ATM取款机案例需求用户在ATM取款时可以选择存钱.取钱.查看余额和退出功能分析 1.循环的时候,需要反复提示输入框,所以提示框写要到 ...

web前端之js快速入门（BOM和DOM）

open、close

定时器

延时器

定时器扩展

前进和后退

web前端之js快速入门（BOM和DOM）相关推荐

最新文章

热门文章