JavaScript的BOM编程，事件-第4章
标签：
JavaScript
标题图
目标
BOM编程
window和document对象
window对象的属性和方法
document对象的属性和方法
JavaScript中对象的分类
浏览器对象：window对象
window对象，这个对象的属性和方法通常被统称为BOM（Browser Object Model，浏览器对象模型）
window.png
常用的属性
status 浏览器状态栏中显示的临时消息 screen 屏幕和显示性能的信息history 访问过的 URL 的信息 location 当前 URL 的信息 document 浏览器窗口中的HTML文档
常用的方法
alert ("提示信息")
confirm("提示信息“)
close ( )
setTimeout()document对象
getElementsByTagName() getElementById() getElementsByName()
事件
事件概念与分类
事件是发生在页面上的动作。
事件分类
页面事件
键盘事件
鼠标事件
表单事件
添加事件
静态绑定
动态绑定
事件流
事件流:：指事件冒泡的过程
DOM实验
原效果
原效果
插入效果
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body>
<table border="1" cellpadding="0" cellspacing="0" id="myTable">
<tr>
<td width="200px">Row1cell1</td>
<td width="200px">Row1cell2</td>
</tr>
<tr>
<td>Row2cell1</td>
<td>Row2cell2</td>
</tr>
<tr>
<td>Row3cell1</td>
<td>Row3cell2</td>
</tr>
</table>
<input type="button" value="插入新行" ="insert()">
<script type="text/javascript">
function insert(){ var NewRow = document.getElementById("myTable").insertRow(0); var x = NewRow.insertCell(0); var y = NewRow.insertCell(1);
x.innerHTML = "新行 Cell1";
y.innerHTML = "新行 Cell2";
} </script></body></html>
image.png
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <input type="button" value="删除第一个图片" ="del()"><br> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="[images/del_1.jpg](images/del_1.jpg)" id="first"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="[images/del_2.jpg](images/del_2.jpg)"> <script type="text/javascript"> function del(){
var delNode = document.getElementById("first");
if (delNode) {
document.body.removeChild(delNode);
};
}
</script> </body> </html>
图片
图片
图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><style type="text/css">
.title{ background: gray; text-align: center;
}</style><body>
<table border="1" cellpadding="0" cellspacing="0" id="myTable">
<tr>
<td width="200px">书名</td>
<td width="200px">价格</td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td align="center">￥30.00</td>
</tr>
<tr>
<td>60个瞬间</td>
<td align="center">￥32.00</td>
</tr><br>
</table>
<input type="button" value="增加一行" ="addRow()">
<input type="button" value="删除第二行" ="delRow()">
<input type="button" value="修改标题" ="updateRow()">
<script type="text/javascript">
function addRow(){ var lengths = document.getElementById("myTable").rows.length; var index; if (lengths >= 2) {
index = 2;
}else{
index = 1;
} var newRow = document.getElementById("myTable").insertRow(index); var coll = newRow.insertCell(0);
coll.innerHTML = "幸福从天而降"; var col2 = newRow.insertCell(1);
col2.innerHTML = "¥18.5";
col2.align = "center";
}
function updateRow(){ var uRow = document.getElementById("myTable").rows[0];
uRow.className = "title";
} function delRow(){ document.getElementById("myTable").deleteRow(1);
} </script></body></html>
图片
图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body >
<div id="div1"></div>
<form action="" name="form1">
<input type="text" name="input1">
<input type="button" value="stop" ="s()">
<input type="button" value="start" ="ss()">
</form>
<script type="text/javascript">
var time=null; function disp(){ var date=new Date(); var str=date.toLocaleString(); document.form1.input1.value=str;
var div1=document.getElementById("div1");
div1.innerHTML=str;
} function s(){ window.clearInterval(time);
} function ss(){
time=window.setInterval("disp()",1000);
} </script></body>
作者：达叔小生
链接：https://www.jianshu.com/p/3cf5f7c182c3
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