标签：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：文档对象模型 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 来源： https://www.cnblogs.com/wxp0909/p/16621213.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。