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

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

2022-08-24 19:07:09 作者：互联网

学习心得

自动类型推断

数字	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
来源： https://www.cnblogs.com/wxp0909/p/16621213.html

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