jQuery:处理id属性中的空格

Question

我有一个id ="A B"的元素.以下代码失败:

<input type="text" id="A B">
<script>$("#A B").click(function(){alert();});</script>

以下代码不会失败:

<input type="text" id="AB">
<script>$("#AB").click(function(){alert();});</script>

Answer 1

虽然在HTML中的ID属性值中有空格在技术上是无效的(请参阅@ karim79的答案),但实际上可以使用jQuery选择它.

见http://mothereffingcssescapes.com/#A%20B:

<script>
  // document.getElementById or similar
  document.getElementById('A B');
  // document.querySelector or similar
  $('#A\\ B');
</script>

jQuery使用类似Selectors API的语法,因此您可以使用$('#A\\ B');选择元素id="A B".

要在CSS中定位元素,您可以像这样转义它:

<style>
  #A\ B {
    background: hotpink;
  }
</style>

Answer 2

HTML4和HTML5都不允许ID属性值中的空格字符.

HTML 4.01规范声明ID令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符( - ),下划线(_) ,冒号(:)和句点(.).对于class属性,没有这样的限制.类名可以包含任何字符,并且它们不必以字母开头有效.

HTML5摆脱了对id属性的额外限制.剩下的唯一要求 - 除了在文档中是唯一的 - 是值必须包含至少一个字符(不能为空),并且它不能包含任何空格字符.

资源:

http://mathiasbynens.be/notes/html5-id-class

Answer 3

正如他们所提到的,你不应该在id中使用空格.但无论如何,这不适合你吗？

$("[id='A B']").click(...)

编辑:是的它工作,测试它!不要杀我,标准爱好者!;-P