JavaScript 快速入门
1.JavaScript 介绍
- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中,每一个浏览器都具备解析JavaScript 的引擎。
- 脚本语言:不需要编译,就可以被浏览器直接解析执行了。
- 核心功能就是增强用户和HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
- 1995 年,NetScape (网景)公司,开发的一门客户端脚本语言:LiveScript。后来,请来SUN 公司的专家来 进行修改,后命名为:JavaScript。
- 1996 年,微软抄袭 JavaScript 开发出 JScript 脚本语言。
- 1997 年,ECMA (欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,统一了所有客户 端脚本语言的编码方式
2.js的作用
和用户交互,实现页面的动态效果的:
- 操作浏览器:用户做某些操作,让js操作浏览器 前进一步、后退一步、弹窗、刷新页面等等
- 操作网页:用户做某些操作,让js操作网页 操作网页样式、操作标签内容、操作属性
<!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>
</body>
<script>
</script>
</html>
- 创建一个 HTML。
- 在< body>标签下面编写一个
JavaScript 基本语法
1.js的注释
<script>
//单行注释
/*
多行注释
多行注释
多行注释
*/
</script>
2.输入输出语句
<script>
//1. 弹窗输出
alert("hello, world1");
//2. 输出到页面。可输出html代码
document.write("<h1>hello, world2</h1>");
//3. 输出到浏览器的控制台
console.log("hello, world3");
</script>
3.变量和常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量定义</title>
</head>
<body>
<script>
//----------定义变量---------------
//定义整数
let v = 1;
console.log(v);
//定义小数
v = 3.14;
console.log(v);
//定义布尔
v = true;
console.log(v);
//定义字符串
v = "hello";
console.log(v);
//定义对象
v = new Date();
console.log(v);
//----------定义常量---------------
const PI = 3.14;
console.log(PI);
//修改常量值,会报错
PI = 1;
</script>
</body>
</html>
4.let和var的区别
- 在ES5及更低版本中,使用
var定义变量 - 在ES6及更高版本中,使用
let定义变量 - 两者的区别是:
let定义变量仅在当前代码块有效;var定义变量是全局变量let不允许重复定义变量;var允许重复定义变量- 开发中建议使用
let定义变量,语法更严谨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>var和let</title>
</head>
<body>
<script>
//--------var和let的区别-----------
//1. var定义的不具备块级作用域的特征,在{}里用var定义的变量,{}之外也可访问
// let定义的是局部变量,具备块级作用域的特征,只在let所在的块{}内有效,{}外不能访问
{
var a = "1a";
let b = "2b";
}
console.log(a);//输出结果:1a
console.log(b);//运行时报错
//2. var可重复定义变量;let不能重复定义变量
var v = 1;
var v = 2;
console.log(v);//正常运行,输出结果:2
let l = 1;
let l = 2;
console.log(l);//运行时报错,因为let不允许重复定义变量
</script>
</body>
</html>
5.数据类型
| 数据类型 | 描述 | 示例 |
|---|---|---|
number | 数字类型 | 1, 2, 3, 3.14 |
boolean | 布尔类型 | 布尔类型true, false |
string | 字符串类型 | 字符串"hello", 'hello' |
object | 对象类型 | new Date(), null |
undefined | 未定义类型 | 代表变量未定义undefined |
| bigint | 大整数 | 例如:let num = 10n |
6.typeof 方法
typeof 用于判断变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>typeof方法</title>
</head>
<body>
</body>
<script>
let l1 = true;
document.write(typeof(l1) + "<br>"); // boolean
let l2 = null;
document.write(typeof(l2) + "<br>"); // object js原始的一个错误
let l3;
document.write(typeof(l3) + "<br>"); // undefined
let l4 = 10;
document.write(typeof(l4) + "<br>"); // number
let l5 = "hello";
document.write(typeof(l5) + "<br>"); // string
let l6 = 100n;
document.write(typeof(l6) + "<br>"); // bigint
</script>
</html>
7.算数运算符
-
js也有:
+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,!三元运算 等等 -
需要说明的有:
==和===:
| 运算符 | 描述 | 示例 |
|---|---|---|
== | 比较值。只要值一样,就是true | 1=="1",结果是true |
===(推荐) | 比较值和类型。只有值和类型都一样,才是true | 1==="1",结果是false |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script>
//1. ==和===
let v1 = 3;
let v2 = "3";
console.log(v1 == v2); //输出结果:true。只要值相等,结果即是true
console.log(v1 === v2);//输出结果:false。只有值和类型都相同,结果才是true
//2. + - * /
console.log("2" + 1);//输出结果:21。 有字符串的加法是拼接字符串
console.log("2" - 1);//输出结果:1。 把字符串转换成数字再运算
console.log("a" - 1);//输出结果:NaN。字符串不能转换成数字,结果NaN:Not a Number
console.log("2" * 3);//输出结果:6
console.log("10" / 2);//输出结果:5
console.log("10" / 0);//输出结果:Infinity。表示数字无穷大
</script>
</body>
</html>
8.比较运算符
| 运算符 | 说明 |
|---|---|
| == | 判断值是否相等 |
| === | 判断数据类型和值是否相等 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| != | 不等于 |
9.逻辑运算符
| 运算符 | 说明 |
|---|---|
| && | 逻辑与,并且的功能 |
| || | 逻辑或,或者的功能 |
| ! | 取反 |
10.三元运算符
- 三元运算符格式
- (比较表达式) ? 表达式1 : 表达式2;
- 执行流程
- 如果比较表达式为true,则取表达式1
- 如果比较表达式为false,则取表达式2
11.流程控制和循环语句
- js也有:
if, else, else if, while, switch, for - 特殊的是if判断:任何类型的数据,都可以作为判断条件
- boolean类型:true/false
- number类型:0是false,非0是true
- string类型:空串
""是false,非空字符串是true - object类型:null是false,非null是true
- undefined类型:始终是false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
</head>
<body>
<script>
// if判断
let v = true;
v = 1; //number类型:0为false;非0为true
v = "";//string类型:""为false;非空串为true
v = null;//object类型:null为false;非null为true
v = undefined;//undefined类型:始终为false
if (v) {
console.log("true");
}else{
console.log("false");
}
</script>
</body>
</html>
<!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>
</body>
<script>
//if语句
let month = 3;
if(month >= 3 && month <= 5) {
document.write("春季");
}else if(month >= 6 && month <= 8) {
document.write("夏季");
}else if(month >= 9 && month <= 11) {
document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
document.write("冬季");
}else {
document.write("月份有误");
}
document.write("<br>");
//switch语句
switch(month){
case 3:
case 4:
case 5:
document.write("春季");
break;
case 6:
case 7:
case 8:
document.write("夏季");
break;
case 9:
case 10:
case 11:
document.write("秋季");
break;
case 12:
case 1:
case 2:
document.write("冬季");
break;
default:
document.write("月份有误");
break;
}
document.write("<br>");
//for循环
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
//while循环
let n = 6;
while(n <= 10) {
document.write(n + "<br>");
n++;
}
</script>
</html>
12.数组
- 数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
- 定义格式
- let 数组名 = [元素1,元素2,…];
- 索引范围
- 从 0 开始,最大到数组长度-1
- 数组长度 数组名.length
- 数组高级运算符…
- 数组复制
- 合并数组
- 字符串转数组
<!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>
</body>
<script>
//定义数组
let arr = [10,20,30];
//arr[3] = 40; js中的数组长度可变
//遍历数组
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>");
}
document.write("==============<br>");
// 数组高级运算符 ...
//复制数组
let arr2 = [...arr];
//遍历数组
for(let i = 0; i < arr2.length; i++) {
document.write(arr2[i] + "<br>");
}
document.write("==============<br>");
//合并数组
let arr3 = [40,50,60];
let arr4 = [...arr2 , ...arr3];
//遍历数组
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("==============<br>");
//将字符串转成数组
let arr5 = [..."heima"];
//遍历数组
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}
</script>
</html>
13.函数
普通函数
//定义
function add(a, b){
return a+b;
}
//调用
let result = add(1, 2);
匿名函数
//1.把匿名函数赋值给一个变量,通过变量名调用
let fn = function(){
console.log("fn");
}
fn();
//2.把匿名函数作为其它函数的实参传递进去
setInterval(function(){
console.log("aaa");
}, 2000)
注意:
- js的函数没有重载,同名函数会覆盖掉
- js的函数,形参个数与实参个数无关,仅仅是通过函数名称调用的。建议:形参个数和实参个数相同
JavaScript DOM
DOM 介绍
- dom:Document Object Model,文档对象模型,可以理解为是把整个html网页封装成的对象,dom对象提供了操作网页的方法
- 作用:操作网页的
- 可以操作标签:获取标签、创建标签、插入标签、删除标签
- 可以操作属性:获取标签的属性值,设置标签的属性值
- 可以操作css样式
DOM树

