2022-07-12 第十组 Myy 学习笔记_JS Dom操作

JS Dom操作

• 昨日遗留问题
• 4种循环（for，for in，while，do...while）
• JS内置函数
• DOM操作
• 事件问题
• 作业及问题点

昨日遗留问题

1.switch..case的效率问题case后面是字面量（常量）

2.大家不要强行用switch，case后面接数字时使用较好

函数名的命名规则：小驼峰式

3.switch...case里的break是可选的

注意代码中的case为选择作用时的break

<script>
        // 给你一个年月日,今天是今年的第几天？
        let year = 2020;
        let month = 3;
        let day = 11;

        // 思路：
        // 1.判断2月份有几天，判断是不是闰年
        // 2.如果是闰年，2月份有29天
        function getCountDays(year, month, day) {
            let count = 0;
            switch (month) {
                case 1:
                    count = day;
                    break;
                case 2:
                    count = 31 + day;
                    break;
                case 3:
                    // let a = 0;
                    // if(isRun2(year)){
                    //     a = 29;
                    // }else{
                    //     a = 28;
                    // }
                    count = 031 + (isRun2(year) ? 29 : 28) + day;
                    break;
            }
            return count;
        }
        console.log(year + "年" + month + "月" + day + "日是" + year + "年的第" + getCountDays(year,month,day) + "天！");

        function isRun2(year) {
            switch (year % 400) {
                case 0:
                    return true;
                default:
                    if (year % 4 == 0 && year % 100 != 0) {
                        return true;
                    }
                    return false;
            }
        }

    </script>

同一个问题，switch...case的倒case写法如下：

<script>

        function getDays(year,month,day) {
            // 要返回的总天数
            let count = 0;
            switch(month) {
                case 4:
                    count += 31;
                case 3:
                    count += (isRun(year) ? 29 : 28)
                case 2:
                    count += 31;
                case 1:
                    count += day;    
            }
            return count;
        }
        console.log(getDays(2022,4,1));

        function isRun(year){
            switch(year % 400){
                case 0: 
                    return true;
                default:
                    if(year % 4 == 0 && year % 100 != 0){ 
                        return true;
                    }
                    return false;
            }
        }

    </script>

循环 4种循环

一、for循环

语法：

1.let i = 0;初始化条件，当i=0时，循环开始，只走一次，第一次循环开启之前初始化

2.i < 10;判断条件，会和初始化条件配合循环的执行，决定了循环什么时候停止

3.循环体，循环在重复做什么事情

4.i++ 循环条件，每次循环体执行完毕让i产生变化

for (let i = 0; i < 10; i++) {
        // 循环体  ++i和i++暂时认为它们没区别
         console.log(i);
            }

面试题：for循环的执行步骤

a.i可以看做是一个局部变量

b.循环条件是可以根据实际情况更改的

c.当修改循环条件时，要确保循环可以向着终点前进去改变

d.我们在开发中，尽量避免死循环

// for循环的特殊写法

       /*死循环，不等于错，它不报错*/  
       for(;;){

       }
       for(let i = 0 ;;){

       }
       for (let i = 0;; i ++ ){

       }
       for (let i = 0; i < 10;) {
            
        }

>for循环里套有数组

let arr = [10,5,9,7,-5,100,257];
        // 打印输出数组中的所有元素
        // console.log(arr[0]);
        // 数组有一个属性length-长度
        // 长度：数组种有多少个元素
        // 注意区分长度和下标（索引）
        // 取出数组中的最后一个元素，不能是undefined
        // console.log(arr[arr.length-1]);
        // 把数组中的每个元素都操作一遍，数组的遍历（迭代）
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);            
        // }

        // 练习1：找出数组中的最大值。可以用三元,可以用if...else
        let max = arr[0];
        for (let i = 1; i < arr.length; i++) {
             if (max < arr[i]) {
                 max = arr[i];
             } 
         }
         console.log("数组中的最大值是:"+ max ); 

        // 练习2：判断一个数在数组中是否存在，如果存在，返回它的下标，如果不存在，返回-1
        // 涉及返回值的问题，写函数，return只能中止函数运行
        // 当变量的作用域出现了重叠，不要出现重名的情况，尤其是全局和局部，变量最好不要重名
        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));

        // 错误示范答案
        // let a = 10;
        // for (let i = 0; i < arr.length; i++) {
        //     if (a == arr[i]) {
        //         console.log("这个数在第"+ i +"位");
                
        //     }
        //     else if(a != arr[i]) {
        //         console.log(-1);
                
        //     }
        // }

