jQuery版本选择：处理IE6/7/8浏览器兼容问题

常见能力包括：

思维导图 1： 基础认知

二、 的三个主要版本系列

常见有三个大版本系列：

不同版本之间最大的差异之一，就是对旧版 IE 浏览器的支持情况。

1） 1.x：兼容老旧 IE

1.x 版本仍然保留了对 IE6、IE7、IE8 等旧浏览器的兼容支持。

如果你的项目需要运行在非常老的浏览器环境里，比如一些老政企系统、内网 OA、工业控制后台、医院或学校旧平台，那 1.x 版本可能仍然会出现。

常见场景

需要兼容 IE6/IE7/IE8
老系统维护
历史项目不能大改
内网传统后台系统

2） 2.x：不再支持 IE6/7/8

从 2.0 开始，官方不再支持 IE6、IE7、IE8。

这意味着什么？

意味着如果你的客户环境还在使用旧版 IE，而你直接升级到 2.x，可能页面功能就会出问题。

但反过来说，如果项目不需要兼容这些老浏览器，2.x 版本会更轻一些，也适合很多现代一点的传统项目。

课堂和企业实践里，经常会看到一些项目使用：

jQuery 2.1.4

3） 3.x：更新、更现代

3.x 是更现代的版本系列，修复了不少历史问题，也调整了一些行为。

比如常见版本：

jQuery 3.5.1

如果是新项目，且仍然决定使用 ，一般会优先考虑 3.x。

但还是那句话：

不是最新版本就一定最适合。

思维导图 2： 版本分类

三、 版本选择：别迷信最新版

很多新手最容易犯的错误就是：

只要有最新版，就一定用最新版。

在真实项目里，这个判断很危险。

版本选择要看实际需求，至少要考虑下面几个问题：

版本选择建议

如果必须兼容 IE6/7/8：选择 jQuery 1.x
如果不需要兼容旧 IE：可考虑 jQuery 2.x
如果是较新项目：优先考虑 jQuery 3.x
如果是安全整改：看漏洞影响和兼容测试结果

Web 安全工作里还有一个重点：

升级库文件不是简单替换版本号。

尤其是老项目，直接把 -1.x 换成 -3.x，可能导致：

所以安全修复时，不能只说“升级到最新版”，还要配合回归测试。

思维导图 3：版本选择原则

四、.min.js 是什么？为什么文件名里有 min？

你下载 时，经常会看到这种文件名：

jquery.min.js

这里的 .min 通常表示 ，也就是压缩版。

压缩版做了什么？

所以你打开 .min.js，会发现里面代码密密麻麻，很难阅读。

这很正常。

压缩版和未压缩版区别压缩版

jquery.min.js

适合生产环境使用，体积小，加载快。

未压缩版

jquery.js

适合学习、调试、阅读源码。

思维导图 4： 文件类型

五、项目目录怎么放才规范？

很多初学者喜欢把所有文件都丢在一个目录下：

index.html
jquery.min.js
style.css
demo.js

能跑，但不规范。

实际开发中，通常会分类存放：

project/
├── index.html
├── css/
│   └── style.css
└── js/
    ├── jquery.min.js
    └── main.js

这样结构清晰，后期维护也方便。

推荐目录结构

project/
├── index.html
├── css/
│   └── index.css
├── js/
│   ├── jquery.min.js
│   └── index.js
└── images/
    └── logo.png

六、 使用前第一步：必须引包

是一个 JS 函数库。

既然是外部 JS 文件，就必须先在 HTML 页面中引入，浏览器才知道 $ 是什么。

标准写法

如果忘记引入，直接写：

$("li").click(function () {
  console.log("点击了 li");
});

浏览器会报错：

Uncaught ReferenceError: $ is not defined

意思就是：

$ 没有定义。

完整示例：正确引入 目录结构

project/
├── index.html
└── js/
    └── jquery.min.js

index.html

  
  
  


  
jQuery 引入测试
  

运行结果

