目录
重点归纳
JavaScript
知识点
JavaScript脚本语言，解释性
主要给HTML网页增加动态功能
通常的JS是运行在浏览器环境下的，是由浏览器解释执行的，可以控制页面
JS分两种模型：
DOM：文档对象模型，document
BOM：浏览器对象模型，window
nodejs:运行在计算机环境下,不能操作BOM、DOM，但是它可以操作文件，能操作数据库，实际上是一种后端技术.
JS的解释器：不同浏览器有不同的JS解释器，但解释结果一样
Chrome解释器叫V8
node解释器也叫V8
苹果解释器：JavaScriptCore
拓展知识点：ES
EcmaScript （ES）：实际上是一种规范、语法
JavaScript （JS）：是具体的实现，能干活的
ES5 ES6（2022正在流行） ES7 ......语法
JS基本上是Web前端核心！！！
了解前端一定学好JS
JS使用
JS底层
JS解析过程
JS优化
JS的位置
JS只要放在html文件中就好使，在浏览器中写都行，只要有浏览器就能运行
但一般写在body标签的最后部分
因为页面的加载顺序是从上到下的
JS是用来控制页面的显示方式的，需要等待页面加载完成，再执行JS
推荐外部引入的方式：
document.write("我是外面引入的js")<!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>
<h1>我是H1</h1>
<script src="./js/my.js">
// 向body打印输出
document.write("123")
</script>
</body>
</html>JS常用的变量
自动类型推断 弱类型
1.数字类型 number
2.字符串类型 string
3.布尔类型 boolean
4.null 空。定义了，为空
5.undefined 没有定义
6.NaN 非数字
7.数组
8.对象
<!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>
<script>
var v1 = 10;
var v2 = 1.5;
var v3 = "你好";
var v4 = '我好';
var v5 = true;
var v6 = null;
// v7未定义
// document.write(v7)
// 数组
var v7 = [1,2,3,4,5];
// 对象
var v8 = {
"username" : "admin",
"password" : "123456",
"id" : 1001
};
document.write(v8.username);
</script>
</body>
</html>ES6声明变量语法
<!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>
<script>
// 声明变量可以覆盖
// var num = 1;
// var num = 2;
// document.write(num)
// 新的声明变量的关键字：let不能重新声明
// let num = 1;
// num = 2;
// document.write(num);
// 声明常量的关键字，const，不能重新赋值、声明
const num = 1;
// num = 2;
document.write(num);
</script>
</body>
</html>Array()
Array()是一个函数，返回值就是一个空数组
JS里没有“方法”这个概念，叫做函数
JS里的方法不是java里的方法，JS里的函数相当于java里的方法
<!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>
<script>
// let arr = new Array();
// Array(),在JS中函数可以当类用
// 可以理解为JS里的数组就是java中的集合
let arr = [1,2,3,4,5]
// JS中数组没有下标越界，中间跳过的值为undefined
arr[100] = 10;
// 数组中可以写标签：例：换行
document.write(arr + "<br>");
document.write(arr.length);
</script>
</body>
</html>函数 （Java中的方法）
可有参数列表，参数可以有多个
<!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>
<script>
function plus(a,b) {
let a = 1;
let b = 2;
// console.log(a + b);
// 返回值
// return的作用:可以终止方法的执行
return a + b;
console.log(123);
}
// 调用函数
console.log(plus(100,2,3,4,1,2));
</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>
<script>
// Array()返回一个空数组
// Object()返回一个空对象
// let obj = new Object();
// 相当于定义一个类
function User(name){
this.name = name;
}
// 创建了一个user对象
// 之前定义的this.name就是对象的属性
// 现在的user对象中有一个name属性，值为张三
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("我正在喝酒！！");
}
}
teacher.drank();
console.log(teacher.name);
</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>
<script>
/*
在JS中，if的条件
规定：0、null、undefined为false，非0、null、undefined为true
*/
let a = 1;
if(a = 2){
console.log(a);
console.log("哈哈哈");
}else{
console.log("嘿嘿嘿");
}
</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>
<script>
let arr = [1,2,3,4,5]
for(let i = 0;i < arr.length;i++){
console.log(arr[i]);
}
for(i in arr){
console.log(arr[i]);
}
let student = {
name : "小明",
age : 10
}
// 遍历对象
// console.log(studen[0]);
for(attr in student){
console.log(attr);
console.log(student[attr]);
}
</script>
</body>
</html>常用工具对象
Array()
<!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>
<script>
let arr1 = [1,2,3,4];
let arr2 = [9,8,7,6];
// 拼接数组
console.log(arr1.concat(arr2));
// 新增
arr1.push(10);
// 删除最后一个
arr1.pop();
// 删除第一个元素
arr1.shift();
console.log(arr1);
</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>
<script>
let name = "你好";
// 对字符串进行编码
document.write(escape(name));
let js = "alert('哈哈哈')";
// 如果字符串是js代码，解析成代码运行
document.write(eval(js));
// isNaN是不是一个数字
document.write(isNaN("哈哈"));
// parseInt:转成整数
// parseFloat:转成小数
// 能除
document.write(10/3)
// Number()转成数字
document.write(Number(11111));
// 转成字符串
document.write(String(123))
</script>
</body>
</html>常用类型的方法
String：
charAt
indexOf
lastIndexOf
replace
concat
match
substring
substr
toUpperCase
toLowerCase
Math：
random
ceil
floor
round
Date：
getDate(日)
getDay（星期）
getMonth
getYear
getHours
getMinutes
JS真正自己的东西
DOM编程：Document Object Model
文档本身就是一个文档对象document
所有的HTML元素都是元素节点
所有的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>
<style>
.div1{
color: aqua;
}
</style>
</head>
<body>
// 根据ID属性获取元素节点
// 通过ID获取到的节点是唯一一个节点
let div = document.getElementById("div1");
// 根据标签名获取节点
// 通过标签获取到的节点是一堆节点
document.getElementsByTagName("div");
console.log(div[0]);
// 根据class样式样式获取元素节点
// 通过class样式获取到的节点是一堆节点
let div1 = document.getElementsByClassName("div1");
console.log(div[0]);
// 新方式
// querySelector找到和传入的选择器匹配的第一个元素节点
// 返回值是一个元素节点
let div2 = document.querySelector("div");
console.log(div);
// querySelectorAll找到和传入的选择器匹配的所有元素节点
// 返回值是一堆元素节点
let divs = document.querySelectorAll("div");
console.log(divs[0]);
let div = document.querySelector("div")
// innerHTML可以获取HTML标签
console.log(div.innerHTML);
// innerText可以获取到文本
console.log(div.innerText);
//改变元素的内容
let div2 = document.querySelector(".div2");
div2.innerHTML = "<h1>我是div2里面的h1</h1>"
div2.innerText = "<h1>我是div2里面的h1</h1>"
</script>
</body>
</html>事件
事件就是我们和HTML标签元素发生交互时产生的行为
onclick：单击事件
ondblclicl:双击事件
onblur:失去焦点
onfocus:得到焦点
onchange:改变事件
onload:加载事件（加载的时候干什么）
onmousemove:鼠标跟随事件(跟随鼠标的特效)
当设置了对应的事件之后会执行目标函数
<!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>事件</title>
</head>
<body onload="load()">
<input type="text" onblur="valid()" onfocus="get()">
<!-- 不要出现双引号套双引号 -->
<button type="button" onclick="jump('你好')">按钮</button>
<select onchange="change()">
<option value="">吉林省</option>
<option value="">辽宁省</option>
</select>
<script>
// 点击按钮就弹出一个弹窗
function jump(){
alert("按钮被点击了")
}
function valid(){
console.log("失去了焦点。。。");
}
function get(){
console.log("获得了焦点。。。");
}
function change(){
console.log("发生了改变");
}
function load(){
console.log("已经加载完毕");
}
</script>
</body>
</html>用js代码加标签
将一个按钮的点击事件设置成添加一个标签。
<!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>
<style>
.mydiv{
width: 200px;
height: 200px;
background-color: green;
}
</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赋值只能赋字符串
// container.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>按钮1</button>
<button onclick="del(this)">按钮2(删除自己)</button>
<script>
function del(Obj){
// 找到要删除的元素
// let btn = document.querySelector("button");
/* 元素.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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button onclick="nothing()">清空列表按钮</button>
<button onclick="delone()">删除一行列表</button>
<script>
function delone(){
let ul = document.querySelector("ul");
let lis = document.querySelectorAll("li");
ul.removeChild(lis[0]);
}
function nothing(){
// 清空ul列表
let ul = document.querySelector("ul");
ul.innerHTML = "";
}
</script>
</body>
</html>
1913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
