js中事件的处理与浏览器对象示例介绍


Posted in Javascript onNovember 29, 2013
<!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>
Javascript 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
js实现的折叠导航示例
Nov 29 #Javascript
javascript特殊用法示例介绍
Nov 29 #Javascript
jquery和ajax的关系详细介绍
Nov 29 #Javascript
js操作table示例(个人心得)
Nov 29 #Javascript
css配合jquery美化 select
Nov 29 #Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 #Javascript
JS实现多物体缓冲运动实例代码
Nov 29 #Javascript
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
深入php数据采集的详解
2013/06/02 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
使用python实现rsa算法代码
2016/02/17 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
物业管理求职自荐信
2013/09/25 职场文书
毕业生简单求职信
2013/11/19 职场文书
关于元旦的广播稿
2014/02/16 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
企业员工薪酬方案
2014/06/04 职场文书
中考标语大全
2014/06/05 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
公司庆典欢迎词
2015/01/26 职场文书
小学生交通安全寄语
2015/02/27 职场文书
小学教师工作总结2015
2015/04/07 职场文书
公司奖励通知
2015/04/21 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL