4 jQuery、JavaScript 作用域、闭包与 DOM 事件绑定

4 jQuery

4.1 概述

jQuery是JavaScript的一个函数库。
菜鸟教程： https://www.runoob.com/jquery/jquery-tutorial.html
jQuery的引入有两种方法：
- 通过网址，前提是要联网。详情见菜鸟教程里面jQuery的安装部分。
- 下载文件，通过文件下载的路径引用。详情见菜鸟教程里面jQuery的安装部分。
$( selector ). action ()
selector是css里面的选择器，格式使用等都一样。
回调函数简单理解就是会返回一个字符串的函数。里面的orig...是原始（旧的）值，i是被选元素列表中当前元素的下标。在返回字符串的里面可以使用这些值。
设置可以批量设置，获取不可以，批量获取可以同for循环（类似dom)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ console.log($("div").text()) for(var i=0;i<$("div").length;i++){ console.log($("div").eq(i).text()) } }); </script> </head> <body>
aaa

mdkg

snfkn
</body> </html> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ console.log($("div").attr("index")) for(var i=0;i<$("div").length;i++){ console.log($("div").eq(i).attr("index")) } }); </script> </head> <body>
aaa

mdkg

snfkn
</body> </html>

4.2 JavaScript 作用域、闭包与 DOM 事件绑定

4.2.1 核心概念：$(function() { ... })

本质：$(document).ready(function() { ... }) 的简写，作用是等待 HTML 文档完全加载完毕后，再执行内部代码，避免因 DOM 未渲染完成导致无法操作元素的问题。

作用域属性：内部代码运行在局部作用域中，与全局作用域（$(function() { ... })外的内容）相互独立。

4.2.2 变量 / 函数的作用域规则

作用域分类

|-------|-----------------------------------------------------|-----------|-----------------------------------------------------|
| 作用域类型 | 声明位置 | 访问范围 | 示例 |
| 全局作用域 | 中， tid 可在任何地方访问 |
| 局部作用域 | $(function() { ... }) 或函数内部（用 var / let / const 声明） | 仅当前局部作用域内 |$ (function() { var isHot = ""; }) 中， isHot 只能在该函数内用 |

关键规则

局部作用域的 "临时性"：$(function() { ... }) 执行完毕后，其局部作用域不会 "物理销毁"，但外部无法通过变量名直接访问内部变量 / 函数（相当于 "访问钥匙失效"）。

无 var 声明的变量：在局部作用域内，若变量声明时不加 var/let/const，会自动向外层作用域查找，最终成为全局变量（如 $(function() { tid = 123; }) 会修改全局 tid）。

复制代码

$(function() {
    // 局部变量
    var tid = $("#tid").val(); 
    // 定义事件函数（闭包），引用外层变量 tid
    $(".filter p a").click(function() {
        alert(tid); // 能成功获取局部变量 tid 的值，闭包生效
    });
});

核心作用

解决 "局部变量无法被外部事件函数访问" 的问题，让 DOM 事件处理器能获取到局部作用域中的动态数据（如筛选条件 tid/isHot）。

4.2.4 DOM 事件绑定的两种方式与问题

方式一：onclick 全局函数（不推荐）

原理：通过 HTML 元素的 onclick 属性绑定函数，函数需在全局作用域中声明，否则无法找到。

问题：若函数定义在 $(function() { ... }) 局部作用域内（无全局暴露），点击时会报错 "函数未定义"。

改进：若需用此方式，需将函数暴露为全局（不推荐，易污染全局命名空间）：

复制代码

$(function() {
    // 将函数赋值给 window，变为全局函数
    window.loadMore01 = function() {
        alert("加载更多");
    };
});

方式二：jQuery 事件绑定（推荐）
原理：在 $(function() { ... }) 内部，通过$ ("选择器").click(函数) 绑定事件，无需全局函数，直接利用闭包访问局部变量。
优势：

符合 "HTML 结构与 JS 行为分离" 原则，代码更整洁；
自动形成闭包，可直接访问局部变量，无需担心作用域问题；
支持解绑事件（如 $("选择器").off("click")），控制更灵活。
示例（正确用法）：

<button id="loadMoreBtn">加载更多</button>

$(function() { var tid =$ ("#tid").val(); // 局部变量
// jQuery 绑定点击事件
$("#loadMoreBtn").click(function() { var pageNo = parseInt($ ("#pageNo").val());
// 直接访问局部变量 tid，闭包生效
window.location.href = "/songer/list?tid=" + tid + "&pageNo=" + pageNo;
});
});

4.2.5 常见问题与解决方案

问题 1：局部变量无法被外部函数访问

现象：loadMore01 函数在全局，需用 tid/isHot，但这两个变量在 $(function() { ... }) 内。

解决方案：

用 jQuery 事件绑定（推荐），通过闭包直接访问局部变量；

若用全局函数，需在函数内部重新获取变量（保证值为最新）：

复制代码

function loadMore01() {
    // 重新获取当前选中的筛选值（而非依赖全局变量）
    var tid = $("a[ftype='mtype'].current").attr("value");
    var isHot = $("a[ftype='isHot'].current").attr("value");
    // 后续逻辑...
}

问题 2：事件绑定后局部作用域执行完毕，变量 "消失"
现象：担心 $(function() { ... }) 执行完后，内部变量被销毁，事件函数无法用。
原因：误解 "局部作用域销毁"------ 实际是作用域 "不可直接访问"，但闭包会 "保留" 引用的变量，事件函数仍能通过闭包访问。
结论：只要事件函数是在局部作用域内定义且引用了局部变量，闭包会自动 "保鲜" 变量，无需担心 "消失"。

4.2.6 关键总结

$(function() { ... }) 是 "DOM 就绪函数"，内部为局部作用域，变量 / 函数默认仅内部可访问；
全局变量在