JavaScript 基础语法与 jQuery 入门详解

对象与数组

数组操作

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

1. 使用 new 关键字：let arr = new Array();
2. 使用字面量方式（更常用）：let arr = []; 或 let arr2 = [1, 2, 'haha', false];

常见操作：

• 读：使用下标访问（从 0 开始），注意超出范围读取结果为 undefined。
• 增：通过下标新增，或使用 push 追加元素。
• 改：通过下标修改。
• 删：使用 splice 方法删除元素。

注意事项： 不要给数组名直接赋值为非数组类型（如字符串），否则原有元素会丢失。

函数

函数的基本结构如下：

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

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

核心要点：

1. 函数定义不会立即执行，必须调用才会运行。
2. 调用进入函数内部，结束时回到调用位置继续执行。
3. 函数定义和调用的顺序没有严格要求（这与变量不同）。
4. 实参与形参个数可以不匹配，但实际开发中建议保持一致。若实参过多，多余参数不参与运算；若实参过少，多余形参值为 undefined。

对象

在 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;

3. 构造函数创建：

function Student(姓名，身高) {
    this.name = 姓名;
    this.height = 身高;
}
let obj = new Student('小明', 175);

• 构造函数内部使用 this 表示当前构建的对象。
• 构造函数名首字母通常大写。
• 不需要 return，创建时必须使用 new 关键字。

jQuery 入门

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

引入依赖

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

官方下载地址：https://releases.jquery.com/

基础语法

$(selector).action()

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

选择器

jQuery 选择器基于 CSS 选择器，并扩展了一些自定义选择器。所有选择器都以 $ 开头。

事件处理

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

常用方法

• 文本内容：text() 设置或返回所选元素的文本内容。
• HTML 内容：html() 设置或返回所选元素的内容（包括 HTML 标签）。
• 表单值：val() 设置或返回表单字段的值。
• 属性操作：attr() 获取或设置属性值。
• 样式操作：css() 设置或返回样式属性。
• DOM 插入：
  • append()：在结尾插入。
  • prepend()：在开头插入。
  • after()：之后插入。
  • before()：之前插入。
• 删除：
  • remove()：删除被选元素及其子元素。
  • empty()：仅删除子元素。