程序员教程

jQuery 属性选择器

1. 选择具有特定属性的元素

要选择具有特定属性的元素，请在属性名称前加上方括号 []，并在方括号内指定属性名。

                // 选取具有 "data-toggle" 属性的元素
                $("[data-toggle]")
                

上面的代码将会选取页面中所有具有 "data-toggle" 属性的元素。

2. 选择具有指定属性值的元素

如果你只想选择具有特定属性值的元素，请在属性选择器的方括号内使用等号（=）进行匹配。

                // 选取具有 "data-toggle" 属性且属性值为 "menu" 的元素
                $("[data-toggle='menu']")
                

上面的代码将会选取页面中具有 "data-toggle" 属性且属性值为 "menu" 的元素。

3. 选择具有包含指定字符串的属性值的元素

你还可以选择具有属性值中包含指定字符串的元素。使用 *= 运算符来进行匹配。

                // 选取属性值中包含 "example" 的元素
                $("[data-name*='example']")
                

上面的代码将会选取页面中具有属性值中包含 "example" 的元素。

4. 选择具有以指定字符串开头的属性值的元素

你可以选择具有以指定字符串开头的属性值的元素。使用 ^= 运算符来进行匹配。

                // 选取属性值以 "https://" 开头的元素
                $("[href^='https://']")
                

上面的代码将会选取页面中具有属性值以 "https://" 开头的元素。

5. 选择具有以指定字符串结尾的属性值的元素

你还可以选择具有以指定字符串结尾的属性值的元素。使用 $= 运算符来进行匹配。

                // 选取属性值以 ".jpg" 结尾的图片元素
                $("img[src$='.jpg']")
                

上面的代码将会选取页面中具有属性值以 ".jpg" 结尾的图片元素。

通过灵活运用属性选择器，你可以根据元素的属性值进行各种操作和筛选。记得在开发过程中，合理使用属性，并遵循 HTML 规范。

以上是 jQuery 属性选择器的基本用法和示例。通过使用它，你可以方便地选取和操作具有特定属性和属性值的元素，实现各种交互效果和功能。除了属性选择器，还要掌握其他类型的选择器，以便灵活使用 jQuery 的强大功能。记得在开发过程中查阅 jQuery 官方文档，以便了解更多关于选择器和其他方法的详细信息和用法。