JS数组

声明与创建数组

1
2
3
4
5
6
7
8
9
10
11
12
//声明或创建一个不指定长度的数组
var arrayObj=new Array();

//声明或创建一个数组并指定长度的数组
var arrayObj=new Array(5);

//声明或创建一个带有默认值的数组
var arrayObj=new Array(1,11,22,"zz","123a","q");

//创建一个数组并赋值的简写，又称为隐式创建数据
var arrayObj1=[1,11,22,"zz","123a","q"];

###输出数组

1
2
3
4
5
6
7
8
//数组赋值，字符下标，数组遍历 
console.log(arrayObj[1]);//输出指定位置
for(i=0;i<arrayObj1.length;i++){//循环遍历输出数组
    console.log(arrayObj1[i]);
}
for(var o in arrayObj1){//便捷循环遍历数组
    console.log(arrayObj1[o]);
}

对表单元素进行设置

JS对表单元素进行设置

什么是表单

概述：表单的主要作用是在客户端接受用户的信息，然后将数据递交给后台的程序来操控这些数据

JS对表单需要做什么

设置或获取各种表单元素的值

JS获取表单元素

根据ID来获取元素并操作

作用：使用getElementByld()方法可以获取带ID的元素对象

1
2
document.getElementById("userName")//获取id名为userName的元素对象
document.getElementById("userName").value="999";//按元素的id(指定位置)来给value的赋值为999

举例：

1
2
3
4
5
6
7
<body>
<script type="text/javascript" src="js1.js"></script>
<form  onload="show1()"> 
    用户名<input type="text" id = "userName" name="userName" value="123"/><br>
    <input type="button" id="btn" onclick="show1()" value="btn"/><!--onclick连接js中的方法，onclick页面单击事件，点击后才执行show1方法-->
</form>
</body>
1
2
3
4
5
function show1(){
   document.getElementById("userName").value="999";//按元素的id来给value的赋予新值
   var user=document.getElementById("userName")//获取id=userName的元素对象
   console.dir(user);//打印我们获取的元素对象，更好的查看对象里面的属性和方法
}

根据name来获取元素并操作

作用：document.getElementsByName方法可返回带有指定名称的对象的集合，此方法是返回元素的数组，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字

1
var xb=document.getElementsByName("xb");//将name="xb"的元素获取==》value元素的数组

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础</title>
</head>
<body>
<script type="text/javascript" src="js1.js"></script>
<form  onload="show1()"><!--onload页面加载事件，先加载onload中的方法，再执行body-->
    用户名<input type="text" id = "userName" name="userName" value="123"/><br>
    <input type="radio" name="xb" value="1">男
    <input type="radio" name="xb" value="0">女</br>
    <input type="button" id="btn" onclick="show1()" value="btn"/><!--onclick连接js中的方法，onclick页面单击事件-->
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function show1(){
   document.getElementById("userName").value="999";//按元素的id来给value的值
   var user=document.getElementById("userName")
    //初始化
    alert("123");
    var xb=document.getElementsByName("xb");//获取名字为xb的元素组成数组，数组的内容是value的值，xb[0]=name="xb",value=1 	xb[1]=name="xb",value=0;
    if(xb[0].checked){//check判断第一个按钮是否被选中,选中为ture，输出xb[0]
      xbTest=xb[0].value;//输出数组中第一个值中的value值
    }else{
       xbTest=xb[1].value;//判断第二个按钮是否被选中，选中输出xb[1]
    }
alert(xbTest);
console.log(xb[1]);
}

根据img来获取元素并操作

作用：对于一个img图片元素来说，我们可以操作他的src、title属性等；或者对于input元素来说，我们可以操作他的disabled、checked、selected属性

1
2
3
<img id="logoImg" src="1.jpeg" alt="">
    
var logoImg= document.getElementById("logoImg");//获取图片元素

举例：

1
2
3
4
5
6
7
<body onload="initLogo()"><!--onload页面加载事件，先加载onload中的方法，再执行body，初始化-->
<form >
    <!--定义图片-->
    <img id="logoImg" src="1.jpeg" alt=""><!--定义了默认的图片-->
    <select name="" id="logo" onchange="selectLogo()"></select>
</form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
//初始化id=logo的列表框
function initLogo(){
   var logo=document.getElementById("logo");//获取元素，达到对id=logo的元素进行操作
   for(i=1;i<=15;i++){
      logo.options.add(new Option(i,i))//select中的增加option值（表单中的值），从1到15增加到select表单中的option值增加value值，value的名字也是为1-15
   }
}
function selectLogo(){
   var logo=document.getElementById("logo");
   var n = logo.value;//根据value的值，这里的value代表的值为1-15
   var logoImg= document.getElementById("logoImg");//获取到图片的那个对象元素
   logoImg.src=n+".jpeg"//操作图片的src，就是图片的连接，n可以操作，随n的改变而改变图片
}

