Web04（隔行换色案例、全选全不选反选案例、省市联动案例）

最新推荐文章于 2023-01-14 23:14:10 发布

么古

最新推荐文章于 2023-01-14 23:14:10 发布

阅读量278

点赞数

分类专栏： Web前端文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44090966/article/details/90049023

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Part01:隔行换色案例

1、JS中的一些事件：

onload:页面加载完毕事件
- 格式：
  - window.onload = function( ){ };
  - <body onload = “init( )”>
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件

2、绑定javascript事件:

第一种方式：
- <input type=“text” 事件名=“函数1();函数2()”> //这里会依次触发函数1,函数2
第二种方式：
- var input对象 = document.getElementById(“对应的id”);
- input对象.事件名 = 函数1;
- input对象.事件名 = 函数2;
- （只会触发函数2 ）

3、JS中的this关键字：

表示当前元素
谁调用的函数，在函数中this就代表谁

4、案例实现：

要求：把表格的单数行设为白色，双数行设为蓝色，鼠标经过时为绿色，鼠标移出变回原来的颜色；
效果图：

//css代码
<style type="text/css">
          .white{
              background-color: white;
          }
          .blue{
              background-color: blue;
          }
          .green{
              background-color: green;
          }
</style>

//JS代码
<script type="text/javascript">
    function start() {
        //根据标签名获取所有tr标签
        var trs = document.getElementsByTagName("tr");
        //遍历所有行
        for (var i =1;i< trs.length;i++){
            var tr = trs[i];
            //绑定鼠标移入事件
            tr.onmouseover = over;
            //绑定鼠标移出事件
            tr.onmouseout = out;
            //单数行设置为白色,双数行设置为蓝色
            if(i%2 == 1){
                tr.className = "white";
            }else {
                tr.className = "blue";
            }
        }
        var oldclassName;
        function over() {
            //保存原来的className
            oldclassName = this.className;
            //this代表鼠标移入的那一行，设为绿色
            this.className = "green";
        }
        function out() {
            //当鼠标移出时，设置为原来的颜色
            this.className = oldclassName;
        }
    }
</script>

Part02:全选全不选反选案例

要求：点击全选按钮，所有的checkbox都勾上，点击全不选按钮，所有的checkbox都取消勾选，点击反选按钮，选上的checkbox取消勾选，没选的选上；
效果图：

注意⚠️：在HTML设置checkbox的check属性的值为“check”，“true”或者“false”都为选中状态，在JS中设置check属性的值为true或“check“为选中状态，值为false为未选中状态；

//JS代码
<script type="text/javascript">
          //取出class为itemSelect的checkbox
          var chekboxs = document.getElementsByClassName("itemSelect");
          function choseall() {
              //全选
              for(var i = 0;i < chekboxs.length;i++){
                 var checkbox =  chekboxs[i];
                 checkbox.checked = true;
              }
          }
          function chosenone() {
              //全不选
              for (var i = 0; i < chekboxs.length;i++){
                  var checkbox = chekboxs[i];
                  checkbox.checked = false;
              }
          }
          function fanxuan() {
              //反选
              for (var i = 0; i < chekboxs.length;i++){
                  var checkbox = chekboxs[i];
                  checkbox.checked = !checkbox.checked;
              }
          }
</script>

Part03:省市联动案例

1、JS中的数组（Array）：

创建语法：
- new Array；
- new Array(size);//size为数值元素个数，数组成员默认值为undefined;
- new Array(element0,element1,…,elementn);//参数列表，为数组初始化数据
数组中的每一个成员没有类型限制，即可以存放任意类型
数组的长度可以自动修改
数组有一维和二维数组，但是定义数组的时候可以不明确，给元素数组赋值的时候可以确定是几维数组

2、元素操作：

document.createElement(“标签名”);//创建元素节点
document.createTextNode(“文本内容“);//创建文本节点
setAttribute(name,value);//给元素设置属性名和属性值
appendChild(子元素);//向标签末尾添加新的子节点；
insertBefore(子元素，兄弟元素);//在兄弟元素前面添加元素
insertAfter(子元素，兄弟元素);//在兄弟元素后面添加元素

3、select下拉框值改变事件（onchange)

4、案例实现：

需求：在省的下拉选择框中选择了省之后，在市的下拉选择框中出现对应的市

在这里插入图片描述

//JS代码
<script>
   // 定义二维数组,存储城市信息
   var cities = new Array(5);
   cities[0] = new Array("市辖区");
   cities[1] = new Array("长春市","吉林市","松原市","延边市");
   cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
   cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
   cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
  //页面加载完毕之后执行
   window.onload = function () {
           //获取select下拉框，绑定onchange事件
           var provinceSelect = document.getElementById("province");
           provinceSelect.onchange = change;
       };
       function change() {
           //每次选择前先清空市的select中的内容
           document.getElementById("city").innerHTML = "<option value=\"\">----请-选-择-市----</option>";

           //获取选中的value值
           var value = this.value;
           //获取对应数组中的元素
           var cs = cities[value];
           //遍历cs数组
           for (var i = 0; i < cs.length; i++){
               //取出城市名称
               var city = cs[i];
               //创建一个option
               var cityOption =  document.createElement("option");
               //创建城市名的文本节点
               var cityname = document.createTextNode(city);
               //把文本节点内容添加到option中
               cityOption.appendChild(cityname);
               //把创建的option添加到城市的select中
               var citySelect = document.getElementById("city");
               citySelect.appendChild(cityOption);
           }
       }
</script>