具有特定属性的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-starts-with : attribute^="value",
• 属性端-用: attribute$="value",
• attribute-contains:`attribute*="value".

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

虽然在现代浏览器中我似乎记得这个'搜索'被移交给本机document.querySelectorAll(),而不是使用Sizzle,但即便如此,最好限制浏览器需要做的工作量.

参考文献:

• attribute-equals选择器.
• atrribute-starts-with选择器.
• attribute-ends-with选择器.
• attribute-contains选择器.