网页被加载到浏览器的内存中后,网页上所有的标签、属性、文本全部都会转换成节点对象,然后按照层级结构形成一个树形结构,这棵树叫dom树
获取标签
1. ES5老版本获取标签方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
getElementById("id值") | 根据id获取标签对象 | 标签的id | Element |
getElementsByName("name值") | 根据标签name获取标签对象 | 标签的name | Element类数组 |
getElementsByTagName("标签名") | 根据标签名称获取标签对象 | 标签名称 | Element类数组 |
getElementsByClassName("类名") | 根据标签class获取标签对象 | 标签的class | Element类数组 |
<!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>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
//1. getElementById() 根据id属性值获取元素对象
let div1 = document.getElementById("div1");
//alert(div1);
//2. getElementsByTagName() 根据元素名称获取元素对象们,返回数组
let divs = document.getElementsByTagName("div");
//alert(divs.length);
//3. getElementsByClassName() 根据class属性值获取元素对象们,返回数组
let cls = document.getElementsByClassName("cls");
//alert(cls.length);
//4. getElementsByName() 根据name属性值获取元素对象们,返回数组
let username = document.getElementsByName("username");
//alert(username.length);
//5. 子元素对象.parentElement属性 获取当前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
2. ES6提供的获取标签方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
querySelector("选择器") | 获取一个标签 | 选择器字符串 | Element |
querySelectorAll("选择器") | 获取多个标签 | 选择器字符串 | Element类数组 |
document对象提供了创建标签Element的方法
注意:创建出来的标签不会立即生效,必须要插入到dom树里
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
createElement("标签名称") | 创建标签 | 标签名称,比如:option | Element对象 |
3. 插入标签
标签Element对象提供了插入标签的方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
父标签对象.appendChild(element) | 追加插入子标签 | 要插入的标签Element |
4. 删除标签
标签Element对象提供了删除的方法
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
remove() | 删除标签 |
<!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>
<select id="s">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
<script>
//1. createElement() 创建新的元素
let option = document.createElement("option");
//为option添加文本内容
option.innerText = "深圳";
//2. appendChild() 将子元素添加到父元素中
let select = document.getElementById("s");
select.appendChild(option);
//3. removeChild() 通过父元素删除子元素
//select.removeChild(option);
//4. replaceChild() 用新元素替换老元素
let option2 = document.createElement("option");
option2.innerText = "杭州";
select.replaceChild(option2,option);
</script>
</html>
Attribute 属性的操作
| 方法 | 说明 | 参数 | 返回值 |
|---|---|---|---|
getAttribute(attrName) | 获取属性值 | 属性名称 | 属性值 |
setAttribute(attrName, attrValue) | 设置属性值 | 属性名称,属性值 | |
removeAttribute(attrName) | 删除属性 | 属性名称 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
//1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","https://www.baidu.com");
//2. getAttribute() 获取属性
let value = a.getAttribute("href");
//alert(value);
//3. removeAttribute() 删除属性
//a.removeAttribute("href");
//4. style属性 添加样式
//a.style.color = "red";
//5. className属性 添加指定样式
a.className = "aColor";
</script>
</html>
Text 文本的操作
| 属性名 | 说明 |
|---|---|
| innerText | 添加文本内容,不解析标签 |
| innerHTML | 添加文本内容,解析标签 |
<!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>
<div id="div"></div>
</body>
<script>
//1. innerText 添加文本内容,不解析标签
let div = document.getElementById("div");
div.innerText = "我是div";
//div.innerText = "<b>我是div</b>";
//2. innerHTML 添加文本内容,解析标签
div.innerHTML = "<b>我是div</b>";
</script>
</html>
JavaScript 事件
事件介绍
- 事件:用户在浏览器上做一些事情、动作
- 事件源:事件、动作发生在哪个标签、对外上,即:事件发生的源头
- 响应行为:事件发生之后,要执行的代码,通常是封装成函数来调用
常见的事件
| 事件属性 | 描述,监听什么 |
|---|---|
| onclick | 监听鼠标单击 |
| ondblclick | 监听鼠标双击 |
| onsubmit | 监听表单提交了,事件源是表单form标签 |
| onchange | 监听域内容改变,通常用于监听下拉框的选项变化 |
| onload | 监听加载完成,通常用于监听浏览器加载完了页面 |
| onfocus | 监听获取焦点(光标) |
| onblur | 监听失去焦点(光标) |
| onkeydown | 监听键盘按键按下 |
| onkeypress | 监听键盘按键按下或按住 |
| onkeyup | 监听键盘按键弹起 |
| onmousedown | 监听鼠标按键按下 |
| onmouseup | 监听鼠标按键弹起 |
| onmouseover | 监听鼠标移入 |
| onmouseout | 监听鼠标移出 |
| onmousemove | 监听鼠标移动 |
绑定事件
1. 普通函数方式
<input type="button" value="点击弹窗1" onclick="show1()">
<script>
function show1() {
alert("点我干嘛");
}
</script>
2. 匿名函数方式
<input type="button" value="点击弹窗2" id="btn2">
<script>
document.getElementById("btn2").onclick = function(){
alert("点我干嘛");
}
</script>
按住 |
| onkeyup | 监听键盘按键弹起 |
| onmousedown | 监听鼠标按键按下 |
| onmouseup | 监听鼠标按键弹起 |
| onmouseover | 监听鼠标移入 |
| onmouseout | 监听鼠标移出 |
| onmousemove | 监听鼠标移动 |
绑定事件
1. 普通函数方式
<input type="button" value="点击弹窗1" onclick="show1()">
<script>
function show1() {
alert("点我干嘛");
}
</script>
2. 匿名函数方式
<input type="button" value="点击弹窗2" id="btn2">
<script>
document.getElementById("btn2").onclick = function(){
alert("点我干嘛");
}
</script>
8464

被折叠的 条评论
为什么被折叠?



