JavaScript 基础语法与 jQuery 快速入门

2.4 对象

2.4.1 数组

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

1. 使用 new 关键字：

let arr = new Array();

2. 使用字面量方式（更常用）：

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

操作与注意事项：

• 读：通过下标访问（从 0 开始），越界返回 undefined。
• 增：通过下标新增或使用 push 追加。
• 改：通过下标修改。
• 删：使用 splice 方法删除。

注意不要给数组名直接赋值为其他类型（如字符串），否则原数组结构会被覆盖。

2.4.2 函数

函数定义后不会立即执行，必须调用才会运行。定义和调用的顺序没有严格要求，这与变量不同。

// 函数定义
function functionName(params) {
    // 函数体
    return returnValue;
}

// 函数调用
functionName(args);

参数规则：

• 实参与形参个数不必严格匹配，但实际开发建议保持一致。
• 实参多于形参时，多余参数不参与运算。
• 实参少于形参时，多余形参值为 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.sayHello = function() { console.log('你好'); };

3. 构造函数

function Student(name) {
    this.name = name;
}
let obj = new Student('小明');

构造函数首字母通常大写，内部使用 this 指向当前对象，无需 return。

三、jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，封装了常用功能，提供了强大的选择器和 DOM 操作方法，能显著减少代码量并提高开发效率。

3.1 引入依赖

<script src="jquery.min.js"></script>

官方文档地址：https://releases.jquery.com/

3.2 基础语法

核心语法结构如下：

$(selector).action()

• $()：全局函数，用于选择和操作元素。
• selector：选择器，用于查询 HTML 元素。
• action：操作，执行具体的动作。

3.3 选择器

jQuery 选择器基于 CSS 选择器，并扩展了一些自定义功能：

3.4 事件处理

常见的事件绑定方式：

3.5 操作元素

常用的内容操作方法：

3.6 常用方法

• 属性操作：attr() 获取或设置属性。
• 样式操作：css() 设置或返回样式属性。
• 内容插入：
  • append()：结尾插入
  • prepend()：开头插入
  • after()：之后插入
  • before()：之前插入
• 删除操作：
  • remove()：删除元素及其子元素
  • empty()：清空子元素

掌握这些基础概念后，你就能轻松上手前端开发的核心流程了。