JavaScript的BOM编程，事件-第4章

目标

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 = "&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章的更多相关文章

javascript之BOM编程Screen(屏幕)对象
这个对象属性相对比较简单.掌握四个方法即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言＆前言
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者译者团队(排名不分先后):阿希.blueken.brucec ...
翻译连载 | 第 10 章：异步的函数式（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
翻译连载 | 第 10 章：异步的函数式（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
javascript bom 编程
javascript bom 编程 BOM: 浏览器对象模型 DOM Window :窗口Window Document 属性: status :状态栏 self:自己 ...
翻译连载 | 第 11 章：融会贯通－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象一.window对象浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
[书籍翻译] 《JavaScript并发编程》第五章使用Web Workers
本文是我翻译<JavaScript Concurrency>书籍的第五章使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...
[书籍翻译] 《JavaScript并发编程》第七章抽取并发逻辑
本文是我翻译<JavaScript Concurrency>书籍的第七章抽取并发逻辑,该书主要以Promises.Generator.Web workers等技术来讲解JavaScrip ...

随机推荐

JPA中建立数据库表和实体间映射小结
在JPA中,映射数据库表和实体的时候,需要注意一些细节如下, 实体类要用@Entity的注解: 要用 @Id 来注解一个主键: 如果跟数据库相关联,要用@Table注解相关数据库表: 实体类中字段需要 ...
tesseract编译错误：fatal error: allheaders.h: No such file or directory
错误描述: globaloc.cpp::: fatal error: allheaders.h: No such file or directory #include "allheaders ...
java中的throw、throws和try catch浅析
今天在公司和同事聊天的时候,突然发现自己对java中的throw.throws和try catch的作用理解不够准确,在网上查了查,在此大概梳理一下. throw用于抛出异常,例如 throw new ...
centos部署redis主从
安装环境 CentOS 6.5 .CentOS 7.4 主Redis:10.159.44.175 从Redis: 10.159.44.176.10.159.44.177 Redis下载和安装在3台机 ...
100-days: eleven
Title: Facebook's live streaming(网络直播) is criticized(批评) after mosque(清真寺) shooting(枪击). live adj.现场 ...
Balanced Numbers （数位dp+三进制）
SPOJ - BALNUM 题意: Balanced Numbers:数位上的偶数出现奇数次,数位上的奇数出现偶数次(比如2334, 2出现1次,4出现1次,3出现两次,所以2334是 Balance ...
Git常用命令及场景
Git命令推送到远程分支 1.登录GitHub创建一个远程仓库. https://github.com 2.git init 本地创建一个目录,并初始化一个git仓库. 3.git add 添加文件到 ...
PHP并发之Swoole
<?php /** * Created by PhpStorm. * User: zhezhao * Date: 2016/10/20 * Time: 10:51 */ $url_arr = a ...
PHP开发——数据类型
概述 l 变量就是一个容器,变量本身并没有类型,变量的类型解决值的类型. l PHP和JS都属于弱类型语言,变量在运行过程中,类型是可以变的.但是,Java不可以. l 标量(基本)数据类型:字 ...
copy other
DELPHI基础开发技巧 ◇[DELPHI]网络邻居复制文件 uses shellapi; copyfile(pchar('newfile.txt'),pchar('//computername/di ...

JavaScript的BOM编程，事件-第4章

目标

JavaScript中对象的分类

document对象

事件

事件概念与分类

添加事件

事件流

DOM实验

结语

JavaScript的BOM编程，事件-第4章的更多相关文章

随机推荐

热门专题