2022-07-12 第三小组黄均睿前端学习笔记（day5）

面向没有对象的程序猿

已于 2022-10-22 12:35:01 修改

阅读量277

点赞数

分类专栏： Web前端文章标签：前端学习 javascript

于 2022-07-17 22:19:35 首次发布

本文链接：https://blog.csdn.net/weixin_56982770/article/details/125837310

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript循环+内置函数+监听事件

循环：四个循环：

for in 循环
while循环
do...while循环
for循环

循环的思维导图

JS内置函数:

Array函数:	1.concat()----连接 2.join()--------设置分隔符连接数组为一个字符串 3.pop()--------删除最后一个元素 4.sort()--------排序，从小到大排序.
Global函数:	1.isNaN():-----判断一个值是不是数字 2.parseFloat()把一个整数转换成小数。 3.parseInt()---把一个小数转换成整数。 4.number()----把一个值转成number类型。 5.string()-------把其他类型转换成字符串。
String函数:	1.charAt()------取出指定位置的字符。 2.indexOf()-----判断指定字符是否存在，如果存在返回下标。 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 E pi
Date函数:	1.new Date();获取系统当前时间 2.getDate();返回日期的日1~31 3.getHours();返回时间中的时:0~23 4.getMinutes();返回时间的分 5.getSeconds();返回时间中的秒 6.getTime();获取系统当前时间 7.getYear();获取系统年

js特点：

document.getElementById('div')//文档.获取元素根据ID.

document.getElementById() -------------------根据ID获取元素

document.getElementsByClassName()-----根据Class获取HTML元素,得到的是一堆元素.

document.getElementsByTagName()--------根据标签获取html元素,得到的也是一堆元素

新方式：

document.querySelector()----------------------里面填写选择器，什么不带就是标签，带.的是class，带#的是id。（跟css差不多）抓取一个元素。

document.querySelectorAll()-------------------基本同上，但返回值拿到的是一个集合（数组）。根据选择器抓取所有元素

示例：

首先先设置一个div：

innerText与innerHTML的区别：

innerText:无法识别标签。

innerHTML:可以识别标签。

<div id="div1" class="div2">我是div</div>
<script>
    let div=document.querySelector('div');
</script>

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

onclick:单击事件

ondblclick:双击事件

onblur:失去焦点

onfocus:获得焦点

onchange:改变(内容发生变化时)

onload:加载

onscroll:页面滚动时

onmouseup:左键抬起

onmousemove:鼠标移动等等等.

补充：

抓取元素

<!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>
    <style>
        div1 {
            width: 400px;
            height: 400px;
            background-color: black;
        }
        div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1" id="div1">
        <div class="div2" id="div2">我是帅哥</div>
    </div>
    <script>
        // // 根据ID抓取元素
        // let div1 = document.getElementById("div1");
        // console.log(div1);
        // // 根据class抓取HTML元素，得到是一堆元素
        // let divs = document.getElementsByClassName("div1");
        // console.log(divs[0]);
        // // 根据tag抓取HTML元素
        // let divs = document.getElementsByClassName("div");
        // console.log(div[0]);

        // // 新方法
        // // 根据选择器去抓一个元素
        // let div = document.querySelector("div2");
        // console.log(div);
        // // 根据选择器去抓取全部元素
        // let divs = document.querySelectorAll(".div1");
        // console.log(div[0]);

        // document.querySelector("div");
        // // 获取元素内部文本,不会获取内部HTML标签
        // console.log(div.innerText);
        // // 获取所有元素内部所有的内容，包括HTML标签
        // console.log(div.innerHTML);


        // // 改变元素的内容
        // // div.innerText="我是通过JS过来的"；
        // div.innerHTML = "<h1>我是JS来的<h1>"

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

各类事件

<!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>

    <input type="text" onblur="valid()" onfocus="get()">


    <button type="button" ondblclick="jump('你好')">按钮</button>
    <select onchange="change()">
      <option>吉林省</option>
      <option>广西区</option>
    </select>

    <script>
        // onclick 单击事件
        // ondblclick 双击事件
        // onblur 失去焦点
        // onfocus 获得焦点
        // onchange 改变
        // onload 加载

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


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

练习题

*三级关联（至关重要）

