如何使用jQuery获取含特殊字符的ID元素？

问题 #

我是jQuery新手，需要获取以下输入框的元素值：

<input type="number" onkeypress="preventSomeKeys(event)" onchange="setTwoNumberDecimal(this)" name="fee_ctv_omp_percent" id="fee_ctv['omp_percent']" value="0.00" class="w-100" step="0.01" style="border:none;">

我尝试用以下代码获取元素：

var test2 = $("#fee_ctv['omp_percent']");

但运行后出现报错：

Uncaught Error: Syntax error, unrecognized expression: #fee_ctv['omp_percent']

请问这种ID包含特殊字符的元素，怎么用jQuery获取？

解决方法 #

没问题，有两种简单的办法能搞定：

方法一：使用属性选择器匹配ID #

jQuery的属性选择器可以直接精确匹配id属性，无需处理特殊字符的转义问题，写法如下：

var test2 = $('[id="fee_ctv[\'omp_percent\']"]');
// 获取输入框值
var inputValue = test2.val();

方法二：原生JS获取后转为jQuery对象 #

原生JavaScript的document.getElementById()可以直接识别带特殊字符的ID，不会触发语法错误，之后将其转为jQuery对象即可使用jQuery的方法：

var domElement = document.getElementById('fee_ctv[\'omp_percent\']');
var test2 = $(domElement);
// 获取输入框值
var inputValue = test2.val();

原代码报错原因 #

jQuery的#xxx格式ID选择器，会将[]、'这类字符视为CSS选择器的语法符号，而非ID的组成部分，因此直接编写会触发语法错误。若一定要使用ID选择器，需要对特殊字符用双反斜杠转义，但写法较为繁琐：

var test2 = $("#fee_ctv\\['omp_percent'\\]");

相比之下前两种方法更简洁直观。

内容的提问来源于stack exchange，提问作者Bastian