目标

  • BOM编程
  • window和document对象
  • window对象的属性和方法
  • document对象的属性和方法

JavaScript中对象的分类

  1. 浏览器对象：window对象
  2. window对象，这个对象的属性和方法通常被统称为BOM（Browser Object Model，浏览器对象模型）

  • 常用的属性
status 浏览器状态栏中显示的临时消息

screen 屏幕和显示性能的信息

history 访问过的 URL 的信息

location 当前 URL 的信息

document 浏览器窗口中的HTML文档
  • 常用的方法
alert ("提示信息")

confirm("提示信息“)

close ( )

setTimeout()

document对象

getElementsByTagName()

getElementById()

getElementsByName()

事件

事件概念与分类

事件是发生在页面上的动作。

  • 事件分类
  1. 页面事件
  2. 键盘事件
  3. 鼠标事件
  4. 表单事件

添加事件

  1. 静态绑定
  2. 动态绑定

事件流

事件流:：指事件冒泡的过程

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 = "&yen;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的BOM编程，事件-第4章的更多相关文章

  1. javascript之BOM编程Screen(屏幕)对象

    这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言＆前言

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...

  3. 翻译连载 | 第 10 章：异步的函数式（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  4. 翻译连载 | 第 10 章：异步的函数式（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  5. javascript bom 编程

     javascript bom  编程 BOM: 浏览器对象模型 DOM Window  :窗口Window Document 属性:     status :状态栏     self:自己    ...

  6. 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. 第三章 JavaScript操作BOM对象

    第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...

  8. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  9. [书籍翻译] 《JavaScript并发编程》第七章 抽取并发逻辑

    本文是我翻译<JavaScript Concurrency>书籍的第七章 抽取并发逻辑,该书主要以Promises.Generator.Web workers等技术来讲解JavaScrip ...

随机推荐

  1. 深度学习VS机器学习——到底什么区别

    转自:https://baijiahao.baidu.com/s?id=1595509949786067084&wfr=spider&for=pc 最近在听深度学习的课,老师提了一个基 ...

  2. Linux简单学习

    参考自:http://www.runoob.com/linux/linux-tutorial.html  一.是什么 Linux 类Unix操作系统.是一个基于POSIX和UNIX的多用户.多任务.支 ...

  3. Unity shader 官网文档全方位学习（一）

    转载:https://my.oschina.net/u/138823/blog/181131 摘要: 这篇文章主要介绍Surface Shaders基础及Examples详尽解析 What?? Sha ...

  4. oracle中文乱码的解决方法

    select userenv('language') from dual; NLS_LANG AMERICAN_AMERICA.AL32UTF8

  5. 今天花了好长的时间终于把SecureCRT安装成功了 现在分享给大家 安装的步骤, 希望对大家用帮助

    转载地址:https://www.cnblogs.com/lianghe01/p/6618651.html 今天花了好长的时间终于把SecureCRT安装成功了 现在分享给大家 安装的步骤, 希望对大 ...

  6. 用element-ui 时，报value.getTime is not a function错误：

    在用element-ui 时,报value.getTime is not a function错误:错误分析:date-picker 的时间是格林威时间,如果Thu Jun 22 2017 19:07 ...

  7. php的pid文件指定用户

    比如pid文件指定www用户,首先得有这用户和用户组. 找到pathtophp-fpm.conf文件,修改里面得相关内容. 修改listen.owner=www listen.group=www us ...

  8. extentReport生成测试报告

    之前在使用extentReport生成测试报告的时候,没有加载到相关的css,经检查为下面两个文件没有正确加载 后改变配置,加载本地的css和js文件,目前测试报告正确显示 1.创建TestNg的Re ...

  9. Linux shell 信号继承

    shell中,向进程发送信号多多通过ctrl键加上一些功能键来实现,这里是常见的Ctrl组合键及其意义: 组合键 信号类型 意义 Ctrl+C INT信号,即interrupt信号 停止运行当前的作业 ...

  10. T-codes & Rarely Seen Tables(Updated from previous note)

    T-codes C CO CO01/02/03:Production Order CG CG3Y:Download file from server,never used this before CM ...