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

标题图

目标

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

JavaScript中对象的分类

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

window.png

  • 常用的属性
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>

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="删除第一个图片" 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>

结语

送❤

posted @ 2018-08-02 22:39  达达前端  阅读(298)  评论(0)  编辑  收藏  举报