📜  jQuery | [属性=值] 选择器(1)

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

jQuery属性选择器

jQuery的属性选择器允许开发人员根据元素的属性来选择元素,并且可以进一步过滤出需要的元素。

基本语法
$("[attribute-name=\'value\']");

$()创建一个jQuery对象,并在括号中使用方括号选择器来指定元素的属性以及属性值。

常见的属性选择器

以下是常用jQuery属性选择器的列表:

| 选择器 | 描述 | | --- | --- | | [attribute] | 选择含有指定属性的元素。 | | [attribute=value] | 选择含有指定属性和值的元素。 | | [attribute!=value] | 选择不含有指定属性或属性值不等于指定值的元素。 | | [attribute^=value] | 选择含有指定属性值开头的元素。 | | [attribute$=value] | 选择含有指定属性值结尾的元素。 | | [attribute=value]* | 选择含有指定属性值的元素。 |

示例

以下是使用属性选择器的一些示例:

选择指定属性的元素
$('a[target]');

以上代码将返回所有<a>元素中含有target属性的元素。

选择具有指定属性值的元素
$('input[type=\'checkbox\']');

以上代码将返回所有<input>元素中含有type="checkbox"的元素。

选择不具有指定属性或值的元素
$('input[type!=\'radio\']');

以上代码将返回所有<input>元素中不含有type="radio"的元素。

选择具有特定属性值开头的元素
$('input[name^=\'user\']');

以上代码将返回所有<input>元素中含有name属性且以user开头的元素。

选择具有特定属性值结尾的元素
$('input[name$=\'code\']');

以上代码将返回所有<input>元素中含有name属性且以code结尾的元素。

选择具有特定属性值的元素
$('[data-active=\'true\']');

以上代码将返回所有data-active属性值为true的元素。

总结

以上是jQuery属性选择器的介绍。使用属性选择器,我们可以轻松地根据元素的属性来选择我们需要的元素。