JavaScript的BOM编程,事件-第4章
2023-09-11 14:16:53 时间
目标
- BOM编程
- window和document对象
- window对象的属性和方法
- document对象的属性和方法
JavaScript中对象的分类
- 浏览器对象:window对象
- window对象,这个对象的属性和方法通常被统称为BOM(Browser Object Model,浏览器对象模型)
- 常用的属性
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="插入新行" onclick="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>
<!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="删除第一个图片" onclick="del()"><br>
<img src="[images/del_1.jpg](images/del_1.jpg)" id="first">
<img src="[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="增加一行" onclick="addRow()">
<input type="button" value="删除第二行" onclick="delRow()">
<input type="button" value="修改标题" onclick="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" onclick="s()">
<input type="button" value="start" onclick="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>
</html>
结语
相关文章
- 从八道面试题看JavaScript DOM事件机制
- 深入理解javascript事件
- 第一百三十六节,JavaScript,封装库--事件绑定
- 第一百一十四节,JavaScript文档对象,DOM进阶
- JavaScript经典代码【一】【javascript HTML控件获取值】
- [Functional Programming ADT] Debug a Functional JavaScript composeK Flow
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] How to write a Javascript libarary
- [Javascript] How to use JavaScript's String.replace
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
- Javascript 中的false,零值,null,undefined和空字符串对象
- [Javascript] Wrap Arrays with Proxy
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- [Javascript] Create Your First Iterator in JavaScript
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [AngularJS] Javascript scope and AngularJS $scope
- 几种用JavaScript实现的单例模式(Singleton Design Pattern)
- JavaScript 里变量名前面加了大括号代表什么含义
- 从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
- 【JavaScript脚本】——T2事件操作
- IOS Object和javaScript相互调用
- 【华为OD机试 2023】 优秀学员统计(C++ Java JavaScript Python)
- 《Javascript权威指南》十六学习笔记:BOM资源---BOM基本应用
- JavaScript学习笔记之下拉选择框的操作
- 2014年辛星解读Javascript之DOM之事件及其绑定
- 常见的windows下无文件落地攻击手法——主要讨论了powershell脚本、HTA是HTML Application的缩写(HTML应用程序)、xml中利用COM组件、certutil下载然后调用Dcom组件执行恶意代码、msxsl.exe是微软用于命令行下处理XSL的可以执行JavaScript执行系统命令
- 请写出JavaScript中常用的三种事件。