2022-7-12 第八小组 顾宇佳 （Js）

一、循环 （掌握一般）

1.for循环

for(let i = 0;i < 10;i++){
        //     // 循环体
          console.log(i);

for循环的特殊写法

       
       1.for(;;){}
       2. for(let i = 0;;){}
       3.for(let i = 0;;i++){ }
       4.for(let i = 0; i < 10;){}
        

练习1

判断一个数在数组中是否存在，如果存在，返回它的下标，如果不存在，返回-1。

let arr = [10,5,9,7,-5,100,257];
        
        function exists(num,array){
            let index = -1;
            for(let i = 0;i < array.length;i++){
                if(array[i] == num){
                    index = i;
                }
            }
            return index;
        }

        console.log(exists(100,arr));
当变量的作用域出现了重叠，不要出现重名的情况，尤其是全局和局部，变量最好不好重名

练习2

   找出数组中的最大值，可以用三元，可以用if...else..

 let arr = [10,5,9,7,-5,100,257];
let max = arr[0];
         for(let i = 0;i < arr.length;i++){
            
        
           if(max < arr[i]){
               max = arr[i];
            }
        }
      console.log("最大值为：" + max);

2.for  in循环

let arr = [1,2,3,4,5];
        // for in语句，能做得事情较少，只能做遍历操作
        // 可以理解为a是arr数组的下标通过映射给a
        for(let a in arr){
            console.log(arr[a]);
        }

3.while循环

while循环的执行流程：

1.  初始化条件
2. 判断条件
3.  执行循环体
4. 自增

while循环与for循环 的区别

 练习

 今年是2022年，今天我们公司有10个人，每年公司会以百分之10的比重招人， 问：哪一年公司人数突破100人?

function count(){
            let year = 2022;
            let sum = 10;
            while(sum <= 100) {
                sum *= 1.1;
                year++;
            }
            return year + "年人数超过了100人，人数是：" + sum;
        }
        // 需求就是最后我要打印输出哪一年超过了100人，人数是：xxxx
        console.log(count());

4.do...while循环

let a = 10;
 do {
   console.log(a);
     a++;
    } while (a > 100);

二、内置函数（需要巩固）

Array：

                    1.concat()连接

                    2.join('-')设置分隔符连接数组为一个字符串

                    3.pop()删除最后一个元素

                    4.sort()排序，从小到大排序

 Global：

                    1.isNaN()：判断一个值是不是数字

                    2.parseFloat()：把一个整数转换成小数

                    3.parseInt()：把一个小数转成整数，取整

                    4.number()：把一个值转成number类型

                    5.string()：把其他类型转成字符串110 120 119

String：

                    1.charAt(1)：取出指定位置的字符

                    2.indexOf('a')：判断指定的字符是否存在，如果存在返回下标，如果不存在，返

                    3.lastIndexOf('a')：从后往前找

                    4.replace('a','b')：替换字符串

                    5.split('-')：根据-去拆分字符串，得到一个数组

                    6.substring(1,6)：字符串截取

 Math：

                    1.ceil()向上取整

                    2.floor()向下取整

                    3.round()四舍五入

                    4.random()随机，生成一个0-1的随机数

                    5.tan() sin cos cot

                    6.E PI

 Date：

                    1.new Date();获取系统当前日期

                    2.getDate()：返回日期的日 1~31

                    3.getHours()：返回时间中的时0~23

                    4.getMinutes()：返回时间中的分

                    5.getSeconds()：返回时间中的秒

                    6.getTime()：获取系统当前时间

                    7.getYear()：获取年

三、抓取元素 

<input type="text" id="username">
        <script>
let input = document.querySelector("input");
            input.value = "我是JS放进文本框的";
        </script>

1.根据选择器去抓取一个元素

            // let div = document.querySelector('.div2');

            // console.log(div);

 2.根据选择器去抓取全部元素

            // let divs = document.querySelectorAll('.div1');

            // console.log(divs[0]);

            // let div = document.querySelector("div");

            // 获取元素内部的文本，不会获取到内部的HTML标签

            // console.log(div.innerText);

            // 获取元素内部的所有内容，包括HTML标签

            // console.log(div.innerHTML);

            // 改变元素的内容

            // div.innerText = "<h1>我是通过JS来的</h1>";

            // div.innerHTML = "<h1>我是JS来的</h1>";

 

四、事件（掌握良好）

事件就是当我们和HTML标签元素发生交互时产生的行为

当设置了对应的事件之后，会执行目标函数，点击按钮，弹出一个弹窗
            function jump(a){
                alert("按钮被点击了..." + a);
            }
            function valid(){
                console.log("失去了焦点...");
            }
            function get(){
                console.log("获得了焦点...");
            }
            function change(){
                console.log("发生了改变...");
            }
            function load(){
                console.log("已经加载完毕...");
            }

 五、三级联动（掌握一般）

 <select id="sheng"  onchange="setshi()">
            <option >---请选择省---</option>
            <option value="jl">吉林省</option>
            <option value="js">江苏省</option>
        </select>
        <select id="shi" onchange="setqu()">
            <option >---请选择市---</option>
        </select>
        <select id="qu">
            <option >---请选择区---</option>
        </select>
        <script>
        function setshi(){
          
           let sheng=document.querySelector("#sheng").value;
           let shi=document.querySelector("#shi");
           let qu=document.querySelector("#qu");
           shi.innerHTML='<option >---请选择市---</option>'
           qu.innerHTML='<option >---请选择区---</option>'
           let html =shi.innerHTML;
           if(sheng=='jl'){
           html +='<option value="cc">长春市</option> <option value="yj">延吉市</option>';
               shi.innerHTML=html;
           }
           if(sheng=='js'){
            html +='<option value="nj">南京市</option> <option value="sz">苏州市</option>';
            shi.innerHTML=html;
           }
           }
           function setqu(){
            let shi=document.querySelector("#shi").value;
           let qu=document.querySelector("#qu");
           qu.innerHTML='<option >---请选择区---</option>'
           let html =qu.innerHTML;
           if(shi=='cc'){
            html +='<option value="ed">二道区</option> <option value="ng">南关区</option>';
            qu.innerHTML=html;
           }
           if(shi=='yj'){
            html +='<option value="bd">北大</option> <option value="tn">铁南</option>';
            qu.innerHTML=html;
           }
           if(shi=='nj'){
            html +='<option value="qh">秦淮区</option> <option value="xw">玄武区</option>';
            qu.innerHTML=html;
           }
           if(shi=='sz'){
            html +='<option value="gs">姑苏区</option> <option value="wj">吴江区</option>';
            qu.innerHTML=html;
           }
        }

总结 ：InnerText和innerHTML弊端：会覆盖。

今日收获:对三级联动有了一定的思路，虽然今天的内容有点多，但是有一点收获，今日心情愉悦！