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鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python实现统计单词出现的个数
2015/05/28 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
什么是接口(Interface)?
2013/02/01 面试题
数据库什么时候应该被重组
2012/11/02 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
一份创业计划书范文
2014/02/08 职场文书
新学期开学演讲稿
2014/05/24 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
安徽导游词
2015/02/12 职场文书
大学生党课感想
2015/08/11 职场文书