本文介绍了JavaScript的基础知识，包括其在网页开发中的角色、如何在HTML中引入和使用、变量的声明与类型、运算符、流程控制结构、函数、字符串和数组操作，以及浏览器对象模型(BOM)和文档对象模型(DOM)的相关操作，为初学者提供了一个全面的JavaScript学习指南。
1.js简介
JavaScript（JS）是一种广泛用于网页开发的脚本语言，它能够为网页增加动态功能和交互性。JavaScript 通常被称为网页的“行为语言”，因为它可以控制网页上的行为。
2.js引入
在html内部使用script标签，在script内部直接编写js
在外部js文件中编写，在html内部通过script 的src属性引入外部js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js</title>
<!-- 外部引入 -->
<script src="./js库/main.js"></script>
<script>
console.log("在头部使用script");
</script>
</head>
<body>
<!--
js:网页开发唯一语言
Nodejs:服务端开发环境，使用js
-->
<script>
console.log("身体内部使用script");
</script>
</body>
</html>3.js变量的声明
| const | 声明常量 | 必须赋值，不能更改 |
| let | 声明局部变量 | 出了语句块失效，没有赋值之前不能访问，且只能声明一次 |
| var | 声明全局变量 | 可以声明多次，自带变量提升效果--没有声明就可以访问 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量声明</title>
</head>
<body>
<script>
//var let const
// const声明常量 必须赋值
const PI = 3.14;
console.log(PI);
// let局部变量 没有声明之前不能访问 出了语句块就失效
{
let a = 12;
console.log(a);
}
// var声明全局变量 可以提升变量效果-没有声明也可以访问 可以多次声明
console.log(n);
var n = 11;
console.log(n);
var n = 20;
console.log(n);
</script>
</body>
</html>4.js的数据类型
5种基础类型，使用typeof检测类型
| undefined | 未定义 声明一个变量但是未赋值 |
| Number | 数字 |
| String | 字符串 |
| Bool | 布尔值 |
| Null | 空值 清除内存，使用typeof返回的是 object |
2种复杂类型，使用instanceof来检测类型
| 数组 | []，相当于Python中的列表 |
| 对象 | {}，相当于Python中的字典 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型</title>
</head>
<body>
<script>
// 5种基本数据类型，使用typeof()检查类型
// undifined 未定义
console.log(m);
var m;
let n;
// 数字number
n = 8;
console.log(n, typeof(n));
n = 3.24;
console.log(n);
// 字符串string
n = "hello js";
console.log(n, typeof(n));
// 布尔值
n = false;
n = true;
console.log(n, typeof(n));
// 空值null
n = null;
console.log(n, typeof(n));
// 两种复杂类型，使用instanceof检测类型
// 数组，相当于python中的列表
n = [1,2.3,"hello",[1, "b"], {"name": "abc", "age": 11}];
console.log(n , n instanceof Array);
// 对象，相当于python中的字典
n = {"name": "abc", "age": 11};
console.log(n, n instanceof Object);
</script>
</body>
</html>5.js运算符
js中为假：false 0 "" null
算数运算符
+ - * / % //
赋值运算符
= += -= *= /= %=
a++ a-- 先返回a 再自增1
++a --a 先自增 再返回a
比较运算符
> >= < <= !
==只判断值
===先判断值，再判断类型
逻辑运算符
&& 左侧为真返回右侧
左侧为假返回左侧
|| 左侧为真返回左侧
左侧为假返回右侧
! 非 非真为假，非假为真 结果只有true/false
6.js流程结构
顺序结构：从上往下依次执行
分支结构：根据条件判断 选择性的执行，if(){}、if(){} else{}、if(){} else if(){} else{}
循环结构：重复执行代码，for、while先判断 再执行、dowhile先执行 再判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js控制流程</title>
</head>
<body>
<!--
顺序结构：从上往下依次执行
分支结构：根据条件判断 选择性的执行
循环结构：重复执行代码
isNaN不是数字
prompt输入
alter
-->
<script>
// // 顺序
// let input_str = prompt("输入数字");
// input_value = parseInt(input_str);
// // 分支
// if (isNaN(input_value)){
// alert("输入不合法");
// }
// else{
// if (input_value > 85){
// alert("优秀");
// }
// else if(input_value >= 60){
// alert("及格");
// }
// else{
// alert("再努力");
// }
// }
// 循环，nbsp空格，document.write写在屏幕上，log写在控制台
// js中格式化字符串，反引号(键盘数字键1的左边)``，反引号中一个变量写一个${}
// 调试：源代码中设置断点，运行
// for(let i = 0;i<10;i++){
// for(let j=1;j<=i;j++){
// document.write(`${j}*${i}=${i*j}   `);
// }
// document.write(`<br>`);
// }
// while先判断再执行
// let num = 7;
// while(num>0){
// console.log("hello");
// num--;
// }
// dowhile先执行 再判断
let num = 7;
do{
console.log("hello");
num--
}while(num>0)
</script>
</body>
</html>7.js中的函数
function---定义关键字、函数名--小驼峰、形参--占位符，声明函数使用、实参--实际值，调用函数使用、返回值--只有一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的函数</title>
</head>
<body>
<script>
function myfun(info,n){
for(;n<5;n++){
console.log(info);
}
}
function mufon(){
console.log("start");
// 在一个函数中调用另外一个函数，函数嵌套
myfun("hello", 0);
console.log("end");
}
mufon();
</script>
</body>
</html>匿名函数：没有函数名，不能独立存在
使用：赋予一个变量、赋予函数的形参、赋予对象的键
递归函数：自己调用自己，递归效率低
8.js常用数据操作
8.1 字符串
| length | 长度 |
| 遍历 | 下标为0-length-1 |
| charAt | 根据索引找字符 |
| indexOf | 根据字符返回索引 找不到返回-1 |
| concat | 字符串拼接 |
| endsWith | 结尾 |
| startsWith | 开头 |
| replace | 替换 |
| match | 匹配返回对象 |
| search | 返回索引 |
| slice | 切片 不包含stop |
| split | 切割 支持空字符切割 |
| toLowerCase | 转小写 |
| toUpperCase | 转大写 |
| trim | 剔除空格 |
8.2 数组
| length | 长度 |
| 遍历 | 下标为0-length-1 |
| concat | 数组连接，不影响原始数组 |
| join | 将元素使用字符拼接 |
| pop | 删除末尾，影响原数组 |
| push | 末尾插入，影响原数组 |
| shift | 删除开头元素，影响原数组 |
| unshift | 开头插入，影响原数组 |
| sort | 排序，影响原数组 |
| reverse | 逆序 影响原数组 |
| slice | 切片，不影响原数组 |
| splice | 插入 start操作位置，deleteCount删除个数 items插入内容，可以不插入 |
| includes | 是否包含 |
| indexOf | 返回元素索引，找不到返回-1 |
数组的高阶函数：第一个参数数值，第二个参数是索引
| forEach() | 遍历，没有返回值 |
| filter() | 过滤，返回符合条件的 |
| map() | 映射一对一返回 |
| find() | 返回对应的值，只返回一个 |
| every() | 每一个都是true，结果才是true |
| some() | 每一个都是false，结果才是false |
8.3 对象
键值对，类似python字典
值可以是任意数据类型
Object.keys(obj)，获取obj的所有键
JSON.stringify，序列化
JSON.parse，反序列化
9.BOM操作
window全局对象下的属性
history：back--回退，forward--前进，go(n)--正值前进，赋值后退，0刷新
location：href--当前地址，protocal--协议，port--端口，pathname--虚拟路径
search--查询参数，hash--路由模式，锚点，reload--刷新
navigator：navigator
10.DOM操作
10.1 获取页面元素
| querySelector | 找到匹配第一个 |
| querySelectorAll | 找到所有，返回类似数组，可以使用下标获取单个元素 |
| document.query* | 搜索整个文档 |
| target.query* | 在target内部去找 |
10.2 绑定事件
绑定事件的前提是找到元素
鼠标事件：onclick鼠标点击
onmouse-enter鼠标划入 leave鼠标离开 down鼠标落下 up鼠标抬起 move鼠标移动
表单事件：input.onfocus onblur oninput onkeyup键盘抬起
10.3 获取、修改元素
内容：innerText只关注内容 innerHTML还可以识别标签
属性：类名：对象.classList add添加 remove删除 contains是否有 toggle有就删除没有就添加
非类名：id title href...
样式：设置，都是行内样式， .style.样式属性名=
获取：行内样式直接通过style.样式属性名获取
内部样式表和外部样式表-通过getComputedStyle(obj).样式属性名 获取
相关元素：parentElement父节点 children所有直接子节点，可以使用下标
nextElementSibling下一个相邻 previousElementSibling上一个相邻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
height: 40px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div" title="div1" class="con">
<p class="p1 p" id="p1" title="biaoqian">p1</p>
<p>p2</p>
<p>p3</p>
<input type="text">
</div>
<div class="cons">
</div>
<a class="a a1" title="baidu" id="baidu" href="http://baidu.com"></a>
<span style="width: 20px; background-color: aqua;">span1</span>
<script>
// let s = document.querySelector("div");
// console.log(s);
// let o = document.querySelectorAll("div")
// o.forEach(function(item){
// console.log(item);
// })
// querySelectorAll 找到所有 返回类似数组
// 数组可以遍历，也可以使用下标访问
// let s = document.querySelectorAll("span")
// console.log(s);
// console.log(s[1]);
// let s = document.querySelector("p");
// s.onclick = function(){
// console.log("鼠标点击");
// }
// let ps = document.querySelectorAll("p");
// ps.forEach(function(item){
// // item.onclick = function(){
// // console.log("鼠标点击", item);
// // }
// item.onmouseenter = function(){
// console.log("鼠标划入");
// }
// item.onmouseleave = function(){
// console.log("鼠标离开");
// }
// item.onmousedown = function(){
// console.log("鼠标落下");
// }
// item.onmouseup = function(){
// console.log("鼠标抬起");
// }
// })
// let input = document.querySelector("input");
// input.onfocus = function(){
// console.log("聚焦");
// }
// input.onblur = function(){
// console.log("失去焦点");
// }
// input.oninput = function(){
// console.log("输入内容发生改变");
// }
// input.onkeyup = function(){
// console.log("键盘抬起");
// }
// let con = document.querySelector(".con")
// console.log(con);
// console.log(con.innerText);
// con.innerText = "<a href='http://baidu.com'>百度</a>";
// console.log(con.innerHTML);
// con.innerHTML = "<a href='http://baidu.com'>百度</a>";
// console.log(con);
// let a = document.querySelector(".a");
// console.log(a);
// console.log(a.classList);
// a.id = "jd";
// console.log(a.id);
// a.classList.add("aa");
// console.log(a.classList);
// a.classList.remove("aa");
// console.log(a.classList);
// a.classList.contains("aa");
// console.log(a.classList);
// a.classList.toggle("aa");
// console.log(a.classList);
// let span = document.querySelector("span");
// console.log(span, span.style.width, span.style.backgroundColor);
// console.log(getComputedStyle(span).fontSize);
let con = document.querySelector(".con");
console.log(con.children);
let p = document.querySelector("p");
console.log(p, p.nextElementSibling);
let span = document.querySelector("span");
console.log(span.previousElementSibling);
let img = document.createElement("img");
let div = document.querySelectorAll(".con");
p.appendChild(img);
// p.remove();
</script>
</body>
</html>10.4 元素的创建与删除
创建删除元素：createElement创建 appendChild将元素插入文档 remove删除元素
扫一扫
3247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
