演示表单提交事件
<body>
<form id="f" action="#" method="post">
账号：<input type="text" id="a" /> <span id="c"></span> <br>
密码：<input type="password" id="b" /> <span id="d"></span> <br>
<input type="submit" value="登录" />
</form>
<script>
var username = document.getElementById("a");
var password = document.getElementById("b");
var tip1 = document.getElementById("c");
var tip2 = document.getElementById("d");
var f = document.getElementById("f");
//需求:输入账号之后.提示账号输入规则.
//思路给文本框加上获取焦点事件 给第一个span标签生产一个提示用于
username.onfocus = function(){
tip1.innerText = "账号的长度要在6-10之间";
tip1.style.color = "red";
}
//需求2:输入完成之后,要判断账号是否符合格式.
//思路:失去焦点之后判断.
username.onblur = function(){
var username123 = username.value;
if (username123.length >=6 && username123.length<=10) {
tip1.innerText = "√";
tip1.style.color = "green";
} else{
tip1.innerText = "X";
tip1.style.color = "red";
}
}
password.onfocus = function(){
tip2.innerText = "密码的长度要在6-10之间";
tip2.style.color = "red";
}
//需求2:输入完成之后,要判断账号是否符合格式.
//思路:失去焦点之后判断.
password.onblur = function(){
var password123 = password.value;
if (password123.length >=6 && password123.length<=10) {
tip2.innerText = "√";
tip2.style.color = "green";
} else{
tip2.innerText = "X";
tip2.style.color = "red";
}
}
//onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交 return false就表示不提交
f.onsubmit = function(){
if(tip1.innerText=="√" && tip2.innerText=="√" ){
return true;
}else{
alert("请按照要求写");
return false;
}
}
下拉菜单事件
<select id="a">
<option>中国银行</option>
<option>建设银行</option>
<option>交通银行</option>
</select>
<select id="b">
<option>中国银行卡号111</option>
<option>建设银行卡号222</option>
<option>交通银行卡号333</option>
</select>
<script>
// onchange事件: 一般只会作用于下拉框 点击下拉框且改变值.
//适用场景: 银行卡的互动. 地址栏的联动
var a = document.getElementById("a");
var b = document.getElementById("b");
//需求实现两个下拉框的联动效果.
//思路:给第一个下拉框加上一个onchange事件
//思路:获取第一个下拉框的第几个元素(下标)
//思路:将上一步的思路的下标 赋予给第二个下拉框即可
a.οnchange= function(){
// 如何获取下拉框的下标
// console.log(a.selectedIndex);
b.selectedIndex = a.selectedIndex;
}
b.οnchange= function(){
// 如何获取下拉框的下标
// console.log(a.selectedIndex);
a.selectedIndex = b.selectedIndex;
}
</script>
修改元素的属性
<script>
//html元素是有很多属性的.
//例如 id class name src href
document.getElementsByTagName("button")[0].onclick = function(){
//将xxx元素的aaa属性改成bbb
//xxx.setAttribute("aaa","bbb");
//var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值
// document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){
document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
}else{
document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
}
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
