前言
JavaScript被用来设计向HTML页面添加交互行为，将HTML代码和js代码进行分离，然后让他们行为交互。使用js添加页面动画效果，提供用户操作体验，主要应用有：嵌入动态文本于HTML页面；对浏览器事件做出响应、读写HTML元素、验证form表单提交数据。
一、登录时检验信息
1.使用flag进行判断：定义flag，然后将flag的内容返回给表单
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm(){
var userNameValue=document.getElementById("usernameId").value;
//定义一个flag，返回是否成功提交
var flag=true;
if(userNameValue==""){
document.getElementById("fontUsername").innerHTML="!用户不能为空";
flag=false;
}else{
document.getElementById("fontUsername").innerHTML="";
}
var userPwdValue=document.getElementById("passwordId").value;
if(userPwdValue==""){
document.getElementById("fontPassword").innerHTML="!密码不能为空";
flag=false;
}else{
document.getElementById("fontPassword").innerHTM="";
}
return flag;
}
</script>
</head>
</html>
2.定义变量用来接受id值
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm(){
//定义一个flag接受
var flag=true;
var str="";
//用户名
var userNameValue=document.getElementById("usernameId").value;
if(userNameValue==""){
document.getElementById("fontUsername").innerHTML="!用户不能为空";
flag=false;
//如果str为空，则进行赋值
if(str == ""){
str="usernameId";
}
}
//密码
var userPwdValue=document.getElementById("passwordId").value;
if(userPwdValue==""){
document.getElementById("fontPassword").innerHTML="!密码不能为空";
flag=false;
if(str == ""){
str="passwordId";
}
}
//根据str的id进行focus（）
if(str!=""){
document.getElementById(str).focus();
}
return flag;
}
</script>
</head>
</html>
3.||实现
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm(){
//定义一个flag接受
var flag=true;
var str="";
//用户名
var userNameValue=document.getElementById("usernameId").value;
if(userNameValue==""){
document.getElementById("fontUsername").innerHTML="!用户不能为空";
flag=false;
//如果str不为空则返回str，如果为空则返回后者给str
str=str || "usernameId";
}
//密码
var userPwdValue=document.getElementById("passwordId").value;
if(userPwdValue==""){
document.getElementById("fontPassword").innerHTML="!密码不能为空";
flag=false;
str=str || "passwordId";
}
if(str!=""){
document.getElementById(str).focus();
}
return flag;
}
</script>
</head>
</html>
4.三元表达式(if)
二、事件加载
1.页面加载：当body体的内容加载结束后onload开始运行
2.通用加载：根据标签的事件进行加载
3.表单加载：onsubmit
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.页面加载
window.οnlοad=function (){
//alert(1);
//2.通用加载
document.getElementById("idSubmit").οnmοuseοver=function (){
alert(2);
}
//3.表单加载
document.forms[0].οnsubmit=function (){
alert(3);
return true;
}
}
</script>
</head>
</html>三、隔行换色-鼠标移动改变颜色
1.使用CSS根据Class类改变颜色
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
//原来颜色
.myColor{
background-color: red;
}
//鼠标移上后的颜色
.myTrColor{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var allTr=document.getElementsByTagName("tr");
//遍历
for (var i = 2; i < allTr.length; i++) {
//如果是奇数行则定义ClassName
if(i%2==1){
allTr[i].className="myColor";
}
//鼠标移上：更换className
allTr[i].οnmοuseοver=function(){
bgc=this.className;
this.className="myTrColor";
}
//鼠标移走：重新复制className
allTr[i].οnmοuseοut=function(){
this.className=bgc;
}
}
}
</script>
</head>
</html>
2.使用setAttribute（属性名，属性值）
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var allTr=document.getElementsByTagName("tr");
//遍历
for (var i = 2; i < allTr.length; i++) {
//如果是奇数行则显示红色
if(i%2==1){
allTr[i].style.backgroundColor="red";
}
//鼠标移上：将原来颜色定义存储到新属性中
allTr[i].οnmοuseοver=function(){
//定义新的属性，将背景颜色赋值给新属性
this.setAttribute("abc",this.style.backgroundColor);
this.style.backgroundColor="yellow";
}
//鼠标移走
allTr[i].οnmοuseοut=function(){
this.style.backgroundColor=this.getAttribute("abc");
}
}
}
</script>
</head>
</html>效果图如下：
三、全选和反选
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//全选
function selectAll(){
var ckb=document.getElementById("ckbId");
//根据ClassName获得数组
var allselect=document.getElementsByClassName("itemSelect");
for (var i = 0; i < allselect.length; i++) {
//把全选的checked赋值给数组每个元素的checked属性
allselect[i].checked=ckb.checked;
}
}
//反选
function reverseAll(){
//根据ClassName获得数组
var allselect =document.getElementsByClassName("itemSelect");
//遍历取反操作
for (var i = 0; i < allselect.length; i++) {
allselect[i].checked=!allselect[i].checked;
}
}
</script>
</head>
</html>
四、数组
数组长度可变的；数组元素类型任意；使用for遍历
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.定义数组
var arr =new Array();
arr[0]=1;
alert(arr[0]);
//2.元素个数
var arr =new Array(5);
arr[6]="a";
alert(arr[5]);
alert(arr.length);
//3.元素类型任意
var arr =new Array("ab",123,true);
alert(arr);
</script>
</head>
</html>
五、DOM操作
1.创建元素对象
2.创建文本节点
3.设置属性
4.将文本节点追加到元素对象
5.将元素对象追加到某类型块级元素
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="idDiv"></div>
<script type="text/javascript">
//1.创建元素对象
var eleObj= document.createElement("a");
//2.创建文本节点
var textObj=document.createTextNode("你好");
//3.设置属性
eleObj.setAttribute("href","");
//4.将文本节点追加到元素对象
eleObj.appendChild(textObj);
//5.将元素对象添加到div
document.getElementById("idDiv").appendChild(eleObj);
</script>
</body>
</html>
效果图如下：
六、省市二级联动
1.定义数组，省对应的市，onchange()事件，select改变时触发
2.获得省市对象
3.在市对象中进行DOM操作遍历添加
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//省里的市
var arr0 = new Array("昌平区","朝阳区","海淀区");
var arr1 = new Array("吉林市","长春市","四平市");
var arr2 = new Array("济南市","青岛市","烟台市");
var arr3 = new Array("邯郸市","唐山市","保定市");
var arr4 = new Array("南京市","苏州市","扬州市");
//新定义数组：省对应市
var arr=new Array(arr0,arr1,arr2,arr3,arr4);
//onchange()时间对应的changeCity()函数
function changeCity(){
//获得省对象
var provinceObj=document.getElementById("provinceId");
//根据省的value获得市
var ar=arr[provinceObj.value];
//获得市对象
var cityObj=document.getElementById("cityId");
//添加内容
cityObj.innerHTML="<option value=''>----请-选-择-市----</option>";
//遍历添加
for (var i = 0; i < ar.length; i++) {
//创建元素对象
var eleObj=document.createElement("option");
//创建文本节点
var textObj=document.createTextNode(ar[i]);
//将文本节点追加到元素对象
eleObj.appendChild(textObj);
//将元素对象追加到option处
cityObj.appendChild(eleObj);
}
}
</script>
</head>
</html>
小结：js的学习开始感觉特别繁琐，总结的内容好多好复杂，后来自己认真总结一下发现其实内容也是有章可循的，不过真的感觉自己敲的还少，而且每个人都有自己的特点，大家都很努力，自己更应该加油了。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
