日期:2014-05-16  浏览次数:20466 次

js中关于简单事件的处理与浏览器对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>简单的事件处理</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--
    <script language="text/javascript" src="hello.html">这个js的外部调用标签不能自结束</script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    -->
    <script type="text/javascript">
    	function clickD(obj){
    		alert(obj.innerHTML);
    	}
    	
    	function mouseD(obj){
    		obj.style.color = "#f00";
    		//当使用代码来设置样式时,如果css中通过-来表示的,都必须要用驼峰标示font-size -> fontSize
    		obj.style.fontSize = "16px";
    	}
    	function outD(obj){
    		obj.style.color = "#000";
    		obj.style.fontSize = "18px";
    	}
    	
    	//with的用法
    	with(document){
    		write("dddd<br/>");
    	}
    	document.write("aaaa<br/>");
    	document.write("bbbb<br/>");
    	document.write("cccc<br/>");
    </script>
  </head>
  
  <body>
  	<div onclick="clickD(this)" style="cursor:pointer;">点击了试一下</div>
    <div onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动来试试</div>
    
  </body>
</html>


2,浏览器对象的例子:《涉及的是两个浏览器页面之间的传值》

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	// setTimeout("endWelcome()",5000);
	// function endWelcome() {
		// document.getElementById("welcome").style.display = "none";
	// }
	</script>
</head>
<body>
	<div id="welcome">欢迎进行我们的网站</div>
	<a href="#" onclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a>
	<a href="#" onclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a>
	<br/>
	<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a>
	<a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a>
	<div id="bless"></div>
</body>
</html>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	function bless() {
		//获取输入的祝福语
		var mb = document.getElementById("mb").value;
		//获取父类窗口
		var p = window.opener;
		//获取父类窗口中的id为bless的div
		var pd = p.document.getElementById("bless");
		//设置pd的值
		pd.innerHTML = mb;
		//关闭当前窗口
		window.close();
	}
	</script>
</head>
<body>