首页 > 其他分享 >2022-08-24 第四小组 王星苹 学习笔记

2022-08-24 第四小组 王星苹 学习笔记

时间:2022-08-24 19:04:15浏览次数:145  
标签:24 querySelector 08 value li let 2022 div document

学习心得

自动类型推断

数字 number

var v1 = 10; 

var v2 = 1.5;

字符串 string
       var v3 = "你好";
       var v4 = '我好';
布尔型 boolean           var v5 = true;
null 空。定义了但是值为空 var v6 = null;
undefind 未定义,没有声明过  
NaN 非数字  
数组  
   var v7 = [1,2,3,4,5];
            document.writeln(v7[2]
对象  
  var v8 = {
                "username":"admin",
                "password":"123456",
                "id":1001
            };
            document.write(v8.username

 

掌握情况:还行

学习总结

JavaScript脚本语言,解释型。

主要用来给HTML网页增加动态功能。

通常的js是运行在浏览器环境下的。

JS的两种模型:

DOM:文档对象模型 document

BOM:浏览器对象模型 window

nodejs运行在计算机环境下,服务器技术。不能操作DOM和BOM。但是他可以操作文件,能操作数据库,实际上是一门后端技术。

 

Array()是一个函数,返回值就是一个空数组

JS里"没有"方法这个概念,叫做函数

JS里的方法不是java里的方法

JS里的函数相当于java里的方法

let arr = Array();

Array(),在JS中,函数可以当做《类》使用

let arr = new Array();

 

 

判断和循环

 

在JS中,if(条件)

 

        规定:

 

        0,null,undefined为false;剩下的都是true

 

 

        <script>
            let a = 0;
            if(undefined){
                console.log(a);
                console.log("哈哈哈");
            }else {
                console.log("false");
            }
        </script>

 

 

获取元素节点

  根据id属性获取对应的元素节点

      通过id获取到的是唯一的一个节点

     let div = document.getElementById("div1");

 

  根据标签名获取对应的元素节点

       通过标签名获取到的是一堆标签元素节点

     let div = document.getElementsByTagName("div");

 

 根据class样式获取对应的元素节点

       通过class样式获取的时一堆标签元素节点

      let div = document.getElementsByClassName("div1");

      console.log(div[0]);

 

新方式

       querySelector找到和传入的选择器匹配的第一个元素

       返回值是一个元素节点

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

       console.log(div);

 

querySelectorAll找到和传入的选择器匹配的所有元素

       返回值一堆元素节点

 


练习:

简易计算器

进行加减乘除,会把每次操作记录显示在下面,可以清除全部的记录,也可以点击删除,删除自己想删除的那一条记录。

<!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" class="num1">
        <select class="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" class="num2">
        <button onclick="calc()">=</button>
        <input type="text" readonly class="result">
        <hr>
        <button onclick="cls()">清空历史记录</button>
        <ol id="history"></ol>


        <script>
            /* 定义一个不重复的变量,用它来当做
                button和li共同的id
            */
            let r = 1;
            function calc() {


                // 获取第一个数
                let num1 = document.querySelector(".num1").value;
                // 获取第二个数
                let num2 = document.querySelector(".num2").value;
                let result = document.querySelector(".result");
                /* 
                    下拉菜单我们要找的元素是select,选择的是哪一个
                    选项,这个select的value值就是哪一个选项的value值
                */
                let oper = document.querySelector(".oper");


                result.value = eval(num1 + oper.value + num2);


                let li = document.createElement("li");
                // 生成历史记录的时候,加上按钮
                /*
                    并且处理id的问题,加单击事件
                */
                li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "<button id=b" + r +" onclick='remself(this)'>删除</button>";


                // 自我删除
                /*
                    li按照自定义的规则,li处理id的问题
                */
                li.setAttribute("id","l"+r);
                // 标记自增
                r++;


                let ol = document.querySelector("#history");
                ol.append(li);


                document.querySelector(".num1").value = "";
                document.querySelector(".num2").value = "";
                
            }  
            
            function cls() {
                // 拿到历史记录的ol
                let ol = document.querySelector("#history");
                ol.innerHTML = "";
            }


            function remself(obj) {
                // 把拿到的b1转换成li
                let li = document.getElementById(String(obj.id).replace("b","l"));
                // 删除自己
                li.remove();
            }


        </script>
    </body

 

 

-=-=-=-=-=

-=-=-=--=-=-

标签:24,querySelector,08,value,li,let,2022,div,document
From: https://www.cnblogs.com/wxp0909/p/16621213.html

相关文章

  • 达内培训Week2 集合01 8.24
    集合018.24什么是集合:集合和数组类似,可以保存一组元素,并且提供了操作数组元素的方法,使用方便。Java集合框架接口Java.util.Collection接口:所有结合的接口,封装......
  • 2022-08-24 第二组刘禹彤 学习笔记
    打卡39天  ###学习内容JavaScript脚本语言,解释型,主要用来给HTML网页增加动态功能,通常的JS是运行在浏览器环境下的JS的两种模型DOM文档对象模型(document)BOM浏......
  • After Effects 2022 for Mac(ae 2022)中文版
    AfterEffects2022formac是一款视频特效编辑软件,被称为AE,拥有强大的特效工具,旋转,用于2D和3D合成、动画制作和视觉特效等,效果创建电影级影片字幕、片头和过渡,可以实现你的......
  • web项目开发写接口时,为什么需要在关键位置打印日志-2022新项目
    一、业务场景最近在开发新功能,新功能主要就是写app的首页查询接口,接口比较多有十几个,首页会有各种查询,新增操作比较少。由于用户量比较大,据说并发量不小,所以首页的很......
  • MxDraw云图平台 2022.08.24更新
     SDK开发包下载地址:https://www.mxdraw.com/ndetail_30187.html1.增加对像扩展数据功能2.增加CADGIS使用功能  https://www.mxdraw3d.com/sample/vuemapbox/?cm......
  • vs2022 + python实现人脸识别简单练手
    vs2022需要安装python,c++python环境:3.7需要安装的包:cmake,boost,opencv-python,按顺序安装 代码importcv2importdlibimportosimportsysimportrandom#存储位置ou......
  • 2022年中秋节是哪一天?中秋节放假安排用手机备忘录记录
    进入到2022年的秋天,相信有不少网友都在期待着下个节日的到来,这就是国家法定节假日之一的中秋节。那么今年中秋节是哪一天呢?2022年的中秋节依旧是农历的八月十五日,而公历的......
  • 2022年入驻博客园
    过去三年,充满奇幻色彩的三年,注定会被历史铭记的三年,必将改变未来的三年。闲来无事,开通博客,随手记录,文笔拙劣,请见谅......
  • ECCV 2022 | RFLA:基于高斯感受野的微小目标检测标签分配
    前言 在本文中,作者提出了一种基于高斯感受野的标签分配(RFLA)策略用于微小目标检测。并提出了一种新的感受野距离(RFD)来直接测量高斯感受野和地面真值之间的相似性,而不是使用......
  • 【2022-08-18】连岳摘抄
    23:59只要我们总能及时看到自己眼睛里的梁木,我们就会变得善良。                                ......