您的位置：首页 > Web前端 > JavaScript

JavaScriptDOM实例解析

2018-01-17 09:33 281 查看

基本的事件

知识汇总

实例1：

out.js
function println(str){
document.write(str+"<br/>");
}

1.html
<html>
<head>
<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
//希望页面加载完毕后，让用户名得到焦点
window.onload = function(){
document.getElementById("username").focus();    //得到焦点
document.getElementById("username").onfocus = function(){
//得到焦点后触发的事件
this.value="";
}
document.getElementById("username").onblur = function(){
//判断当前输入域的值是不是"";
if(this.value == ""){
//如果是：value回复默认值
this.value="用户名/邮箱/手机号";
}
//不是：就不恢复
}
//键盘事件:应用，网银密码（限制输入数字）；用户登陆或注册，账号限定为字母。
/**
//检查哪里出了问题（比较两种事件）
window.onload = function(){
document.getElementById("gender").onkeypress = function(e){
alert(e.keyCode);
}
}
**/
//event是个什么东西?
function checkKeyCode(e){
alert(e.keyCode);   //键盘字母对应的ASCII码。回车：13
}

//数值变化事件
window.onload=function(){
document.getElementById("num").onchange = function(){
var amount = this.value*10;
document.getElementById("amount").value=amount;
}
}
}
</script>
</head>
<body>
<form id="f1" action="http://www.baidu.com">
username:<input type="text" id="username" name="username" value="用户名/邮箱/手机号" /><br/>
password:<input type="password" id="password" name="password" /><br/>
<input type="button" value="提交" onclick="toSubmit()" />
</form>
gender:<input type="text" id="gender" name="gender" onkeypress="checkKeyCode(event)" />
<hr/>
<table border="1" width="438">
<tr>
<td>书名</td>
<td>作者</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>葵花宝典</td>
<td>牛骞</td>
<td>10</td>
<td>
<input type="text" id="num" name="num" value="3" size="2"/>
</td>
<td>
<input type="text" id="amount" name="amount" value="30" size="2" />
</td>
</tr>
</table>
</body>
</html>

实例2：二级联动

<html>
<head>
<title>二级联动:数组</title>
<script type="text/javascript">
var citys = initData(); //初始化数据
window.onload = function(){
document.getElementById("province").onchange = function(){
//根据省份的变化，改变城市的列表值
var provinceValue = this.value;
//取citys数组中对应索引位置上的元素
var cs = citys[provinceValue];

在添加之前：初始化为请求选择
document.getElementById("city").options.length = 0;
var pleaseSelectOp = new Option("---请选择--","");
document.getElementById("city").add(pleaseSelectOp);

//给第二个city下拉选择框，添加option元素：HTML DOM编程
for(var i=0;i<cs.length;i++){
//一个参数为标签的显示内容，一个参数为属性value的值，
var op = new Option(cs[i],cs[i]);
document.getElementById("city").add(op);
}
}
}
}
function initData(){
var citys = new Array();
citys[1] = new Array("朝阳","海淀","昌平");
citys[2] = new Array("广州","深圳","东莞");
citys[3] = new Array("武汉","襄樊","荆州");
return citys;
}
</script>
</head>
<body>
<form id="f1" action="">
省份：
<select id="province" name="province">
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="2">山东</option>
<option value="3">湖北</option>
</select>
城市：
<select id="city" name="city">
<option value="">---请选择---</option>
</select>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航