JavaScript 基础语法与 jQuery 使用指南

2.4 对象

2.4.1 数组

创建数组两种方式：

1. 使用 new 关键字创建：

let arr = new Array();

2. 使用字面量方式创建 [常用]

let arr = [];
let arr2 = [1, 2, 'haha', false];

数组操作

1. 读：使用下标的方式访问数组元素 (从 0 开始)
2. 增：通过下标新增，或者使用 push 进行追加元素
3. 改：通过下标修改
4. 删：使用 splice 方法删除元素

注意事项：

1. 如果下标超出范围读取元素，则结果为 undefined
2. 不要给数组名直接赋值，此时数组中的所有元素都没了。相当于本来 arr 是一个数组，重新赋值后变成字符串了。

2.4.2 函数

语法：

// 创建函数/函数声明/函数定义
function 函数名 (形参列表) {
  函数体
  return 返回值;
}
// 函数调用
函数名 (实参列表);
// 不考虑返回值
返回值 = 函数名 (实参列表);
// 考虑返回值

注意事项：

1. 函数定义并不会执行函数体内容，必须要调用才会执行。调用几次就会执行几次。
2. 调用函数的时候进入函数内部执行，函数结束时回到调用位置继续执行。可以借助调试器来观察。
3. 函数的定义和调用的先后顺序没有要求。(这一点和变量不同，变量必须先定义再使用)

参数：

1. 实参和形参之间的个数可以不匹配。但是实际开发一般要求形参和实参个数要匹配
2. 如果实参个数比形参个数多，则多出的参数不参与函数运算
3. 如果实参个数比形参个数少，则此时多出来的形参值为 undefined

2.4.3 对象

对象：在 JS 中，字符串，数值，数组，函数都是对象。每个对象中包含若干的属性和方法。 属性：事物的特征。 方法：事物的行为。

创建对象：

1. 使用 字面量 创建对象 [常用]

var a = {}; // 创建了一个空的对象
var student = {
  name: '鸡哥',
  height: 25,
  weight: 2.5,
  sayHello: function() {
    console.log("你干嘛");
  }
};

注意事项：

• 使用 { } 创建对象
• 属性和方法使用键值对的形式来组织。
• 键值对之间使用 , 分割。最后一个属性后面的 , 可有可无
• 键和值之间使用 : 分割。
• 方法的值是一个匿名函数。

2. 使用 new Object 创建对象

var student = new Object();
student.name = "鸡哥";
student.height = 25;
student['weight'] = 2.5;
student.sayHello = function() {
  console.log("你干嘛");
};

3. 使用 构造函数 创建对象

function 构造函数名 (形参) {
  this.属性 = 值;
  this.方法 = function() {};
}
let obj = new 构造函数名 (实参);

注意事项：

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象。
• 构造函数的函数名首字母一般是大的。
• 构造函数的函数名可以是名词。
• 构造函数不需要 return
• 创建对象的时候必须使用 new 关键字。

三、jQuery

jQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，于 2006 年发布。它封装 JavaScript 常用功能代码，提供了简洁而强大的选择器和 DOM 操作方法。使用 jQuery 可以轻松地选择和操作 HTML 元素，从而减少了开发人员编写的代码量，提高了开发效率。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。jQuery 对于事件的处理也进行了简化，提供了一个简单的 API 来绑定、触发和处理事件，使开发人员能够更方便地处理各种交互行为。

3.1 引入依赖

<script src="jQuery 的 URL"></script>

参考地址：jQuery Releases

3.2 jQuery 语法

基础语法：

$(selector).action()

解释：

• $() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素。
• Selector 选择器，用来"查询"和"查找" HTML 元素
• action 操作，执行对元素的操作

3.3 jQuery 选择器

我们通过 jQuery 选择器来选择一些 HTML 元素。然后对元素进行操作。jQuery 选择器 基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器。jQuery 中所有选择器都以 $ 开头：$().

3.4 jQuery 事件

事件组成：

1. 事件源：哪个元素触发的
2. 事件类型：是点击，选中，还是修改？
3. 事件处理程序：进一步如何处理。往往是一个回调函数。

常见事件：

3.5 操作元素

3.6 常用方法

1. jQuery 的 attr() 方法用于获取属性值。
2. css() 方法设置或返回被选元素的一个或多个样式属性
3. 添加 HTML 内容 3.1. append() : 在被选元素的结尾插入内容 3.2. prepend(): 在被选元素的开头插入内容 3.3. after(): 在被选元素之后插入内容 3.4. before(): 在被选元素之前插入内容
4. 删除元素和内容 4.1. remove() : 删除被选元素（及其子元素） 4.2. empty(): 删除被选元素的子元素。