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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vue中props的详解
May 16 Javascript
详解小程序云开发数据库
May 20 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
Move.js入门
2017/02/08 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python内存管理机制原理详解
2019/08/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python实现自动清理重复文件
2020/08/24 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
基层工作经历证明
2014/01/13 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
干部对照检查材料范文
2014/08/26 职场文书
高中学校对照检查材料
2014/08/31 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript