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统计用户下载网页所需时间的脚本
Oct 15 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
浅谈js中的闭包
Mar 16 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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接收shell返回的结果中文乱码问题
2014/01/23 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
面料业务员岗位职责
2013/12/26 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript