吴裕雄--天生自然 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> ...
随机推荐
- ubuntu 中加速pip指令下载插件的速度
在使用pip下载时很多时候下载速度特别慢,时不时就会发生timeout. 这是因为安装源与本机之间网络不畅导致,其实可以自己指定pip的下载来源,就像指定ubuntu更新源那样. 接下来谈谈步骤: 1 ...
- POJ 1256：Anagram
Anagram Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18393 Accepted: 7484 Description ...
- /和//的区别(python)
/ 除 得到的是浮点数,结果是大数的时候会使用科学计数法 但是 / 会在遇到大数时候运算不准确 因为将两个int相除会产生一个浮点数,并且除法的确切结果不能精确地表示为float. 精确结果必须四舍 ...
- 1-Java类结构和main函数
目录 Java类 main函数 1.Java类 - 类是java中最基础的逻辑单位 java中所有的内容都要放在类的范围中 - 类的构成 成员变量/属性 成员方法/函数 - java文件必须以.jav ...
- 053-switch分支结构
<?php $week=3; //定义并初始化星期变量 switch($week){ case 0: //变量为0的情况 echo '星期日.'; break; case 1: //变量为1的情 ...
- Flink 操作链与任务槽
Operator Chains(操作链) Flink出于分布式执行的目的,将operator的subtask链接在一起形成task(类似spark中的管道). 每个task在一个线程中执行. 将ope ...
- 逆向-PE导入表
导入表 动态链接库需要导入表 结构 typedef struct _IMAGE_IMPORT_DESCRIPTOR { union { DWORD Characteristics; // 0 for ...
- ACM-售货员难题
题目描述:售货员的难题 某乡有n个村庄(1< n < 20),有一个售货员,他要到各个村庄去售货,各村庄之间的路程s(0 < s < 1000)是已知的,且A村到B村与B村到 ...
- ssh-keygen 签名ca证书
介绍 ssh-keygen命令用于为"ssh" 生成,管理和转换认证秘钥,支持RSA和DSA两种认证秘钥 生成秘钥对 ssh-keygen -b 2048 -C milo -f 2 ...
- P3045 [USACO12FEB]牛券Cow Coupons
P3045 [USACO12FEB]牛券Cow Coupons 贪心题.先选中 \(c_i\) 最小的 \(k\) 头牛,如果这样就超过 \(m\) ,直接退出,输出答案.否则考虑把后面的牛依次加入, ...