学习心得
自动类型推断
数字 | 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:文档对象模型 documentBOM:浏览器对象模型 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