Javascript 选择器 $ 和 $$ 的坑

Javascript 选择器 $ 和 $$ 的坑

今天在使用选择器$时碰到了一小坑，代码如下：

<input id="Email" type="email" onblur="console.log($('#Email').value);" />

无论如何都报错，提示$('#Email')为null。这个$不是 jQuery 的选择器，而是原生的那个，对应document.querySeletor(o)方法。

尝试多次找到问题。

• $不在事件属性中使用时可以正常工作。
• $$在这里也不行，对应document.querySelectorAll(o)方法。
• document.querySelector可以。
• document.querySelectorAll也可以。
• 使用this代替$('#Email')可以。
• 使用 root.js 库的选择器$s可以，对应单元素选择器。
• 使用 root.js 库的选择器$a也可以，对应多元素选择器。
• 使用$替换 root.js 库的选择器$s不可以。
• 使用$$替换 root.js 库的选择器$a也不可以。
• 自定义选择器方法$s可以。
• 自定义选择器方法$a可以。

总结一下就是无论是原生$还是自己定义的$，在属性中设置事件逻辑时都不能正常工作，可以使用document.querySeletor或document.getElementById或自定义选择器方法$s代替。$$同理。

原文链接：http://www.qross.cn/blog/20220418-selector