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 方法删除元素。

注意事项：

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

2.4.2 函数

语法结构：

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

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

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

注意事项：

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 Person(name) {
       this.name = name;
       this.method = function() {};
   }
   let obj = new Person('小明');
   

   注意事项：

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

三、jQuery

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

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