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 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
vue组件与复用详解
Apr 08 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
对vuex中store和$store的区别说明
Jul 24 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文档更新介绍
2011/07/22 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
Javascript之String对象详解
2016/06/08 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
vue实现购物车案例
2020/05/30 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
校企合作协议书
2014/04/16 职场文书
蜗居观后感
2015/06/11 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书