二、for in语句

>能做的事情较少，只能做遍历操作

let arr = [1,2,3,4,5];
    // 可以理解为a是arr数组的下标通过映射给a
    for(let a in arr) {
        console.log(arr[a]);
    }

三、while 循环

let a = 10;初始化条件

a < 100  循环判断条件

打印输出  循环体

a++ 循环条件

while循环的执行流程：1.初始化条件  2.判断条件  3.执行循环体  4.自增

function hello() {
            let a = 10;
         while (a < 100) {
             a++;
             console.log(a);
        }
         return a;
        }
        
        // while练习：今年是2022年，今天我们公司有10个人，每年公司会以10%的比重招人。问：哪一年公司人数突破100人
        
        function yearPerson() {
            let per = 10;
            let y = 2022;
            while (per < 100) {
                y++;
                per *= 1.1
        }
        return y + "年人数超过了100人，人数是：" + per;
        }
        console.log(yearPerson());
        // 需求就是最后我要打印输出哪一年超过了100人，人数是多少

while循环           PK              for循环

初始化条件不好控制                   每个for循环的初始化条件都是隔离开的

循环条件也不好控制                   每个for循环的a++都是隔离的

写函数时，返回值return便于管理

四、do...while循环

let a  初始化条件

do做什么事

log循环体

a > 100判断条件

a++ 循环条件

 

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

 

do...while和while的区别：

do...while先执行一次，再判断。无论条件是否成立，它都至少执行一次

while：如果条件不成立，一次都不走

//死循环推荐的三种写法

for(;;){}

while(true){}

do{}while(true);

JS内置函数

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')：判断指定的字符是否存在，如果存在返回下标，如果不存在，返回-1

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()：获取年

DOM操作

 

<style>
        .div1 {
                
            }
        .div2 {
                
            }
 </style>

<div class="div1" id="div1">
            <div class="div2" id="div2">我是div2</div>
        </div>

        <input type="text" id="username">

        <script>
            // 1.根据id去抓取HTML元素
             let div1 = document.getElementById("div1");
             console.log(div1);
            // 2.根据class抓取HTML元素，得到的时一堆元素
             let divs = document.getElementsByClassName("div1");
              console.log(divs[0]);
            // 3.根据tag抓取HTML元素，得到的是一堆元素
             let divs = document.getElementsByTagName("div");
             console.log(divs[0]);

            // 新方法
            // 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>";

            let username = document.querySelector("#username");
            username.value = "我是JS来的";

        </script>

 

事件问题

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

onclick：单击事件   ondblclick：双击事件

onblur：失去焦点    onfocus：获得焦点

onchange：改变      onload：加载

当设置了对应的事件之后，会执行目标函数

<body onload="load()">
        <input type="text" onblur="valid()" onfocus="get()">
        <!-- 不要出现双引套双引，要么双引套单引，要么单引套双引 -->
        <button type="button" onclick="jump('你好')">按钮</button>
        <select onchange="change()">
            <option>吉林省</option>
            <option>辽宁省</option>
        </select>

        <script>
            
            // 点击按钮，弹出一个弹窗
            function jump(a){
                alert("按钮被点击了..." + a);
            }
            function valid(){
                console.log("失去了焦点...");
            }
            function get(){
                console.log("获得了焦点...");
            }
            function change(){
                console.log("发生了改变...");
            }
            function load(){
                console.log("已经加载完毕...");
            }
        </script>
    </body>

 

作业篇目

作业1

