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。
• 不要给数组名直接赋值，否则原数组内容会丢失，变量类型也会改变。

2.4.2 函数

语法结构：

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

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

注意事项：

1. 函数定义不会立即执行，必须调用才会运行。
2. 调用时进入函数内部，执行完毕后返回调用位置继续执行。
3. 函数定义和调用的顺序没有严格要求（与变量不同）。

参数处理：

• 实参与形参个数可以不匹配，但实际开发建议保持一致。
• 若实参多于形参，多余参数不参与运算。
• 若实参少于形参，多余形参值为 undefined。

2.4.3 对象

在 JS 中，字符串、数值、数组、函数本质上都是对象，包含属性和方法。属性代表特征，方法代表行为。

创建对象：

1. 字面量创建（常用）：

var student = {
    name: '张三',
    height: 175,
    weight: 65,
    sayHello: function() {
        console.log("你好");
    }
};

注意键值对之间用逗号分隔，最后一个属性后的逗号可有可无。

2. 使用 new Object 创建：

var student = new Object();
student.name = "张三";
student['weight'] = 65;
student.sayHello = function() { console.log("你好"); };

3. 使用构造函数创建：

function Student(name) {
    this.name = name;
    this.sayHello = function() { console.log("你好"); };
}
let obj = new Student('李四');

注意构造函数首字母通常大写，内部使用 this 指向当前对象，无需 return，实例化时必须加 new。

三、jQuery

jQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，封装了常用的 DOM 操作、事件处理和 Ajax 功能，能显著减少代码量并提高开发效率。

3.1 引入依赖

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

官方下载地址：jQuery Releases

3.2 jQuery 语法

基础语法遵循链式调用模式：

$(selector).action()

• $()：全局函数，用于选择 HTML 元素。
• Selector：选择器，用于查询元素。
• action：操作方法。

3.3 jQuery 选择器

基于 CSS 选择器扩展，所有选择器都以 $ 开头：

3.4 jQuery 事件

事件由事件源、事件类型和处理程序组成。常见事件如下：

3.5 操作元素

3.6 常用方法

1. 获取属性： attr() 方法用于获取属性值。
2. 样式操作： css() 方法设置或返回一个或多个样式属性。
3. 添加内容：
   • append()：在结尾插入内容。
   • prepend()：在开头插入内容。
   • after()：在之后插入内容。
   • before()：在之前插入内容。
4. 删除内容：
   • remove()：删除被选元素及其子元素。
   • empty()：仅删除被选元素的子元素。