事件
onClick 单击
onDbClick 双击
onchange 发生改变时
onMouseMove 鼠标移动
onMouseOver 鼠标悬浮在对象上时
onMouseOut 鼠标离开时
onMouseDown 鼠标按下
onKeyPress 键盘上的某个键被按下并且释放时触发
onKeyDown 键盘按下
onKeyUp 键盘放开
onBlur 失去焦点
onFocus 得到焦点
按钮 事件
button onClick onBlur onFocus
checkbox onClick onBlur onFocus
File onClick onBlur onFocus
password onBlur onFocus onSelect
radio onClick onBlur onFocus
reset onReset
select onFocus onBlur onChange
submit onSubmit
text onClick onBlur onFocus onChange
textarea onClick onBlur onFocus onChange
get/post区别
http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
使用规则：
访问外网可以用get 比如百度
访问内网用post
action
action指定请求提交给谁 支持内网和外网两种方式
作业：
1）动态创建多行，并奇偶变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr=new Array("#80cc80","#c0aac0")
function create() {
for (i=0; i < 10; i++) {
tmp=document.all.mytable.insertRow().insertCell()
tmp.innerText="line"+i
tmp.style.background=arr[i%arr.length]
}
}
</script>
</head>
<body bgcolor="#ffffff" onload="create()">
<TABLE id=mytable></TABLE>
</body>
</html>
2）请使用Javascript代码补全doSomething ()方法，实现文本框输入内容，div根据输入内容调整的功能。
要求：
（1）当输入的内容是red，blue或black时，对应更改div中的字体颜色。
（2）当输入的内容是算数表达式时(如：2+3*5)，在div中显示计算结果。
（3）当输入的内容是文字时，在div中显示这些文字。
<input type="text" id="input">
<input type="button" value="输入" onClick="doSomething();">
<div id="output">welcome</div>
参考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function doSomething(){
var input = document.getElementById("input").value;
if(input == "red" || input == "blue" || input == "black"){
document.getElementById("output").style.color=input;
}
else{
try{
var s = eval(input);
document.getElementById("output").innerText = s;
}catch(e){
document.getElementById("output").innerText = input;
}
}
}
</script>
</head>
<body>
<input type="text" id="input">
<input type="button" value="输入" onClick="doSomething();">
<div id="output">welcome</div>
</body>
学生练习
1）计算购物车里的钱数
<form>
<table border="1" width="400" cellpadding="0" cellspacing="0">
<tr>
<td width="50">金额</td>
<td></td>
<td>是否求和</td>
</tr>
<tr>
<td width="50"><input type="text" name="each_money"/></td>
<td></td>
<td><input type="checkbox" name="chkone"/></td>
</tr>
<tr>
<td width="50"><input type="text" name="each_money"/></td>
<td></td>
<td><input type="checkbox" name="chkone"/></td>
</tr>
<tr>
<td width="50"><input type="text" name="total" readonly="readonly" /></td>
<td>金额合计</td>
<td><input type="button" onclick="sum()" value="求和"/></td>
</tr>
</table>
</form>
全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function selectAll(){
var chkall=document.getElementById("chkall");
if(chkall.checked){
var chkones=document.getElementsByName("chkone");
for (var i = 0; i < chkones.length; i++) {
chkones[i].checked=true;
}
}else{
var chkones=document.getElementsByName("chkone");
for (var i = 0; i < chkones.length; i++) {
chkones[i].checked=false;
}
}
}
function chkOne(){
var count=0;
var chkall=document.getElementById("chkall");
var chkones=document.getElementsByName("chkone");
var len=chkones.length;
for (var i = 0; i <len; i++) {
if(chkones[i].checked){
count++;
}
}
if(count==len){
chkall.checked=true;
}else{
chkall.checked=false;
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="chkall" id="chkall" onclick="selectAll(this)"/>全选
<table width="100%" border="1" align="center" bordercolor="#dadada">
<tr align="center">
<td width="44" height="25" valign="middle">选择</td>
<td width="98" height="25" valign="middle">姓名</td>
<td width="132" height="25" valign="middle">证件类型</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle"><input type="checkbox" name="chkone" value="1" onclick="chkOne(this)"/></td>
<td width="98" height="25" valign="middle">用户1</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle"><input type="checkbox" name="chkone" value="2" onclick="chkOne(this)"/></td>
<td width="98" height="25" valign="middle">用户2</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
</form>
</body>
</html>
作者：wqjcarnation
链接：https://www.jianshu.com/p/58b37fd25345
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论