目标

  • 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. php 处理上百万条的数据库如何提高处理查询速度

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  2. React Native在window下的环境搭建（二）：创建新项目

    React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...

  3. 监测SQLServer数据库中表的数据变化 方案

    sqlDependency提供了这样一种能力:当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...

  4. PhoenixFD插件流体模拟——UI布局【Resimulation】详解

    Liquid Resimulation 流体再(重)渲染 本文主要讲解Resimulation折叠栏中的内容 主要内容 Overview 综述 Parameters 参数 综述 Liquid Resi ...

  5. CentOS 特殊变量（$0、$1、$2、 $?、 $# 、$@、 $*）

    名称 说明 $0 脚本名称 $1-9 脚本执行时的参数1到参数9 $? 脚本的返回值 $# 脚本执行时,输入的参数的个数 $@ 输入的参数的具体内容(将输入的参数作为一个多个对象,即是所有参数的一个列 ...

  6. 100道c++面试题(上)

    1. new, delete, malloc, free关系 new/delete是c++的运算符,delete会调用对象的析构函数: malloc/free是c/c++的标准库函数,free只释放内 ...

  7. WIN10在loadrunner安装或path4插件安装时遇到的管理员阻止程序运行---解决方案（可用）

    方法1:关闭用户账户控制1.“win+x”进入控制面板,选择安全性与维护,在左侧更改windows smartscreen筛选器设置,选择"不执行任何操作",单击确定即可.2.“w ...

  8. 交叉编译sudo

    编译Sudo version 1.8.6p7下载路径:https://www.sudo.ws/news.html 1.交叉编译 # tar -xvf sudo-1.8.6p7.tar.gz # cd ...

  9. 源发行版 1.8 需要目标发行版 1.8以及usage of api documented as @since 1.8+

    Maven项目每个Module都有单独的pom.xml,如果不在pom.xml中进行配置,则默认将Module的Language Level设置为5.所以要在pom.xml文件中添加插件进行配置. & ...

  10. java ssh执行shell脚本

    1.添加依赖 com.jcraft:jsch ch.ethz.ganymed:ganymed-ssh2:262 2.获取连接 conn = new Connection(ip, port); conn ...