案例:列表框实现年月日三级联动

每个月的天数不一样，闰年的二月的天数是不一样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础</title>
    <script type="text/javascript" src="js1.js" ></script>
</head>
<body onload="ymd(),initSelect(),initLogo()"><!--onload页面加载事件，先加载onload中的方法，再执行body-->
<form >
    <select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
    <select name="mm" id="mm" onchange="selectYmd()"></select>月
    <select name="dd" id="dd"></select>日
    <input type="button" value="删除列表框条目" onclick="deleteSelect()"><br>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function ymd(){
   //获取id=yyyy,mm,dd的控件
   var yyyy=document.getElementById("yyyy");//获取id名字为yyyy的元素对象
   var mm=document.getElementById("mm");//获取id名字为mm的元素对象
   var dd=document.getElementById("dd");//获取id名字为dd的元素对象
   var date=new Date();//创建日期函数
   var year=parseInt(date.getFullYear());//使用日期函数，获取到年份
   initSelect(yyyy,1999,year);
   initSelect(mm,1,12);
   initSelect(dd,1,31);
   //获取到列表框的长度
   var n=yyyy.length;
   //列表框选中某一个条目
   yyyy.selectedIndex=Math.round(n/2);
   //将某个列表框的条目数设置为0，效果是删除
   //dd.options.length=0;
   
}
//给列表框赋值，传递三个参数：表单元素，开始值，结束值
function initSelect(obj,start,end){
   for(var i=start;i<=end;i++){
      obj.options.add(new Option(i,i));//给传参的值的这个表单元素中添加条目，给条目中增加值，第一个参数是显示的名字，第二个参数是value的值
   }
}  

//定义不同的月份会有不同的天数
function selectYmd(){
   var mm = document.getElementById("mm");//获取id名字为mm元素对象
   var dd = document.getElementById("dd");//获取id名字为dd元素对象
   var yyyy=document.getElementById("yyyy")//获取id名字为yyyy的元素对象
   var m = parseInt(mm.value);//取整mm元素对象的value值
   var dayEnd;
   if(m==4 || m==6 || m==9 || m==11){//小月的天数
      dayEnd=30;
   }else if(m==2){
      dayEnd=28;
      var y=parseInt(yyyy.value);
      if((y % 4==0 && y % 100 !=0) || y % 400 ==0){
         dayEnd=29;
      }
   }else{
      dayEnd=31;
   }
   dd.options.length=0;//删除原来的dd列表框中的所有内容
   initSelect(dd,1,dayEnd);//重新调用initSelect方法，重新添加，让天数变得合理
}

//删除列表框的某一个条目。即：按索引号删除
function deleteSelect(){
   var dd = document.getElementById("dd");
   //dd.option.remove(1);
   for(i=dd.length;i>=0;i--){//循环删除dd中的所有内容
      dd.options.remove(0);//每一次都循环删除第一个dd中的数字，来到达删除dd中所有的值
   }
}

image-20220408205544640

复选框的全选与不选案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="jstest1.js" ></script>
    <form action="">
        <input type="checkbox" name="interest" value="1"><label for="">游泳</label>
        <input type="checkbox" name="interest" value="2"><label for="">爬山</label>
        <input type="checkbox" name="interest" value="3"><label for="">看书</label>
        <input type="checkbox" name="interest" value="4"><label for="">听歌</label>
        <input type="button" id="btn1" value="全选" onclick="checkInterest()"><!--实现全选与全不选的方法-->
        <input type="button" value="反选" onclick="checkInterest1()"><!--实现反选的方法-->
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var flag=true;
function checkInterest(){
   var interest = document.getElementsByName("interest");
   for(i=0;i<interest.length;i++){
       interest[i].checked=flag;//check判断按钮是否被选中,选中为ture,反过来说当checked的值都为true的时候，代表所有的值都选中
   }
   if(flag){
       document.getElementById('btn1').value="全选";
   }else{
       document.getElementById('btn1').value="全不选";
   }
    //当flag=true的时候，运行结束执行取反，执行全不选，周而复始
   flag=!flag;//取反，被称为开关变量
}

//反选的方法
function checkInterest1(){
    var interest = document.getElementsByName("interest");
    for(i=0;i<interest.length;i++){
        interest[i].checked=!interest[i].checked;//取反赋给interest[i]的值
        console.log(interest[i].value);
    }
}

全选当点击一次全选的时候，会更改value的值变为全不选，然后点击全部都不选择

image-20220408211008637

当选听歌的时候，点击反选

image-20220408221504921

image-20220408211854801