前端之jQuery

JavaScript 核心 & DOM & BOM & jQuery 精要

JavaScript (ECMAScript) 基础

1. 常量与变量

   • const：声明常量，值不可变。
   • let：声明块级作用域变量。
   • var：声明函数级作用域变量 (旧方式)。

2. 数据类型

   • Primitive (原始类型):
     • number：数字。
     • string：字符串。
     • boolean：布尔值 (true / false)。
     • null：表示空值 (需主动赋值)。
     • undefined：表示未定义的值 (变量声明未赋值)。
     • symbol：唯一且不可变的值 (ES6+)。

3. 表达式

   • 用于计算值的代码片段 (如 a + b, x === y, func())。

4. 流程控制

   • 条件语句：if...else, switch
   • 循环语句：for, while, do...while, for...in (对象), for...of (可迭代对象)
   • 跳转语句：break, continue, return

5. 数组 (Array)

   • 有序集合，可存储不同类型元素。
   • 常用操作：创建、增删改查元素、遍历 (forEach, map, filter 等)。

6. 函数 (Function)

   • 可重复使用的代码块。
   • 声明：function 关键字、函数表达式、箭头函数 (=>)。

7. 对象 (Object)

   • 无序集合，由键值对 (key: value) 组成。
   • 创建方式：字面量 ({})、new Object()、构造函数、class (ES6+)。

---

DOM (Document Object Model)

• 概念：将 HTML 文档解析为树状结构，提供操作页面内容的接口。
• 核心：通过 JavaScript 访问、修改、添加、删除 HTML 元素和属性、样式、事件。

---

BOM (Browser Object Model)

• 概念：提供与浏览器窗口交互的接口，核心对象是 window。
• 核心对象与方法:
  • window：顶级对象，代表浏览器窗口。
  • location：包含当前 URL 信息。
    • location.href：获取或设置完整 URL (导航)。
    • location.reload()：重新加载当前页面。
  • history：管理浏览器会话历史。
    • history.back()：后退一页。
    • history.forward()：前进一页。
    • history.go(n)：前进或后退 n 页 (负数为后退)。
  • navigator：提供浏览器信息。
• 客户端存储:
  • cookie：小型文本数据 (有大小、安全性限制)。
  • localStorage：本地永久存储 (同域下页面可共享)。
    • localStorage.setItem(key, value)
    • localStorage.getItem(key)
    • localStorage.removeItem(key)
    • localStorage.clear()
  • sessionStorage：会话存储 (生命周期为单个标签页/窗口)。
    • (方法同 localStorage: setItem, getItem, removeItem, clear)

---

jQuery

• 概念：强大的 JavaScript 函数库 (“瑞士军刀”)，简化 DOM 操作、事件处理、动画、AJAX。

1. 起手式 (Ready Event)

   $(function() {// DOM 加载完成后执行的代码
   });
   // 或
   $(document).ready(function() {// DOM 加载完成后执行的代码
   });
   // 箭头函数形式
   $(() => {// DOM 加载完成后执行的代码
   });
   

2. $ 函数与选择器

   • $("selector")：将选择器字符串作为参数，返回匹配元素的 jQuery 对象。

3. jQuery 对象特性

   • 链式操作：许多方法返回 jQuery 对象本身，允许连续调用 ($obj.method1().method2().method3())。
   • 隐式迭代：对 jQuery 对象集合调用方法，会自动遍历操作集合中的每个 DOM 元素。

4. jQuery 对象 vs DOM 对象

   • jQuery 对象：类数组对象，包含 0 个或多个 DOM 元素。拥有 jQuery 方法。
   • DOM 对象：原生 JavaScript 对象。拥有原生 DOM 方法/属性。
   • 相互转换：
     • jQuery -> DOM：
       • $jqObj[index]
       • $jqObj.get(index)
     • DOM -> jQuery：$(domElement)

5. 常用方法 (Getter/Setter)

   • .text()：获取/设置元素的纯文本内容。
   • .html()：获取/设置元素的 HTML 内容。
   • .val()：获取/设置表单元素的值 (value 属性)。
   • .css(propertyName) / .css(propertyName, value)：获取/设置单个 CSS 样式 / .css(object)：设置多个样式。
   • .attr(attributeName) / .attr(attributeName, value)：获取/设置 HTML 属性。.removeAttr(attributeName)：移除属性。
   • .prop(propertyName) / .prop(propertyName, value)：获取/设置 DOM 属性 (尤其是布尔属性如 checked, disabled, selected)。
   • .addClass(className)：添加类名。
   • .removeClass(className)：移除类名。
   • .toggleClass(className)：切换类名 (有则移除，无则添加)。
   • .hasClass(className)：检查是否含有指定类名。

6. 筛选

   • 二次筛选：在现有 jQuery 对象集合上进一步筛选 (如 .filter(), .not(), .first(), .last(), .eq(index))。

7. 遍历

   • 向上：
     • .closest(selector)：查找匹配选择器的最近祖先元素。
     • .parent([selector])：查找直接父元素。
     • .parents([selector])：查找所有祖先元素。
     • .parentsUntil([selector][, filter])：查找祖先元素直到匹配选择器的元素为止。
   • 向下：
     • .children([selector])：查找所有直接子元素。
     • .find(selector)：查找所有后代元素。
   • 同级：
     • .prev([selector])：查找前一个兄弟元素。
     • .prevAll([selector])：查找前面所有兄弟元素。
     • .prevUntil([selector][, filter])：查找前面兄弟元素直到匹配选择器的元素为止。
     • .next([selector])：查找后一个兄弟元素。
     • .nextAll([selector])：查找后面所有兄弟元素。
     • .nextUntil([selector][, filter])：查找后面兄弟元素直到匹配选择器的元素为止。
     • .siblings([selector])：查找所有兄弟元素 (不包括自身)。

8. 事件处理

   • 基本绑定：$("selector").eventName(function(event) { /* handler code */ }); (如 .click(), .hover(), .submit())
   • 推荐方式：
     • .on(eventType[, selector][, data], handler)：通用绑定事件 (支持委托)。
     • .off(eventType[, selector][, handler])：移除事件。
   • 事件委托：利用 .on() 的 selector 参数将事件处理程序绑定到父元素，处理动态添加的子元素事件。
   • 事件对象：处理函数接收 event 对象，包含事件信息 (如 event.target, event.preventDefault(), event.stopPropagation())。

9. 其他要点

   • $("selector", context)：在指定上下文 (context DOM 元素或 jQuery 对象) 中查找元素。
   • $jqObj.length：获取 jQuery 对象中匹配的 DOM 元素个数。
   • 选择器：支持 CSS1-3 选择器及自定义选择器 (如 :visible, :hidden, :eq(), :first, :last, :even, :odd, :not())。注意 :hidden 包括：
     • <input type="hidden">
     • display: none 的元素
     • visibility: hidden 的元素
     • 宽高为 0 的元素等。