jQuery 中 $.escapeSelector(selector) 这个方法（jQuery 3.0+ 新增），核心是解决选择器中包含特殊字符时的 “混淆” 问题。
jQuery 选择器语法基于 CSS 选择器，里面定义了很多特殊字符（比如 #、.、[、]、:、/ 等），这些字符有特殊含义：
# 代表 ID 选择器
. 代表类选择器
[] 代表属性选择器
如果你的 HTML 元素的 ID / 类名 / 属性值中本身包含这些特殊字符（比如 ID 是 user#123、类名是 item.456），直接用常规选择器就会解析错误，导致选择器“混淆”，无法选中目标元素。
$.escapeSelector() 的作用就是：对选择器中的特殊字符进行转义，让 jQuery 把这些字符当作普通字符处理，而不是解析为选择器语法。
语法：$.escapeSelector(需要转义的字符串)
返回值：转义后的字符串
示例：
// 将 selectorStr 进行转义
let escapedStr = $.escapeSelector(selectorStr);完整示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程：选择器</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
div { margin:20px; }
button { background: #EEE !important; border: 1px solid #ccc !important; min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
ul li { margin: 3px 0;}
h3 { font-size: 18px; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>混淆选择器</h3>
<div class="notMe"><div class="notMe"></div></div>
<div class=".box my_Class"><div class=".box my_Class"></div></div>
<div class=".box"><div class=".box"></div></div>
</div>
<div>
<!--
$.escapeSelector(selector) 3.0+
这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与 CSS 中 CSS.escape() 方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。
-->
<button type="button" onclick="
reset();
// $.escapeSelector('.box') 对 .box 进行转义，然后添加样式
$('div').find('.' + $.escapeSelector('.box')).addClass('myClass');
">$.escapeSelector</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098