事件
*onClick 单击
*onDblClick 双击
*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>
<script type="text/javascript">
function doSomething() {
//step 1获取输入内容
var input = document.getElementById("input").value;
var div = document.getElementById("output");
// （1）当输入的内容是red，blue或black时，对应更改div中的字体颜色。
if (input == "red" || input == "blue" || input == "black") {
div.style.color = input;
} else {
// （2）当输入的内容是算数表达式时(如：2+3*5)，在div中显示计算结果。
// （2）当输入的内容要执行的js语句时，在div中显示计算结果。
try {
var result = eval(input);
if(result!=undefined){
div.innerHTML = result;
}
} catch (e) {
// （3）当输入的内容是文字时，在div中显示这些文字。
div.innerHTML=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>
<script type="text/javascript">
function sum(){
//step 1做一个计数器，用来累加的
var sum=0.00;
//获取哪些商品被选中
//step 2 获取name="chkone的" checkbox集合
var chkones=document.getElementsByName("chkone");
var each_moneys=document.getElementsByName("each_money");
//遍历集合
for (var i = 0; i < chkones.length; i++) {
var obj=chkones[i];
//step 3 checked==true表示被选中
if(obj.checked==true){
//step 4被选中的商量，需要把价格进行累计
var money=Number(each_moneys[i].value);//
sum+=money;
}
}
sum = sum.toFixed(2); //保留几个小数位
//把总钱数显示到total【0】
document.getElementsByName("total")[0].value=sum;
}
</script>
全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//让checkones的选中状态与checkall保持一致
function selectAll(){
//step1获取checkall的选中状态
var checkall=document.getElementById("chkall");
var flag=checkall.checked;//true/false
//step2 让checkone状态与上述状态一致
var checkones=document.getElementsByName("chkone");//集合
//遍历所有的checkone,使他的状态与上述状态一样
for(var i=0;i<checkones.length;i++){
checkones[i].checked=flag;
}
}
function chkOne(){
var checkall=document.getElementById("chkall");
var checkones=document.getElementsByName("chkone");
var flag=true;
//遍历所有的checkone,如果checkone有一个没有选中,flag=false;
for(var i=0;i<checkones.length;i++){
if(!checkones[i].checked){
flag=false;
}
}
checkall.checked=flag;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="chkall" id="chkall" onclick="selectAll()"/>全选
<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()"/></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()"/></td>
<td width="98" height="25" valign="middle">用户2</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
</form>
</body>
</html>
网页n秒后自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function go() {
window.location.href = "http://localhost:8080/TestDemo/index.jsp";
}
window.onload = function() {
var num=document.getElementById("num").value;
setTimeout(go, num*1000);
};
</script>
</head>
<body>
几秒后自动跳转<input type="text" id="num" value="8"/>
</body>
</html>
制作如下效果
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.nav {
width: 800px;
margin: 0 auto;
}
ul {
list-style: none;
}
.li0 {
float: left;
position: relative;
}
.nav a {
display: block;
text-decoration: none;
width: 100px;
height: 45px;
line-height: 45px;
background-color: #999;
color: #111;
text-align: center;
}
.nav1 {
position: absolute;
left: 0;
display: none;
}
.li0:hover .nav1 {
display: block;
background-color: #bbb;
}
/* a标签变色 */
.nav a:hover {
color: #fff;
background-color: #f00;
}
</style>
</head>
<body>
<ul class="nav">
<li class="li0"><a href="">首页</a></li>
<li class="li0"><a href="">前端</a>
<ul class="nav1">
<li><a href="">前端</a></li>
<li><a href="">前端</a></li>
<li><a href="">前端</a></li>
</ul>
</li>
<li class="li0"><a href="">后端</a>
<ul class="nav1">
<li><a href="">后端</a></li>
<li><a href="">后端</a></li>
<li><a href="">后端</a></li>
</ul>
</li>
<li class="li0"><a href="">数据库</a>
<ul class="nav1">
<li><a href="">数据库</a></li>
<li><a href="">数据库</a></li>
<li><a href="">数据库</a></li>
</ul>
</li>
<li class="li0"><a href="">代码实战</a>
<ul class="nav1">
<li><a href="">代码1</a></li>
<li><a href="">代码2</a></li>
<li><a href="">代码3</a></li>
</ul>
</li>
<li class="li0"><a href="">读书笔记</a>
<ul class="nav1">
<li><a href="">笔记1</a></li>
<li><a href="">笔记2</a></li>
<li><a href="">笔记3</a></li>
</ul>
</li>
<li class="li0"><a href="">联系我</a>
<ul class="nav1">
<li><a href="">我的邮箱</a></li>
<li><a href="">我的QQ</a></li>
<li><a href="">我的微信</a></li>
</ul>
</li>
</ul>
</body>
</html>
