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弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
HTML上传控件取消选择
Mar 06 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 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/01/30 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
JavaScript简介
2015/02/15 Javascript
jquery获取节点名称
2015/04/26 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解python中的Turtle函数库
2018/11/19 Python
python实现名片管理系统项目
2019/04/26 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python函数的万能参数传参详解
2019/07/26 Python
基于Python解密仿射密码
2019/10/21 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
亿企通软件测试面试题
2012/04/10 面试题
大二自我鉴定范文
2013/10/05 职场文书
网络技术专业求职信
2014/05/02 职场文书
初中新生军训方案
2014/05/13 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
关于诚信的活动方案
2014/08/18 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS