Question

我对jQuery id-selector如何使用我的html非常困惑。

使用$('#id')选择器，jQuery对象不包含我想要的DOM元素，但使用$('tag[id="id"]')选择器会以某种方式工作。

有人可以解释为什么前者不起作用但后者不起作用吗？

＆＃13;

console.log($('#1_9:15')[0]);
console.log($('div[id="1_9:15"]')[0]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Monday</th>
      <td>
        <div id="1_9:15">FREE</div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

:在jQuery选择器中有特殊含义。例如，要选择所有动画元素，您可以执行$(":animated")。这就是你需要逃避它的原因：

console.log($('#1_9\\:15')[0]);
console.log($('div[id="1_9:15"]')[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Monday</th>
      <td>
        <div id="1_9:15">FREE</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您正在使用包含冒号:的ID，这是识别伪类和jQuery扩展名的方式。为了让选择器引擎将其视为id，您必须使用\\将其转义。

使用[id="1_9:15"]时，您不会遇到同样的问题，因为ID用括号括起来，很容易识别。

示例：

/* Select the div by id escaping the colon. */ console.log($('#1_9\\:15')[0]); /* Select the div using by id 'the attribute way'. */ console.log($('div[id="1_9:15"]')[0]); /* Select the div using a pseudo-class. */ console.log($('div:first-child')[0]);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <th>Monday</th> <td> <div id="1_9:15">FREE</div> </td> </tr> </tbody> </table>

jquery直接id选择不起作用，tag [id]选择确实有效

2 个答案: