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 functionName(params) {
    // 函数体
    return returnValue;
}

// 函数调用
functionName(args);

关键点：

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

参数处理：

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

2.4.3 对象

在 JS 中，字符串、数值、数组、函数本质上都是对象。每个对象包含属性和方法。

创建对象：

1. 字面量创建 [常用]

   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 ConstructorName(params) {
       this.property = value;
       this.method = function() {};
   }
   let obj = new ConstructorName(args);
   

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

三、JQuery

jQuery 是一个快速、简洁且功能丰富的 JavaScript 框架，封装了常用功能代码，提供了强大的选择器和 DOM 操作方法。它能简化事件处理、动画和 Ajax 操作，提高开发效率。

3.1 引入依赖

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3.2 JQuery 语法

核心语法非常简单：

$(selector).action()

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

3.3 JQuery 选择器

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

3.4 JQuery 事件

事件主要由事件源、事件类型和处理程序（回调函数）组成。

常见事件绑定：

• 文档就绪： $(document).ready(function)
• 点击： $(selector).click(function)
• 双击： $(selector).dblclick(function)
• 值改变： $(selector).change(function)
• 鼠标悬停： $(selector).mouseover(function)

3.5 操作元素

3.6 常用方法

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