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",
• 属性包含：`属性* = “值” 。

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

虽然在现代浏览器中，我似乎记得这个'搜索'已交给本地document.querySelectorAll()，而不是使用Sizzle，但即使如此，最好限制浏览器所需的工作量。

参考文献：

• attribute-equals selector。
• atrribute-begins-with selector。
• attribute-ends-with selector。
• attribute-contains selector。对谷歌“具有特定属性的jQuery选择类”