关于代码的执行顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于代码的执行顺序</title>
</head>
<!-- load事件什么时候发生?页面全部元素加载完毕之后才会发生 -->
<body onload="ready()">
<script type="text/javascript">
function ready(){
document.getElementById("btn").onclick = function(){
alert("hello js");
}
}
</script>
<input type="button" value="hello" id="btn" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码执行顺序</title>
</head>
<body>
<script type="text/javascript">
// 页面加载过程中,将a函数注册给了load事件
// 页面加载完毕之后,load事件发生了.此时执行回调函数a
// 回调函数a的执行过程中,把b函数注册给了id="btn"的click事件
// 当id="btn"的节点发生click事件之后,b函数被调用执行.
window.onload = function(){ //这个函数叫a
document.getElementById("btn").onclick = function(){ //这个函数叫b
alert("hello..");
}
}
</script>
<input type="button" value="hello" id="btn"/>
</body>
</html>
JS代码设置节点的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码设置节点的属性</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
var mytext = document.getElementById("mytext");
// 一个节点对象中只要有属性都可以
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext" />
<input type="button" value="将文本框改为复选框" id="btn">
</body>
</html>
JS代码捕捉回车键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var usernameElt = document.getElementById("username");
// usernameElt.onkeydown = function(event){
// //获取键值
// //对于"键盘事件对象"来说,都有keyCode属性来获取键值
// alert(event.keyCode);
// }
usernameElt.onkeydown = function(event){
if(event.keyCode === 13){
alert("正在进行验证")
}
}
}
</script>
<input type="text" id="username" />
</body>
</html>
JS的void运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的void运算符</title>
</head>
<body>
<!--
void运算符的语法:void(表达式)
运算原理:执行表达式,但不返回任何结果。
javascript:void(0)
其中javascript:的作用就是告诉浏览器后面是JS代码,不可以省略
-->
首页顶部
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript: void(0)" onclick="alert('test!')">超链接,保留原有状态</a>
<br><br><br><br><br><br>
</body>
</html>