吴裕雄--天生自然 JAVASCRIPT开发学习： DOM 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body> <h1 onclick="changetext(this)">点击文本!</h1> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
</head>
<body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()"> <script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function lighton(){
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head> <body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function mymessage(){
alert("消息在 onload 事件触发后弹出。");
}
</script>
</head> <body onload="mymessage()"></body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
</head>
<body> 输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1> </body>
</html>
吴裕雄--天生自然 JAVASCRIPT开发学习： DOM 事件的更多相关文章
- 吴裕雄--天生自然 JAVASCRIPT开发学习：事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：HTML DOM 节点列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：HTML DOM 集合(Collection)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：HTML DOM 元素 (节点)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： HTML DOM - 改变CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM - 改变 HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 如何让你的学术Essay写作看起来更高级？
学术风格不仅是使用某些特定的词汇或者特定的表达方式.学术风格还会涉及到你的思考方式.推理方式以及你如何利用某个领域内已知的发现.学术风格是英国大学学习的核心.所以在平时的学习中,英国环球论文小编建议大 ...
- UVA 1601 双向BFS
但是我们还不是很清楚每一次的状态怎么储存?我们可以用一个结构体,将每次的位置存起来,但是这个程序中用了一个更好的储存方法:我们知道最大的格数是16*16个,也就是256个,那么我们转换为二进制表示就是 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-user
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- POJ 3614：Sunscreen 贪心+优先队列
Sunscreen Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5378 Accepted: 1864 Descrip ...
- SQLAlchemy建立数据库模型之间的关系
一对多关系 多对一关系 多对多关系 一对一关系 一对多关系(一个作者,多篇文章) ## 一对多关系,单作者-多文章,外键不可少 ## 外键(ForeignKey)总在多的那边定义,关系(relatio ...
- PlayJava SpringMVC与Struts2杂谈
一 先做一个简单对比: 1. SpringMVC的入口是Servlet,核心是DispatcherServlet,Struts2是Filter,核心是FilterDispatcher 2. Sprin ...
- PHP-文件目录操作
使用递归遍历指定文件目录及其子目录下的所有文件 思路: 1.打开目录: 2.遍历目录,判断是否还是目录.是目录则返回第1步,不是目录进入第三步: 3.把文件名显示出来 使用到的文件目录操作函数: ...
- HDU_4939 stupid tower defense 2014多校7 多变量型DP
意思是有个塔防游戏,有三种塔,红塔在怪物经过的时候每秒会产生攻击力大小的伤害,绿塔对怪物经过以及经过之后每秒产生攻击力大小的伤害,还有种蓝塔,对怪物进行减速,即怪物从此之后经过一个单位都会减慢c秒 最 ...
- hdu1222Wolf and Rabbit （公约数的巧题）
一个很坑的问题,想到点子上很好解决,想不到的话头破也不一定能做出来. There is a hill with n holes around. The holes are signed from 0 ...
- 吴裕雄--天生自然C++语言学习笔记：C++ 引用
引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量 C++ 引用 vs 指针 引用很容易与指针混淆,它们之间有三个主要的 ...