📌  相关文章
📜  如何在 jQuery 中按属性选择元素?(1)

📅  最后修改于: 2023-12-03 15:24:13.834000             🧑  作者: Mango

在 jQuery 中按属性选择元素

在 jQuery 中,您可以通过属性选择器来选择元素。属性选择器允许您根据元素的属性值选择元素。以下是一些基本的属性选择器:

  • [attribute] : 选择具有该属性的元素。
  • [attribute=value] : 选择具有该属性并且属性值等于给定值的元素。
  • [attribute!=value] : 选择具有该属性但属性值不等于给定值的元素。
  • [attribute^=value] : 选择具有该属性并且属性值以给定值开始的元素。
  • [attribute$=value] : 选择具有该属性并且属性值以给定值结束的元素。
  • [attribute*=value] : 选择具有该属性并且属性值包含给定值的元素。

下面是使用属性选择器选择元素的示例:

// 选择所有具有属性data-color的元素
$('[data-color]');

// 选择所有data-color属性等于red的元素
$('[data-color="red"]');

// 选择所有data-color属性不等于green的元素
$('[data-color!="green"]');

// 选择data-color属性以r开头的元素
$('[data-color^="r"]');

// 选择data-color属性以d结尾的元素
$('[data-color$="d"]');

// 选择data-color属性包含ed的元素
$('[data-color*="ed"]');

以上代码将返回一个集合,该集合包含具有相应属性的所有元素。您还可以使用组合选择器来进一步筛选元素:

// 选择所有class属性为box且data-color属性等于red的元素
$('.box[data-color="red"]');

使用属性选择器可以帮助您根据特定情况轻松选择元素。除了上面提供的基本属性选择器之外,还有其他可以使用的属性选择器。详细内容请参阅 jQuery 文档。