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 prototype截取字符串函数
Apr 01 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vue cli 全面解析
Feb 28 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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
PHP4中实现动态代理
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
删除重复数据的算法
2006/11/23 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
python下10个简单实例代码
2017/11/15 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python实现Zabbix-API监控
2018/09/17 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
招标授权委托书样本
2014/09/23 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
五年级学生评语大全
2014/12/26 职场文书
欢迎词怎么写
2015/01/23 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
MySQL 数据 data 基本操作
2022/05/04 MySQL