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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
vue递归获取父元素的元素实例
Aug 07 Javascript
Vue 实现拨打电话操作
Nov 16 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/04/13 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python实现的归并排序算法示例
2017/11/21 Python
python之消除前缀重命名的方法
2018/10/21 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
python collections模块的使用
2020/10/16 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
写给老师的表扬信
2014/01/21 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
烟台的海导游词
2015/02/02 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
行为习惯主题班会
2015/08/14 职场文书