jquery - 具有特定属性的 jQuery 选择器

Question

我有这个代码：

$('a').click(
   function() {
       $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none");
  });

但是这个适用于所有锚元素。我只想用这个脚本来影响包含 rel="lightbox" 属性的锚元素。

我怎样才能实现它？

Answer 1

$('a[rel="lightbox"]').click(
   function() {
       $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none");
  });

Answer 2

使用以下内容：

$('a[rel="lightbox"]').click(
    function(){
        // do your stuff here
    });

这是使用attribute="value"符号（参见参考资料）。

还有其他选择：

• 属性开始于：attribute^="value"，
• 属性结束：attribute$="value",
• 属性包含：`attribute*="value"。

当然，请注意，虽然$('[rel="lightbox"]')它本身是一个绝对有效的选择器，但这将导致 jQuery 检查页面上的每个元素的属性和值，以便绑定/分配click事件；因此，最好使用标签名，即$('a[rel="lightbox"]'),或类名，以限制 jQuery 必须搜索以找到匹配元素的元素数量。

虽然在现代浏览器中我似乎记得这个“搜索”是交给原生的document.querySelectorAll()，而不是使用 Sizzle，但即便如此，最好限制浏览器需要做的工作量。

参考：

• 属性等于选择器。
• 属性开始与选择器。
• 属性以选择器结尾。
• 属性包含选择器。