<!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" onchange="jl()">吉林省</option>
        <option value="gx" onchange="gx()">广西区</option>
    </select>
    <select id="shi" onchange="setQu()">
        <option>---请选择市---</option>
    </select>
    <select id="qu">
        <option>---请选择区---</option>
    </select>
    <!-- 注意事项:
        初始状态:区是空的.
        选择了省,区也是空的.
        选择了省,也选择了市,也选择了区,这个时候换了个省.
    
    -->
    <script>
        function setShi(){
            // 每次触发,先清空.
            let html;
            /*
                分析:
                1.抓取省的下拉菜单,知道选择了哪个省
                2.判断选择了哪个省.
                3.构建市的下拉菜单选项.
                4.抓取市的下拉菜单.
            */
           let sheng=document.querySelector("#sheng").value;
           let shi=document.querySelector('#shi');
           let qu=document.querySelector('#qu');
           qu.innerHTML='<option>---请选择区---</option>';
           //保留市原本的内容.
           if(sheng=='jl'){
                //追加
                html='<option>---请选择市---</option><option value="jl">吉林市</option><option value="cc">长春市</option>';
                //把拼接好的下拉菜单通过innerhtml放回去.
                shi.innerHTML=html;
           }else if(sheng=='gx'){ 
                html='<option>---请选择市---</option><option value="nn">南宁市</option><option value="gl">桂林市</option>';
                shi.innerHTML=html;
           }
        }
        function setQu(){
            let shi=document.querySelector("#shi").value;
            let qu=document.querySelector('#qu');
            let html=qu.innerHTML;
            if(shi=='jl'){
                html='<option>---请选择区---</option><option value="lp">龙区</option><option value="fm">丰满区</option>';
                qu.innerHTML=html;
           }else if(shi=='cc'){
                html='<option>---请选择区---</option><option value="jy">净月区</option><option value="kc">宽城区</option>';
                qu.innerHTML=html;
           }else if(shi=='nn'){
                html='<option>---请选择区---</option><option value="jn">江南区</option><option value="hz">横州市</option>';
                qu.innerHTML=html;
           }else if(shi=='gl'){
                html='<option>---请选择区---</option><option value="qx">七星区</option><option value="ys">阳朔县</option>';
                qu.innerHTML=html;
           }
        }
</script>
</body>
</html>

while循环

<!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>
        //  while循环

        // let a =10;初始化条件
        // a《 100 循环条件
        // 打印输出 循环体
        // a++ 循环条件

        // while循环执行流程：
        // 1.吃石化条件
        // 2.判断条件
        // 3.执行循环体
        // 4.自增

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

        // 方法1

        // 公司有10人，每年以10%比重增加
        // 今年2022
        // 哪一年突破100人

        let num=10;

        for(let year=1; year<500; year++){
            num=num*1.1
            if(num>=100){
                console.log(year+2022);
                console.log(num);
                break;
            }
        }

        // 方法2

        function count(){
            let year = 2022;
            let sum = 10 ;
            while(sum <= 100){
                sum*=1.1;
                year++;
            }
            return year + '年人数超过了100人,人数是:'+sum;
        }
        console.log(count());
    </script>
</body>
</html>

输入日期输出天数

<!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>

        //输入一个年月日，给出天数

        // 方法1：倒序
         function have(year,month,day){
            let er;
            if((year%4==0)&&(year%100!=0)||(year%400==0)){
            er=29;
        }else{
            er=28;
        }
            let x=0;
            switch(month){  
                case 12:
                    x+=30; 
                case 11:
                    x+=31;
                case 10:
                    x+=30;
                case 9:
                    x+=31;
                case 8:
                    x+=31;
                case 7:
                    x+=30;
                case 6:
                    x+=31;
                case 5:
                    x+=30;
                case 4:
                    x+=31;
                case 3:
                    x+=er;
                case 2:
                    x+=31;
                case 1:
            return x+day;
        }
}
console.log(have(2400,12,31));


//    方法2：正序
   let year=2020;
        let yue=12;
        let tian=31;
        let er;
        let sum;
        if((year%4==0) || (year%400==0) &&(year%100!=0)){
            er=29;
        }else{
            er=28;
        }


        switch(yue){
            case 1:
                sum=tian;
            case 2:
                sum=tian+31;
                break;
            case 3:
                sum=tian+er+31;
                break;
            case 4:
                sum=tian+31+er+31;
                break;   
            case 5:
                sum=tian+30+31+er+31;
                break;
             case 6:
                sum=tian+31+30+31+er+31;
                break;
            case 7:
                sum=tian+30+31+30+31+er+31;
                break;
            case 8:
                sum=tian+31+30+31+30+31+er+31;
                break;
            case 9:
                sum=tian+31+31+30+31+30+31+er+31;
                break;
            case 10:
                sum=tian+30+31+31+30+31+30+31+er+31;
                break;
            case 11:
                sum=tian+31+30+31+31+30+31+30+31+er+31;
                break;
             case 12:
                sum=tian+30+31+30+31+31+30+31+30+31+er+31;
                break;
        }
        alert(sum);
    </script>
