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>

  输入祝福语:<input type="text" size="40" id="mb"/><input type="button" onclick="bless()" value="输入" />

  </body>

  </html>