JavaScript 基础语法与 jQuery 入门指南

2.4 对象

2.4.1 数组

创建数组有两种常见方式：

1. 使用 new 关键字创建：

let arr = new Array();

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

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

数组操作：

• 读：使用下标的方式访问数组元素（从 0 开始）
• 增：通过下标新增，或者使用 push 进行追加元素
• 改：通过下标修改
• 删：使用 splice 方法删除元素

注意事项：

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

2.4.2 函数

语法结构：

// 创建函数/函数声明/函数定义
function 函数名 (形参列表) {
    // 函数体
    return 返回值;
}

// 函数调用
函数名 (实参列表);

// 不考虑返回值
// 返回值 = 函数名 (实参列表)
// 考虑返回值

注意事项：

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>

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 内容
   • append()：在被选元素的结尾插入内容
   • prepend()：在被选元素的开头插入内容
   • after()：在被选元素之后插入内容
   • before()：在被选元素之前插入内容
4. 删除元素和内容
   • remove()：删除被选元素（及其子元素）
   • empty()：删除被选元素的子元素。