目录
JavaScript
JavaScript脚本语言，解释型，主要用来给HTML网页增加动态功能
通常的js是运行在浏览器环境下的
JS的两种模型
DOM：文档对象模型 document
BOM：浏览器对象模型 window
nodejs运行在计算机环境下，服务器技术。不能操作BOM和DOM，但是它可以操作文件，实际上是一门后端技术
JS解释器（不同浏览器，Js的解释器不一样）
Chrome---->v8
node---->v8
safari---->JavaScriptCore
ECMAScript ES ---->一套规范
JavaScript JS ---->具体的实现
JS基本上是web前端的核心
从外部引入js----->
JS放在HTML的位置
js建议放在body结束标签上面--->网页的执行顺序是自上而下的，JS是用来控制页面的显示方式，需要等待网页加载完成，再执行JS
JS的数据类型
| 数据类型 | ||
|---|---|---|
| 数字 | number | 自动类型推断 弱类型 |
| 字符串 | string | 自动类型推断 弱类型 |
| 布尔型 | boolean | 自动类型推断 弱类型 |
| 空 | null | 定义了，但值为空 |
| 未定义 | undefined | 没有声明过 |
| 非数字 | NaN | |
| 数组 | var v7 = [1, 2, 3, 4]; | |
| 对象 | var v8 = {"username": "admin","password": "123456"}; |
点击查看代码
var v1 = 10;
var v2 = 1.5;
var v3 = "你好";
var v4 = "好";
var v5 = true;
var v6 = null;
//数组
var v7 = [1, 2, 3, 4];
//向body打印输出
document.write(v7[2]);
//对象
var v8 = {
"username": "admin",
"password": "123456",
"id": 1001
};
document.write("<br>");//换行
document.write(v8.password);
函数(相当于java的方法
/*
可以有参数列表
参数可以有多个
*/
function plus(a, b) {
// let a = 1;
// let b = 2;
/*
return的作用：return可以终止函数的执行
*/
return a + b;
}
//调用函数
console.log(plus(111, 555));
console.log(plus(111, 555，1，2,3,67,7456));//不会报错，依然输出前两个数之和
对象
//Object()返回一个空对象
function User(name) {
this.name = name;
}
//创建了一个user对象
let user = new User("张三");
console.log(user.name);
let obj = Object();
//JS对象的属性
obj.name = "李四";
obj.age = 30;
//JS对象的方法
obj.eat = function () {
console.log("我正在吃东西...");
}
//对象调用方法
obj.eat();
//json串
let teacher = {
name: "王五",
age: 35,
drank: function () {
console.log("我正在喝酒...");
}
}
console.log(teacher['name']());
判断和循环
在JS中，if（条件）-------> 规定 0,null,undefined为false，剩下的都是true
//遍历输出数组
let arr = [1, 2, 3, 4, 5];
// for (let i = 0; i < arr1.length; i++) {
// console.log(arr[i]);
// }
for (i in arr) {
console.log(arr[i]);
}
//遍历输出对象
let student = {
name: "小明",
age: 22
}-
//遍历对象
// console.log(student.length);
for (stu in student) {
console.log(stu); //依次输出 name,age
console.log(student[stu]);//依次输出 小明,22
}
常见工具对象
let arr1 = [1,2,3];
let arr2 = [9,8,7];
console.log(arr1.concat(arr2)); //拼接
// 在数组最后的位置添加一个元素
arr1.push(10);
//移除数组中的最后一个元素
arr1.pop();
//移除数组中的第一个元素
arr1.shift();
let name = "你好";
// 对字符串进行编码
document.write(escape(name)); //%u4F60%u597DtrueNaN
//isNaN 判断是不是数字，是返回false，不是返回true
document.write(isNaN("哈哈")); //true
//Number() 将字符串转换成数字，如果里面是数字，返回该数字，否则，返回NaN
document.write(Number("哈哈")); //NaN
//String() 将一个值转成字符串
document.write(String(123));
// parseInt(); 转整数
// parseFloat(); 转小数
String：
charAt，indexOf，lastIndexOf，
replace，concat，match，
substring，substr，toUpperCase
toLowerCase
Math：
random，ceil，
floor，round
Date：
getDate，getDay
getMonth，getYear
getHours，getMinutes
let js = "alert('哈哈哈')"
//把一个字符串解析成js代码执行
eval(js);
JavaScript（独有的）
DOM编程 Document Object Model
文档本身就是一个文档对象document
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本都是文本节点
注释节点(一点不用)
获取元素节点
<body>
<div id="div1" class="div1">我是div</div>
<script>
//根据id属性获取对应的元素节点
//通过id获取到的是唯一的一个节点
let div1 = document.getElementById("div1");
console.log(div1);
//根据标签名获取对应的元素节点
//通过标签名获取到的是一堆标签元素节点
let div2 = document.getElementsByTagName("div");
console.log(div2[0]);
//根据class样式获取对应的元素节点
//通过class样式获取到的是一堆标签元素节点
let div3 = document.getElementsByClassName("div1");
console.log(div3[0]);
// 新方式
// querySelector找到和传入的选择器匹配的第一个元素
// 返回值是一个元素节点
let div = document.querySelector("#div1")
let div = document.querySelector("div")
let div = document.querySelector(".div1")
// querySelectorAll找到和传入的选择器匹配的所有元素，返回值是一个数组
let divs = document.querySelectorAll("div")
console.log(divs[0]);
</script>
</body>
innerHTML和innerText
let div = document.querySelector("div");
//innerHTML可以获取到HTML标签
console.log(div.innerHTML);
//innerText只能获取到文本
console.log(div.innerText);
let div2 = document.querySelector(".div2");
// innerHTML：可以实现值内的标签效果
div2.innerHTML = "<h1>我是div2里的内容</h1>";
//innerText：把值当字符串输出
div2.innerText = "<h1>我是div2里的内容</h1>";
新增元素节点
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.mydiv {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<button onclick="fun()">打我！！！！</button>
<div id="container"></div>
<script>
function fun() {
//新建一个元素节点
let myDiv = document.createElement("div");
//给新建的div加样式
myDiv.setAttribute("class", "mydiv");
//如果有id，尽量使用id
let container = document.querySelector("#container");
// innerHTML或innerText赋值只能赋字符串
// ccontainer.innerHTML = myDiv;
container.append(myDiv);
}
</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>
<button onclick="delOne()">删除某一个子元素</button>
<button onclick="del(this)">删除自己</button>
<button onclick="delAll()">清空</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
function delOne() {
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");
ul.removeChild(lis[2]);
}
function delAll() {
// 清空ul
let ul = document.querySelector("ul");
ul.innerHTML = "";
}
function del(obj) {
// console.log(obj);
// 找到要删除的元素
// let btn = document.querySelector("button");
// console.log(btn)
// 元素.remove方法直接删除
// btn.remove();
obj.remove();
}
</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>
<ul>
<li><a href="#">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 获取当前节点的所有子节点
let uls = document.querySelector("ul");
// 只拿html节点
console.log(uls.children);
// 全text和li节点
console.log(uls.childNodes);
/*
从某一个角度来说。
字节点相对的状态
*/
console.log(uls.children[0].children);
</script>
</body>
</html>
练习
计算器
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.myli {
color: aquamarine;
}
</style>
</head>
<body>
<input type="text">
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text">
<button onclick="fun()">=</button>
<input type="text" id="count" readonly>
<button onclick="delAll()">清除所有</button>
<ol id="myol"></ol>
<script>
let r = 1;
function fun() {
let arr = document.querySelectorAll("input");
/*
下拉菜单我们要找的元素是select，选择的是哪一个
选项，这个select的value值就是哪一个选项的value值
*/
let str = document.querySelector("select");
let count = document.querySelector("#count");
let num1 = parseInt(arr[0].value);
let num2 = parseInt(arr[1].value);
let str1 = str.value;
count.value = eval(num1 + str1 + num2);
let myli = document.createElement("li");
myli.setAttribute("class", "myli");
// 生成历史记录的时候，加上按钮
/*
并且处理id的问题，加单击事件
*/
myli.innerHTML = num1 + str1 + num2 + "=" + count.value + "<button id=a" + r + " onclick='del(this)'>删除</button>";
// 自我删除
/*
li按照自定义的规则，li处理id的问题
*/
myli.setAttribute("id", "a" + r);
// 标记自增
r++;
let myol = document.querySelector("#myol");
myol.append(myli);
// myli.append(del);
arr[0].value = null;
arr[1].value = null;
}
function delAll() {
// 拿到历史记录的ol
let myol = document.querySelector("#myol");
myol.innerHTML = "";
}
function del(obj) {
//获取按钮的id值，转换成li列表的id值
let myli = document.querySelector("#" + obj.id);
myli.remove();
}
</script>
</body>
</html>