</body>
</html>

登陆提示

<!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>
    <p class="username">
                账号:<input type="text" id="username">
            </p >
            <p class="password">
                密码:<input type="password" id="password">
            </p >
            <p>
                <input type="button" value="登录" onclick="a()">
            </p >
            <script>
                //需求:当用户名==admin,密码=123465,提示登陆成功.
                //否则,提示用户名或密码错误.
                //思路:
                // 给按钮添加单击事件
                // 当点击按钮时,获取用户名和面名框输入的值.获取用户名和面名框输入的值
                // 然后进行判断,if()登陆成功,else()用户名或密码错误.然后进行判断
                let username=document.querySelector("#username");
                let password=document.querySelector("#password");
        
                function a(){
                    if(username.value=="admin" && password.value=="123456"){
                        alert("登陆成功");
                    }else{
                        alert("用户名或密码错误");
                    }
                }
            </script>
</body>
</html>

判断一个数在数组中的存在,如果存在,返回它的下标

如果不存在，返回-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>Document</title>
</head>
<body>
    <script>
        // 判断一个数在数组中的存在,如果存在,返回它的下标
        // 如果不存在，返回-1
        let min=99;
        let sum=0;
let arr=[10,5,9,1,5,4,6,3,5,141,12];
        for(let i=0;i<arr.length;i++){
            if(min==arr[i]){
                sum=i;
                }else{

}
console.log(-1);
        }
        console.log(sum);

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

占用用户

<!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>
    <!-- 方法1 -->
    用户名：<input type="text" id="username" onblur="check()">
    <span id="ing">
        
    </span>
    <script>
        function check() {
            if (document.querySelector('#username').value=='admin') {
                document.querySelector('#ing').innerHTML='<P>用户名已被占用</P>'
            }else{
                document.querySelector('#ing').innerHTML='<P>用户名可用</P>'
            }
        }
    </script>

<!-- 方法2 -->
用户名:<input type="text" id="username" onchange="a()">
    <span id="span"></span>
    <script>
        //在用户名的文本框中输入用户名.
        // 如果用户名为admin,则在span中显示用户名已被占用,否则,显示用户名可用
        // 分析:需要给文本框添加onchange,onblur.出发函数需要向span写入内容,innerText,innerHtml.
        function a(){
            let username=document.querySelector("#username").value;
            let span=document.querySelector('#span');
            if(username=="admin"){
                span.innerText="用户名已被占用";
            }else{
                span.innerText="用户名可用";
            }
        }
 </script>


</body>
</html>

找最大值

<!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>
        
 let arr=[10,5,9,1,5,4,6,3,5,141,12];
 let max=arr[0];
//    for (let i = 0; i < arr.length; i++) {
//     max = max > arr[i] ? max : arr[i];
//    }
//    console.log(max);



for(let i=0;i<arr.length;i++){
            if(arr[i]>max){
                max=arr[i];
            }
        }
        console.log(max);
    </script>
</body>
</html>

总结

今天学习量相当大：四个循环（for相当重要），JS内置函数、特点，各类事件，抓取元素。

每一个内容都需要很大的努力去学，所有今天的学习历程我感觉非常充实

课堂作业的：三级关联——更是综合性极强，体现代码的灵活应用，while循环，输入日期输出前数，登陆提示，判断数组，占用用户，找最大值。这些题都是充分和生活中的实例很好结合，老师同时为我们讲解了多种解题思路，让题目更好去解决

今天学习内容很多，难度也大，感谢老师、同学的帮助！

面向没有对象的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-07-12 第三小组黄均睿前端学习笔记（day5）

document.querySelector()----------------------里面填写选择器，什么不带就是标签，带.的是class，带#的是id。（跟css差不多）抓取一个元素。document.querySelectorAll()-------------------基本同上，但返回值拿到的是一个集合（数组）。document.getElementById()-------------------根据ID获取元素。5.split('-')--------根据-去拆分字符串，得到一个数组。..
复制链接

扫一扫