W6-Javascript基础2-事件、表单
1.JavaScript HTML DOM 事件
onclick事件
对点击事件做出反应
当我们对元素进行点击想要引发相应的事件时，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
下面用一个实例展示以下onclick事件的简单应用吧！
- 事件1：单击文本并在下方显示相应文字。
- 事件2：单击文本并在下方显示相应文字。
- 事件3：输入相应文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function changetext1(id){
//该方法会在单击后的文字下方显示以下指定文字
id.innerHTML="hi";
}
function changetext2(id){
id.innerHTML="是啊，好久不见！";
}
function changetext3(id) {
// 用x获取 id="in" 的值，即获取输入的值
var x;
x = document.getElementById("in").value;
id.innerHTML = x;
}
</script>
</head>
<body>
//h1标签调用changetext1方法
<h1 onclick="changetext1(pp1)">你好啊！</h1>
//为这个p标签起名，被h1中的方法识别并进行操作
<p id="pp1"></p>
<h1 onclick="changetext2(pp2)">好久不见！</h1>
<p id="pp2"></p>
<input id="in">
<h1 onclick="changetext3(pp3)">吃了么，您内！</h1>
<p id="pp3"></p>
</body>
</html>
运行结果展示：
未单击时
单击每行文字/输入文字之后
当然我们还可以关联其他的事件，相互叠加使用。
这种单击并出现文字的事件还可以将文字变化的对象文字变换为自身，还可以不局限于单击的目标是文字，图片按钮等都可以哦。
2.JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必须填写");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
3.列表全选、列表左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #00aa00;
width: 200px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("v1");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("v1");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<h1>请选择你的菜单！</h1>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>食物</th>
<th>原味</th>
<th>麻辣</th>
<th>椒盐</th>
<th>孜然</th>
</tr>
<tr>
<td><input type="checkbox" name="v1" /></td>
<td>羊肉串</td>
<td><input type="checkbox" name="v1" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
</tr>
<tr>
<td><input type="checkbox" name="v1"/></td>
<td>鸡皮串</td>
<td><input type="checkbox" name="v1" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
</tr>
<tr>
<td><input type="checkbox" name="v1"/></td>
<td>金针菇串</td>
<td><input type="checkbox" name="v1" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
</tr>
<tr>
<td><input type="checkbox" name="v1"/></td>
<td>鹌鹑蛋串</td>
<td><input type="checkbox" name="v1" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
<td><input type="checkbox" name="personid" /></td>
</tr>
</table>
<input type="button" value="反选" onclick="reverse()"/>
</body>
</html>
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