<!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>onblur 1</title>
</head>
<body>
    <p>
        账号：<input type="text" id="username">
    </p>
    <p>
        密码：<input type="text" id="password">
    </p>
    <p>
        <input type="button" value="登录" onblur="jump()">
    </p>

    <script>
        // 需求：当用户名==admin，密码==123456时，提示登陆成功
        // 否则，提示用户名或密码错误
        /*思路：给按钮添加单机事件
        当点击按钮时，获取用户名和密码框输入的值。
        然后进行判断，if（）登录成功else用户名或密码错误！
        */
        // 添加事件后浅浅测试一下

        function jump() {
            let username = document.querySelector("#username").value;
            let password = document.querySelector("#password").value;
            if(username == "admin" && password == "123456"){
                alert("注册登陆成功");
            }else{
                alert("用户名或密码错误");
            }

            // let u = admin;
            // let p = 123456;

            // let username = document.getElementById

            // if (username == admin && password == 123456) {
            //     alert("登录成功");
            // } else {
                
            // }
        }

    </script>

</body>
</html>

作业2

<!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>onblur 2</title>
</head>
<body>
    用户名：<input type="text" id="username" onblur="valid()">
    <span > </span>

    <script>
        // 在用户名的文本框中输入用户名。如果用户名为admin，则在span中显示用户名已被占用。否则，显示用户名可用！
        // 分析：需要给文本框添加onchange. onblur.  触发函数
        // 需要向span中写入内容！innerText  innerHTML

        function valid() {
            let username = document.querySelector("#username").value;
            let span = document.querySelector("span");
            if (username == "admin") {
                // 用户名已被占用
                span.innerText="用户名已被占用！";
            }else{
                // 用户名可用
                span.innerText="用户名可用！";
            }
        }

        // 错误
        // function change() {
        //     if (username == "admin") {
        //         alert("用户名已被占用");
        //     }else{
        //         alert("用户名可用");
        //     }
        // }

        span.innerText="用户名已被占用";
        span.innerText="用户名可用";

    </script>
</body>
</html>

作业3

<!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>省市区三级联动</title>
    </head>
    <body>
        <select id="sheng" onchange="setShi()">
            <option>---请选择省---</option>
            <option value="jl">吉林省</option>
            <option value="ln">辽宁省</option>
        </select>

        <select id="shi" onchange="setQu()">
            <option>---请选择市---</option>
        </select>
        
        <select id="qu">
            <option>---请选择区---</option>
        </select>
        <script>
            function setShi(){
                /*
                    思路：
                    1.抓取省的下拉菜单，知道你选择了哪个省
                    2.判断选择了哪个省
                    3.构建市的下拉菜单选项
                    4.抓取市的下拉菜单

                    区的注意事项：
                    1.初始状态区没有选项的
                    2.选择了省，区没有选项
                    3.选择了省，选择了市，选择了区，切换了一下省
                */
               let sheng = document.querySelector("#sheng").value;

               // 要保留市原有的内容
               let shi = document.querySelector("#shi");
               let html1 = shi.innerHTML;

               if(sheng == 'jl'){
                    // 追加
                    html1 = '<option value="cc">长春市</option><option value="sp">四平市</option>';
                    // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                    shi.innerHTML = html1;
                    setQu();
               }
               if(sheng == 'ln'){
                    html1 = '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
                    shi.innerHTML = html1;
                    setQu();
               }              
            }

            function setQu() {
                let shi = document.querySelector("#shi").value;

                let qu = document.querySelector("#qu");
                let html2 = qu.innerHTML;
                 
               if (shi == 'cc') {
                html2 = '<option value="cy">朝阳区</option><option value="jt">九台区</option>';
                qu.innerHTML = html2;
               }
               if (shi == 'sp') {
                html2 = '<option value="tx">铁西区</option><option value="td">铁东区</option>';
                qu.innerHTML = html2;
               }

               if (shi == 'sy') {
                html2 = '<option value="hp">和平区</option><option value="hg">皇姑区</option>';
                qu.innerHTML = html2;
               }
               if ( shi == 'dl') {
                html2 = '<option value="zs">中山区</option><option value="jz">金州区</option>';
                qu.innerHTML = html2;
               }
            }

            
        </script>
    </body>
</html>

 

 

问题点：

1.注意case的选择以及break的中止情况-->已解决

2.JS内置函数，掌握情况不高-->解决方法：随用随查

3.DOM操作抓取基本掌握-->练习后掌握程度更高

4.事件问题掌握情况不高-->解决方法：随用随查