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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js实现拖拽功能
Mar 01 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
ES6 Object属性新的写法实例小结
Jun 25 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 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
第五节 克隆 [5]
2006/10/09 PHP
10 个经典PHP函数
2013/10/17 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php获取excel文件数据
2017/04/21 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
tensorflow输出权重值和偏差的方法
2018/02/10 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Linux Interview Questions For software testers
2013/05/17 面试题
护理自荐信范文
2013/10/05 职场文书
高中毕业生自我鉴定
2013/11/03 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
主持稿开场白
2015/06/01 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python