typeof $ = function
jQuery 版本 = 3.5.1

说明 已经成功引入。

七、第一个 体验：点击 li，背景变红

下面这个例子非常经典，能快速体验 的事件绑定和样式修改。

示例代码

  
  
  
  


  

    
首页
    
新闻
    
安全
  
  

运行结果

点击“安全”这个 li 后：

页面效果：

“安全”这一项背景变红，文字变白

控制台输出：

点击内容： 安全

代码拆解

$("li")

选中页面中所有 li 标签。

.click(function () {
  ...
})

给这些 li 绑定点击事件。

$(this)

表示当前被点击的这个元素。

.css({ "background": "red" })

修改当前元素的 CSS 样式。

八、第二个 体验：让 div 动起来

的动画方法也非常有代表性。

常见写法：

$("div").animate({ "left": 1000 }, 1000);

意思是：

不过这里有一个重点：

要让 left 生效，元素通常需要设置定位属性，比如 : 或 。

示例代码：div 向右移动

  
  
  
  


  
移动
  开始动画
  

运行结果

点击按钮后：

蓝色方块在 1 秒内向右移动 500px

控制台输出：

动画开始：box 向右移动 500px，耗时 1 秒

九、 的链式调用：为什么写起来这么顺？

很典型的一个特点就是链式调用。

比如：

$("#box").css("background", "orange").animate({ "left": 500 }, 1000);

这行代码做了两件事：

把背景色改成橙色让元素向右移动完整示例

  
  
  
  


  
Box
  运行
  

运行结果

点击按钮后：

box 背景变橙色，并向右移动 300px

控制台输出：

链式调用执行完成

十、初学 最常见的 4 个坑坑 1：忘记引入

错误代码：

运行结果：

Uncaught ReferenceError: $ is not defined

解决方法：

坑 2：路径写错

比如你的文件在：

js/jquery.min.js

但你写成：

浏览器就找不到文件。

控制台常见报错

GET http://localhost/jquery.min.js 404 (Not Found)

解决方法：检查文件路径是否和目录结构一致。

坑 3：DOM 还没加载就操作元素

如果脚本放在元素前面执行，可能拿不到元素。

更稳妥写法：

$(function () {
  $("li").click(function () {
    console.log($(this).text());
  });
});

这表示 DOM 加载完成后再执行代码。

坑 4：动画属性没有生效

如果你写：

$("div").animate({ "left": 1000 }, 1000);

但元素没有动，多半是缺少定位。

解决：

div {
  position: relative;
}

十一、从网络安全角度看，为什么要重视 ？

如果你是做 Web 安全，这一节尤其重要。

不是只存在于教材里。

在真实安全测试中，它非常常见。

尤其是一些传统业务系统，前端代码里可能大量存在：

$("#username").val()
$("#msg").html(data)
$("li").click(...)
$.ajax(...)

这些写法背后，可能直接关系到：

1）.html() 是安全审计重点

比如：

$("#result").html(location.hash.substring(1));

如果 .hash 可被用户控制，就可能造成 DOM XSS。

攻击者可能构造：

http://example.com/#

当页面把 hash 直接写入 .html() 时，就可能执行恶意代码。

2）老版本 也可能存在安全风险

一些旧版本 历史上出现过安全问题。

实际安全检查中，经常会把 版本识别列为前端组件风险排查项。

可以通过控制台查看版本：

$.fn.jquery

运行结果示例：

"1.12.4"

如果版本过旧，就需要结合项目兼容性评估是否升级。

3）升级 要考虑兼容性

安全人员不能只给一句：

升级到最新版。

更合理的建议应该是：

十二、一个安全版对比案例：.html() 和 .text()危险写法

  
  
  


  
  显示
  

  

输入内容

可能结果

触发 alert('XSS')

安全写法

$("#result").text(value);

修改后的完整代码

运行结果

页面会直接显示文本：

不会把它当 HTML 执行。

十三、总结

今天这篇文章，重点就几句话：

版本 安全 jQuery li function 如果