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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js控制input框只读实现示例
2014/01/20 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
Sanic框架蓝图用法实例分析
2018/07/17 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
建议书怎么写
2014/03/12 职场文书
无传销社区工作方案
2014/05/13 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书