找往期文章包括但不限于本期文章中不懂的知识点：
个人主页：我要学编程程(ಥ_ಥ)-CSDN博客
所属专栏：速通前端
目录
[JavaScript 对象](#JavaScript 对象)
[JQuery 语法](#JQuery 语法)
介绍
JavaScript(简称JS)，与Python一样，是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。
用一张图来描述 HTML、CSS、JavaScript 三者之间的关系：
HTML是页面的基本框架，CSS是让页面变得更加好看，而JavaScript是让页面动起来。
例如，下面的操作，就会使页面动起来。
基础语法
JavaScript 与 HTML、CSS不同，它不是标签语言，而是使用我们平常写的代码。
创建变量
创建变量有三种方式：
|-------|--------------------------------|-------------------|
| 关键字 | 说明 | 示例 |
| var | 早期JS中声明变量的关键字，作用域在该语句的函数内 | var name = '张三'; |
| let | ES6中新增的声明变量的关键字，作用域为该语句所在的代码块内 | let name = '张三'; |
| const | 声明常量，即声明后不能修改 | const name = '张三' |
代码演示：
html
<body>
<!-- JS代码只有处于script标签中才生效 -->
<script>
// 定义变量
// 1、使用 var
var name1 = '张三';
// 2、使用 let
var name2 = '张三';
// 3、使用 const
const name3 = '张三';
// 打印变量
console.log(name1);
console.log(name2);
console.log(name3);
</script>
</body>上述代码我们直接去运行的话，是不会有任何结果的。如下所示：
如果想要看到结果，得去调试，摁住 F12 或者 Fn + F12。
这里的打印可以理解为是打印在日志上面的。
注意：
1、JavaScript 是一门动态弱类型的语言，不像Python那样完全无类型，这里的类型是使用 var 或者 let，但你也可以不指定类型，因此被称为弱类型，动态则是某个变量在该时刻是整型，在下一时刻就可能是字符串，是属于动态变化的。
当我们使用 var 或者 let 去声明某个变量时，这个变量只会在这个函数中生效，但是如果我们不使用 var 或者 let 声明的话，这个变量的声明周期就是全局的了。
2、变量命名规则：1）组成字符可以是任何字母、数字、下划线（_）或美元符号 ($)；2）数字不能作为开头；3）建议使用Java中的驼峰命名法。
3、+ 表示字符串拼接，和Java中是一样的。
4、\n 表示换行。
数据类型
JavaScript中的数据类型与Java 类似，也是分为两种。一种是原始数据类型，另一种是引用数据类型。
|-----------|-----------------------------|
| 数据类型 | 说明 |
| number | 数字（不分整数与小数） |
| string | 字符串（与Python一样，可以使用单引号或者双引号） |
| boolean | 布尔类型，true 为真，false 为假 |
| undefined | 表示变量未初始化，该变量的值为 undefined |
代码演示：
上面的是原始数据类型，还有另外一种引用数据类型，与Java是一样的，null 属于引用类型。
运算符
JavaScript 的运算符 与 Java 的运算符是基本相同的。
|---------|---------------------------------|------------------|
| 运算符类型 | 运算符 | 说明 |
| 算术运算符 | +、-、*、/、% | / 不一样，其余与Java一样 |
| 自增自减运算符 | ++、-- | 与Java一样 |
| 赋值运算符 | =、+=、-=、*=、/=、%- | /= 不一样，其余与Java一样 |
| 比较运算符 | >、<、>=、<=、!=、!==、==、=== | 详情见代码演示 |
| 逻辑运算符 | &&、||、！ | 详细见下 |
| 位运算 | &、|、^、~ | 详细见下 |
| 移位运算符 | <<、>>、>>> | 与Java一致 |
| 三目运算符 | 条件表达式 ？true_value : false_value | 与Java一致 |
代码演示：
1、算术运算符：
2、比较运算符：
简单记忆：
第一种，使用与Java中一样的 != 或者 == 时，只会比较字面值；当在此基础上，再加了个 = 时，就是严格比较类型与字面值了。
第二种，少个等号，只是比较字面值，多个等号，就会比较类型与字面值了。
3、Java 与 JavaScript 的移位运算符、三目运算符的效果都是一样的，逻辑运算符、 位运算符 稍有些差别，但是不大，我们不去做前端无需了解这么细。但下面给出差别之处，感兴趣的小伙伴可以用代码来感受一下。
在JavaScript中，逻辑运算的结果可以是布尔值或最后一个操作数，而Java中逻辑运算的结果总是布尔值。
Java的位运算是作用于整型，而JavaScript可以对任意数值进行位运算（会转换为32位整数），这是因为 JavaScript 的number类型中包含小数，但最终的结果是整数。
JavaScript 对象
JavaScript 中的对象 与 Java 中的对象，概念是一样的，但实现的方式却天差地别。JavaScript 也是一切皆对象。
数组
创建数组的方式有两种：
1、使用 new 关键字创建；2、使用 字面量的方式创建。
注意：数组中的类型不要求是同一个类型。即可以有字符串、数字、 布尔等类型同时存在。
既然数组是一个对象，那么我们肯定是可以对这个对象进行一些增删改查的操作的。只不过这里和Java 的增删改查有些不一样，JavaScript 中的数组，类似Java中的顺序表。
数组的相关操作
1、增加：
往数组中增加元素有两种方法：1）使用push方法在数组的最后增加元素；2）使用 "[ ]" 在数组的最后增加元素。
代码演示：
上述是正常增加的情况，我们还可以"恶意"增加元素。
代码演示：
javascript
<Script>
let arr = ['hhh', true, 123];
console.log(arr);
// "恶意"增加的
arr[100] = '恶意';
// 注意：push方法并不支持"恶意"增加的操作
// 下面这种方式，只是在101下标与102下标插入了两个元素
arr.push(1000, '恶意');
arr[1000] = '123';
console.log(arr);
</Script>运行结果：
2、删除：使用 splice 方法来删除元素
代码演示：
javascript
<Script>
let arr = ['hhh', true, 123];
console.log(arr);
// "恶意"增加的
arr[100] = '恶意';
// 注意：push方法并不支持"恶意"增加的操作
// 下面这种方式，只是在101下标与102下标插入了两个元素
arr.push(1000, '恶意');
arr[1000] = '123';
console.log(arr);
// 删除元素
// splice方法的参数分别为：删除的起始下标与删除的个数
arr.splice(1000, 1);
console.log(arr);
</Script>运行结果：
从这里我们也可以看出，JavaScript 中的数组可以实现自动扩容。
注意：即使要删除的位置不存在，也是不会报错的。例如，删除的位置是10000，但实际数组并没有这么大，这时并不会报数组越界之类的错误。
3、修改：这个与Java中是一样的，通过 "[ ]" 的下标索引来进行访问修改
代码演示：
javascript
<Script>
let arr = [1,'a',true];
arr[2] = false;
console.log(arr);
</Script>运行结果：
4、查询：查询就是访问，这个也是与Java一样，使用 "[ ]" 的下标索引进行访问。
代码演示：
javascript
<Script>
let arr = [1,'a',true];
console.log("数组下标为2的位置，修改之前的值："+arr[2]);
arr[2] = false;
console.log("数组下标为2的位置，修改之后的值："+arr[2]);
</Script>运行结果：
注意：如果读取范围超过数组的下标，那么读取到的值就是 undefined。
函数
语法格式：
javascript
// 函数的定义
function 函数名(参数列表) {
... // 函数体
[return 返回值;] // 可有可无
}
// 函数的调用：
函数名(参数列表)代码演示：
javascript
<Script>
function add1(a, b) {
console.log(a+b);
}
function add2(a, b) {
return a+b;
}
add1(1,2);
console.log(add2(1,2));
</Script>运行结果：
注意：
1、函数的调用位置 与 函数的定义位置 并不冲突，即谁先谁后无所谓。
2、函数的形参 与 实参 的个数可以不一致，但实际开发中都是一致的。那就会出现两种情况，一种是 实参的个数 多于 形参，另一种是形参的个数 少于 形参。
代码演示：
javascript
<Script>
function add1(a, b) {
console.log(a+b);
}
// 实参的个数多于形参
add1(1,2,3);
// 实参的个数少于形参
add1(1);
</Script>运行结果：
在 JavaScript 中，NaN（Not-a-Number）是一个特殊的值，用来表示一个未定义或不可表示的值。上述代码的 add1(1) 由于缺少了一个参数，另外一个参数就默认是 undefined，因此最终相加的结果就是 NaN。
函数表达式
函数表达式类似于Java中的lambda表达式，这里是匿名函数。
代码演示：
javascript
<Script>
// 函数表达式（匿名函数）
let sum = function(nums) {
let ret = 0;
for (let i = 0; i < nums.length; i++) {
ret += nums[i];
}
return ret;
}
let nums = [1,2,3,4,5];
console.log(sum(nums));
</Script>运行结果：
注意：这里的sum此时可以理解为函数的名称，后续也可以多次调用sum函数。其实就是将函数用一个变量来表示了。
对象
在 JavaScript 中，字符串，数值，数组，函数这些都是属于对象，对象包含两大部分：一个是属性，一个是方法。
创建对象有三种方式：
一、使用 "{ }" 的方式直接创建对象：
语法格式：
javascript
let 对象名 = {
key: value
...
};代码演示：
javascript
<script>
let a = {}; // 创建一个空对象
let student = {
// 属性
name: "张三",
age: 20,
gender: "男",
// 方法
sayHello: function () {
console.log("Hello, My name is " + this.name + "!");
}
};
console.log(student.name);
console.log(student.age);
console.log(student.gender);
student.sayHello();
</script>注意：
1、在 JavaScript中，对象中的属性与方法都是以键值对的方式存在的。方法就是以匿名函数赋值给了对应的键。
2、键值对之间使用逗号进行分隔，键与值之间使用 ": (:+空格)"进行分隔。
3、对象属性的访问还可以使用 "["属性"]" 去进行访问：
javascript
console.log(student[name]); // error
console.log(student["name"]);4、对象在创建出来以后，也是可以去修改的。
javascript
// 修改对象的属性
student.name = "李四";
console.log(student.name);
// 增加对象的属性
student.job = "学生";
console.log(student.job);
// 删除对象的属性
delete student.job;
console.log(student.job);
console.log(student);运行结果：
二、使用 new Object 来创建对象：
语法格式：
javascript
let 对象名 = new Object();
对象名.属性 = 属性值;代码演示：
javascript
<script>
let student = new Object();
student.name = "张三";
student.age = 20;
student.gender = "男";
console.log(student);
</script>运行结果：
方式二与方式一本质上是一样的，方式二的做法是 new Object，而方式一的做法是 {}，但两者本质上都是空对象，后续的添加操作也是一致的。
三、使用 构造函数 创建对象：
语法格式：
javascript
function 构造函数名(形参列表) {
this.属性 = 值,
...
}
let 对象名 = new 构造函数名(实参列表);代码演示：
javascript
<script>
// 使用构造函数的方式创建对象
function Student(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let student = new Student('张三', 20, '男');
console.log(student);
</script>运行结果：
基本语法规范
JS 与 CSS一样是来辅助HTML的，也是需要引入的。同样JS的引入方式与CSS也是一致的。
|------|--------------------------------|
| 引入方式 | 说明 |
| 行内样式 | 直接嵌入到 html 标签内部 |
| 内部样式 | 定义<script>标签，写到 script 标签中 |
| 外部样式 | 定义<script>标签，通过src属性引入外部js文件 |
注意：如果引入的方式不对，那么浏览器无法将这些 JavaScript 的代码正确转换。
代码演示：
1、行内样式：
行内样式在日常开发的过程中，基本上不用，因此我们简单了解一下即可。
2、内部样式：
前面我们写的代码都是属于内部样式的，这里也就不再演示了。
3、外部样式：
外部样式的导入有很多种，但主要是分为两类：一种，是导入本地的；另一种是导入别的主机上的。
代码演示：
javascript
<head>
<meta charset="UTF-8">
<title>这是页面标题</title>
<!-- 导入当前目录下的 script.js 文件 -->
<script src="script.js"></script>
</head>从别的主机上导入，就是通过网络传输的，也就是导入依赖。
JQuery
介绍
JQuery是使用JavaScript代码来编写的一个.js 文件，简称为库。
由于我们在编写不同项目的代码时，经常会出现重复实现一个函数的事情，大佬们为了节省重复造轮子的时间，就会将常用的函数、对象等全部写到一个文件中，这个文件就是JQuery，我们也称为"库"，因此后续在使用JQuery时，需要导入这些文件，也就是导入库。
由于JQuery的原生库是别的主机上，我们去导入时，需要通过网络传输，网络传输的速度是慢于本地访问(硬盘读取)的速度，因此我们最好是将JQuery下载到本地，这样去导入时，所需的时间也会比较短。而导入的方式也是输入外部样式：
javascript
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>当然，我们也可以将这个文件下载到本地，这样后面再去导入就很简单了：
javascript
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>通过JQuery，可以快速、简洁的来操作页面对象。
JQuery 语法
JQuery 语法是通过选取HTML元素，并对选取的元素执行某些操作。
语法格式：
javascript
$(selector).action()
// $() 是由JQuery提供的全局函数，可以选择和操作HTML元素
// selector选择器，用于"查询"HTML元素
// action，对选择的元素进行操作简单来说，就是选择对应的HTML元素，执行相应的操作。
JQuery的代码通常都写在 document ready 函数中，这是为了防止文档在完全加载（就绪）之前运行JQuery 代码，即在文档加载完成后才可以对页面进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。document 是指整个文档对象，一个页面就是一个文档对象，使用document 来表示。
JQuery选择器
通过前面的学习，我们也知道JQuery是通过选择器来选取一些HTML元素，然后对这些元素进行相关操作，JQuery选择器是基于已经存在的CSS选择器，除此之外，还有一些自定义的选择器，JQuery 中所有选择器都以开头：()。
|----------------------|--------------------------------------------|
| 语法 | 描述 |
| ("\*")** | 选取所有元素（**\***可以理解为通配符） |
| **(this) | 选取当前 HTML 元素（代指某个具体的对象） |
| ("p")** | 选取所有 \
| ("p:last")** | 选取最后一个\
| ("#box")** | 选择所有 id="box"的元素 |
| **("intro.demo") | 选取所有 class="intro"且 class="demo"的元素（中间无空格） |
| ("intro .demo")** | 选取所有 class="intro"下class="demo"的元素（中间带有空格） |
| **("p .intro") | 选取 <p>下class 为 intro 的元素 |
| ("ul li:first")** | 选取\
| (":text")** | 选取所有 type="text"的\
[常用的JQuery选择器]
由于选择器非常的多，并且需求只是速通，因此这里就不再演示代码了。
JQuery事件
JavaScript 要想构建动态页面，就需要感知到用户的行为。
用户对于页面的一些操作(点击，选择，修改等)都会在浏览器中产生一个个事件，被JavaScript获取到，从而进行更复杂的交互操作。
事件是由三部分组成：事件源（发起者）、事件类型（干了啥）、事件处理程序（如何处理的）。
|--------------|---------------------------------|
| 事件 | 对应的代码 |
| 文档加载完成（就绪）事件 | (document).ready(function) |
| 点击事件 | (selector).click(function) |
| 双击事件 | (selector).dblclick(function) |
| 元素值发生改变事件 | (selector).change(function) |
| 鼠标悬停事件 | $(selector).mouseover(function) |
[常见的事件]
在操作元素的章节，再去具体演示。
操作元素
获取/设置元素内容
|---------------|------------------------|
| 方法 | 说明 |
| text([val]) | 设置或者返回所选元素的文本内容 |
| html([val]) | 设置或返回所选元素的内容（整个HTML标签） |
| val([val]) | 设置或返回表单字段的值 |
[常用的方法]
注意：[val] 代表标签内需要修改的值
代码演示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是页面标题</title>
<!-- 导入当前目录下的 script.js 文件 -->
<!-- <script src="script.js"></script>-->
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>
</head>
<body>
<!-- <button onclick="alert('Hello, World!');">点击我</button>-->
<div id="div">
<span class="mySpan">这是一个span</span>
<span class="mySpan">这是一个span</span>
<span class="mySpan">这是一个span</span>
</div>
<script>
$(document).ready(function(){
// 获取 class 为 mySpan 的元素的初始文本
let initialText = $("#div .mySpan").text();
console.log("初始文本: " + initialText);
});
// 设置文本内容并获取HTML内容
$("#div .mySpan").click(function(){
$(this).text("Hello World");
let updatedText = $(this).text();
console.log("更新后的文本: " + updatedText);
});
</script>
</body>
</html>运行结果：
这里的场景，我们也是经常会遇到：在我们登录某个平台时，就会弹出对应的验证码，而这个验证码在每点击一次之后，就会被修改的，只不过这里是一个固定的值。
注意：当 修改的内容 包括标签在内时，html方法会识别出来，但是text方法并不会（有些也可以，例如 <b>）。
获取/设置元素的属性
attr(）方法用于获取或者设置属性值。
代码演示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是页面标题</title>
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>
</head>
<body>
<a href="https://www.csdn.net/">csdn</a>
<script>
// 获取或者设置属性的值
console.log($("a").attr("href")); // 指定拿 href属性
// 点击a标签，就设置为 另一个URL
$("a").click(function(){
$(this).attr("href", "https://blog.csdn.net/2301_80854132?type=blog");
});
</script>
</body>
</html>运行结果：
这是一个非常令人反感的操作，正常来说在点击时，会跳转到CSDN的官网界面，但是如果设置了点击跳转的话，在点击a标签时，实际上会跳转到修改后的标签。这里我是修改成了自己的个人主页，但在生活中遇到的可就不一样了（全是广告）。
获取/设置CSS属性
CSS(）方法获取或者设置被选元素的一个或多个样式属性。
代码演示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是页面标题</title>
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="color: red;">这是一个div</div>
<script>
// 获取CSS属性
console.log($("div").css("color"));
// 设置CSS属性
$("div").click(function(){
$(this).css("color", ("green"));
});
</script>
</body>
</html>运行结果：
添加元素
添加HTML内容
|-----------|--------------|
| 方法 | 说明 |
| append() | 在被选元素的结尾插入内容 |
| prepend() | 在被选元素的开头插入内容 |
| after() | 在被选元素之后插入内容 |
| before() | 在被选元素之前插入内容 |
代码演示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是页面标题</title>
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<script>
// 在ol元素的尾部增加
$("ol").append("<li>item4</li>");
// 在ol元素的头部增加
$("ol").prepend("<li>item0</li>");
// 在ol元素之前增加
$("ol").before("<div>这是一个div<\div>");
// 在ol元素之后增加
$("ol").after("<div>这是一个div</div>");
</script>
</body>
</html>运行结果：
注意：这里的添加 与 html方法是一样的，可以识别出标签并转换。
删除元素
|----------|-------------------|
| 方法 | 说明 |
| remove() | 删除被选的元素（包括子元素） |
| empty() | 删除被选元素的子元素（不包括本身） |
代码演示：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是页面标题</title>
<script src="C:\Users\jiume\Desktop\jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<div id="div1">
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
</div>
<div id="div2">这是一个div</div>
<script>
// 删除被选元素（包括子元素）
$("ol").remove()
// 删除被选元素的子元素（不包括本身）
$("#div1").empty()
</script>
</body>
</html>运行结果：
这里的删除也是将HTML元素都进行了删除，并不单单只是删除了文本内容。
好啦！本期 速通前端篇------JavaScript 的学习之旅就到此结束啦！我们下一期再一起学习吧！