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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
jquery构造器的实现代码小结
May 16 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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查看当前变量类型的方法
2015/07/31 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
javascript三元运算符用法实例
2015/04/16 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python配置文件写入过程详解
2019/10/19 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
教师自我评价范例
2013/09/24 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
主持人演讲稿
2014/05/13 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
食品安全责任书范本
2015/05/09 职场文书
网吧温馨提示
2015/07/17 职场文书
Golang的继承模拟实例
2021/06/30 Golang
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA