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比较2个日期间隔的示例代码
Apr 15 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
Nest.js 授权验证的方法示例
Feb 22 Javascript
微信小程序用户授权最佳实践指南
May 08 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php之字符串变相相减的代码
2007/03/19 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python实现时间序列可视化的方法
2019/08/06 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
5.1手机促销活动
2014/01/17 职场文书
军训考核自我鉴定
2014/02/13 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
关于教师节的演讲稿
2014/09/04 职场文书