JavaScript——事件,DOM,Browser Object Model 浏览器对象模型,电灯开关,HTML DOM,表单动态添加
事件,DOM简单学习,BOM简单学习
- 1.DOM简单学习:为了满足案例要求
- 2.事件简单学习
- 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 如何绑定事件
- * 案例1:电灯开关
- 3.BOM:
- 1. 概念:Browser Object Model 浏览器对象模型
- 2. 组成:
- 3. Window:窗口对象
- 1. 创建(不需要创建,可以直接使用里面的方法)
- 2. 方法
- 3. 属性:
- 4. 特点
- 案例轮播图
- 4. Location:地址栏对象
- 自动跳转页面
- 5. History:历史记录对象
- 4.DOM:
- 1.* 概念: Document Object Model 文档对象模型
- 2.* W3C DOM 标准被分为 3 个不同的部分:
- 3。* 核心DOM模型:
- 1.* Document:文档对象
- 2.* Element:元素对象
- 3.* Node:节点对象,其他5个的父对象
- 4. 超链接功能(设置):
- 5.案例(动态表格)
- 3* HTML DOM
- 5.事件监听机制:
- * 概念:某些组件被执行了某些操作后,触发某些代码的执行。
- * 常见的事件:
1.DOM简单学习:为了满足案例要求
功能:控制html文档的内容
获取页面标签(元素)对象:Element
* document.getElementById(“id值”):通过元素的id获取元素对象操作Element对象:
1. 修改属性值:
1. 明确获取的对象是哪一个?
2. 查看API文档,找其中有哪些属性可以设置
2. 修改标签体内容:
* 属性:innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>黑马旅游网</title>
</head>
<body><img src="img/off.gif" alt="" id="blub"><p id="p1">我是暗色灯泡</p>
</body>
<script>var e = document.getElementById("blub");var p1 = document.getElementById("p1");alert("我要换图片了");e.src = "img/on.gif";alert("我要换文字了")p1.innerHTML="亮灯泡"
</script>
</html>
2.事件简单学习
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 造句: xxx被xxx,我就xxx
- 我方水晶被摧毁后,我就责备对友。
- 敌方水晶被摧毁后,我就夸奖自己。
如何绑定事件
1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码1. 事件:onclick--- 单击事件<img src="img/off.gif" alt="" id="blub" onclick="alert('我被点了')">
2. 通过js获取元素对象,指定事件属性,设置一个函数* 代码:
<img src="img/off.gif" alt="" onclick="fun();"><img src="img/on.gif" alt="" id="blub"><script>function fun() {alert('被点了');alert('又被点了');}function fun2() {alert('咋老被点了');}//获取事件var light = document.getElementById("blub");//绑定事件light.onclick=fun2;</script>
* 案例1:电灯开关
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>电灯开关</title></head><body><img id="light" src="img/off.gif"><script>//1.获取图片对象var light = document.getElementById("light");var flag = false;//代表灯是灭的。 off图片//2.绑定单击事件light.onclick = function(){if(flag){//判断如果灯是开的,则灭掉light.src = "img/off.gif";flag = false;}else{//如果灯是灭的,则打开light.src = "img/on.gif";flag = true;}} </script></body></html>
3.BOM:
1. 概念:Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成:
* Window:窗口对象* History:历史记录对象* Location:地址栏对象* Navigator:浏览器对象* Screen:显示器屏幕对象
3. Window:窗口对象
1. 创建(不需要创建,可以直接使用里面的方法)
2. 方法
- 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值:获取用户输入的值 - 与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
<body>
<input type="button" value="打开窗口" id="open">
<input type="button" value="关闭窗口" id="close">
<script>var t = document.getElementById("open");var windowopen;t.onclick = function () {windowopen = open("http://www.baidu.com");}document.getElementById("close").onclick=function () {windowopen.close();}
</script>
</body>
- 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
//一次性定时器var id= setTimeout(fun,2000);//取消定时clearTimeout(id);function fun() {alert('boom')}
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性:
- 获取其他BOM对象:
history
location
Navigator
Screen: - 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();* window引用可以省略。 方法名();
案例轮播图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title>
</head>
<body>
<img src="img/1.jpg" alt="无法显示图片" width="100%" id="img">
<script>var num =1;function fun() {num++;if(num>3){num=1;}document.getElementById("img").src="img/"+num+".jpg";}setInterval(fun,3000);
</script>
</body>
</html>
4. Location:地址栏对象
1. 创建(获取):1. window.location2. location2. 方法:* reload() 重新加载当前文档。刷新3. 属性* href 设置或返回完整的 URL。
自动跳转页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{text-align: center;}span{color: red;}</style>
</head>
<body>
<p><span id="time">5</span>...之后跳转首页</p>
<script>var id = document.getElementById("time");var time = 5;function f() {time--;if(time<=0){location.href="http://www.baidu.com";}id.innerHTML=time;}setInterval(f,1000);</script>
</body>
</html>
5. History:历史记录对象
1. 创建(获取):1. window.history2. history2. 方法:* back() 加载 history 列表中的前一个 URL。* forward() 加载 history 列表中的下一个 URL。* go(参数) 加载 history 列表中的某个具体页面。* 参数:* 正数:前进几个历史记录* 负数:后退几个历史记录3. 属性:* length 返回当前窗口历史列表中的 URL 数量。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>History对象</title>
</head>
<body><input type="button" id="btn" value="获取历史记录个数"><a href="09_History对象2.html">09页面</a><input type="button" id="forward" value="前进">
<script>/*History:历史记录对象1. 创建(获取):1. window.history2. history2. 方法:* back() 加载 history 列表中的前一个 URL。* forward() 加载 history 列表中的下一个 URL。* go(参数) 加载 history 列表中的某个具体页面。* 参数:* 正数:前进几个历史记录* 负数:后退几个历史记录3. 属性:* length 返回当前窗口历史列表中的 URL 数量。*///1.获取按钮var btn = document.getElementById("btn");//2.绑定单机事件btn.onclick = function(){//3.获取当前窗口历史记录个数var length = history.length;alert(length);}//1.获取按钮var forward = document.getElementById("forward");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(1);}</script></body>
</html>
4.DOM:
1.* 概念: Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
2.* W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
* Node:节点对象,其他5个的父对象 - XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
3。* 核心DOM模型:
1.* Document:文档对象
1. 创建(获取):在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法:1. 获取Element对象:1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象:createAttribute(name)createComment()createElement()createTextNode()3. 属性
2.* Element:元素对象
1. 获取/创建:通过document来获取和创建2. 方法:1. removeAttribute():删除属性2. setAttribute():设置属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Element对象</title>
</head>
<body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性"><script>//获取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}//获取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}
</script>
</body>
</html>
3.* Node:节点对象,其他5个的父对象
* 特点:所有dom对象都可以被认为是一个节点* 方法:* CRUD dom树:* appendChild():向节点的子节点列表的结尾添加新的子节点。* removeChild() :删除(并返回)当前节点的指定子节点。* replaceChild():用新节点替换一个子节点。* 属性:* parentNode 返回节点的父节点。
4. 超链接功能(设置):
1.可以被点击:样式2.点击后跳转到href指定的url需求:保留1功能,去掉2功能实现:href="javascript:void(0);"
5.案例(动态表格)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态表格</title><style>table{border: 1px solid;margin: auto;width: 600px;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style></head>
<body><div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name" placeholder="请输入姓名"><input type="text" id="gender" placeholder="请输入性别"><input type="button" value="添加" id="btn_add"></div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td></tr></table><script>/*分析:1.添加:1. 给添加按钮绑定单击事件2. 获取文本框的内容3. 创建td,设置td的文本为文本框的内容。4. 创建tr5. 将td添加到tr中6. 获取table,将tr添加到table中2.删除:1.确定点击的是哪一个超链接<a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>2.怎么删除?removeChild():通过父节点删除子节点*///1.获取按钮/* document.getElementById("btn_add").onclick = function(){//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//3.创建td,赋值td的标签体//id 的 tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name 的 tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender 的 tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdvar td_a = document.createElement("td");var ele_a = document.createElement("a");ele_a.setAttribute("href","javascript:void(0);");ele_a.setAttribute("onclick","delTr(this);");var text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4.创建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.获取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}*///使用innerHTML添加document.getElementById("btn_add").onclick = function() {//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取tablevar table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n" +" <td>"+id+"</td>\n" +" <td>"+name+"</td>\n" +" <td>"+gender+"</td>\n" +" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +" </tr>";}//删除方法function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></body>
</html>
3* HTML DOM
- 标签体的设置和获取:innerHTML
//使用innerHTML添加document.getElementById("btn_add").onclick = function() {//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取tablevar table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n" +" <td>"+id+"</td>\n" +" <td>"+name+"</td>\n" +" <td>"+gender+"</td>\n" +" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +" </tr>";}
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
如:
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”; - 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>控制样式</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 200px;height: 200px;}</style>
</head>
<body><div id="div1">div1</div><div id="div2">div2</div><script>var div1 = document.getElementById("div1");div1.onclick = function(){//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}</script></body>
</html>
5.事件监听机制:
* 概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:
- 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件 - 焦点事件
1. onblur:失去焦点
2. onfocus:元素获得焦点。 - 加载事件:
1. onload:一张页面或一幅图像完成加载。 - 鼠标事件:
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。 - 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。 - 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。 - 表单事件:
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见事件</title><script>/*常见的事件:1. 点击事件:1. onclick:单击事件2. ondblclick:双击事件2. 焦点事件1. onblur:失去焦点。* 一般用于表单验证2. onfocus:元素获得焦点。3. 加载事件:1. onload:一张页面或一幅图像完成加载。4. 鼠标事件:1. onmousedown 鼠标按钮被按下。* 定义方法时,定义一个形参,接受event对象。* event对象的button属性可以获取鼠标按钮键被点击了。2. onmouseup 鼠标按键被松开。3. onmousemove 鼠标被移动。4. onmouseover 鼠标移到某元素之上。5. onmouseout 鼠标从某元素移开。5. 键盘事件:1. onkeydown 某个键盘按键被按下。2. onkeyup 某个键盘按键被松开。3. onkeypress 某个键盘按键被按下并松开。6. 选择和改变1. onchange 域的内容被改变。2. onselect 文本被选中。7. 表单事件:1. onsubmit 确认按钮被点击。* 可以阻止表单的提交* 方法返回false则表单被阻止提交。2. onreset 重置按钮被点击。*///2.加载完成事件 onloadwindow.onload = function(){/*//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}*//*//3.绑定鼠标移动到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠标来了....");}*//* //3.绑定鼠标点击事件document.getElementById("username").onmousedown = function(event){// alert("鼠标点击了....");alert(event.button);}*//* document.getElementById("username").onkeydown = function(event){// alert("鼠标点击了....");// alert(event.button);if(event.keyCode == 13){alert("提交表单");}}*//* document.getElementById("username").onchange = function(event){alert("改变了...")}document.getElementById("city").onchange = function(event){alert("改变了...")}*//*document.getElementById("form").onsubmit = function(){//校验用户名格式是否正确var flag = false;return flag;}*/}function checkForm(){return true;}</script></head>
<body><!--function fun(){return checkForm();}--><form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username"><select id="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
JavaScript——事件,DOM,Browser Object Model 浏览器对象模型,电灯开关,HTML DOM,表单动态添加相关推荐
- Browser Object Model浏览器对象模型
目录 1. Window对象 2. Window Screen对象 3. Window Location对象 4. Window History对象 5. Window Navigator对象 6. ...
- BOM(浏览器对象模型)和DOM(文档对象模型)
什么是BOM(浏览器对象模型) BOM:(Browser Object Mode) 浏览器对象模型. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 ...
- javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- BOM浏览器对象模型(Browser Object Model)
文章目录 一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)...
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- 前端基础入门之js什么是DOM Document Object Model
文章目录 DOM 1.DOM简介 文档 对象 模型 2.节点 节点类型 节点属性 文档节点(Document) 元素节点(Element) 文本节点(Text) 属性节点(Attr) 3.事件 4.文 ...
- AOM(Accessibility Object Model 无障碍对象模型)草案解读
最近在看 AOM(Accessibility Object Model) 相关的草案,草案推出一两年了,发现还没有相关的中文文档或者博客谈到这个,看来国内做的人还是太少了,一般也只有大厂会去跟进这一块 ...
- DOM(document Object model)
API(BOM DOM) 就是一个接口 因为webAPI很多,我们将他称为webAPIs. web APIs由w3c规范 文档对象模型(document Object model)处理可扩展语言(HT ...
最新文章
- 一些还能记住的面试题
- 面向对象编程的乐趣(TextBox.Text=)
- solidworks工具集_【第1975期】SolidWorks!从3D扫描到3D打印的一站式设计工具
- 从CMOS到触发器(一)
- R语言--查看数据类型+类型判断
- 【机器学习】信用卡欺诈检测|用启发式搜索优化XGBoost超参数
- 【TensorFlow-windows】扩展层之STN
- oracle 运营维护_Oracle数据库日常运维常用脚本
- SpringMVC+Spring3.2+Hibernate4整合实例
- 解决为什么JDK要带着JRE一起下载
- 字符串操作的12个小技巧!
- python定时发送微信消息_Python3 itchat实现微信定时发送群消息的实例代码
- Linux调试登陆Visual Studio
- 昆明学院C语言期末考试,昆大c试于题b.doc
- initWithFrame 与 initWithCoder 、awakeFromNib 的方法理解笔记
- optuna 自动化调参利器
- 湖南大学高级软件开发过程
- 欧拉角科普介绍 Roll Pitch Yaw
- ubuntu16.04 更新pip
- java jdbc 下载_java jdbc驱动 下载