1

假设您正在使用 Chrome 开发人员工具，然后单击屏幕上的 DOM 对象并右键单击 -> 检查元素。

是否有任何工具可以帮助您找出该元素的唯一选择器是什么？

例如，我需要选择下面突出显示的 DOM 元素，但是当 DOM 像这样复杂时，它变得很困难：

4

5 回答 5

0

您可以在 chrome 工具的“元素”选项卡中单击一个元素（或右键单击并选择检查），然后$0在 Chrome 控制台中引用它。无论突出显示哪个元素都将$0在控制台中。

由于您可以使用 jquery 包装 dom 元素，因此您可以$($0)在控制台中获取 jquery 元素。这对获取选择器没有太大帮助，但是如果您尝试在控制台中调试元素，这是一种简单的方法。

于 2013-09-12T23:39:07.220 回答
0

Firefox 有一个 Page Inspector 工具，我觉得它非常有用。调出您的页面，按 Ctrl-Shift-I，然后在页面上选择一个元素。包含所选元素及其所有祖先的工具栏将显示出来。

参考：https ://developer.mozilla.org/en-US/docs/Tools/Page_Inspector （你可以看到我在上面提到的工具栏显示标记）

于 2013-09-12T23:21:11.920 回答
0

除了大量的试验和错误......试试这个。

我通常不会派人去 w3schools，但他们的参考是我发现的最简洁的“备忘单”参考资料，可以引导我找到合适的选择器：

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

继续点击下一章，您将完成：

  • 选择器
  • 事件
  • 效果
  • css
  • 遍历
  • 阿贾克斯
  • 和一些杂项

必要时打印出来，在小房间里阅读。

于 2013-09-12T23:34:11.737 回答
0

对于那段特定的 html ：

var fld = $('input[data-text-field="NameFirstInitLast"]');
于 2013-09-12T23:21:50.890 回答
0

您可以获得一个名为 CSS Selector Tester 的 Chrome 扩展程序，它类似于开发人员工具，但会向您显示元素的选择器。另一个扩展名为 Selector Assistant，它也类似。

于 2013-09-12T23:34:45.737 回答