"jQuery开发宝典：属性过滤选择器示例"

需积分: 0 147 浏览量更新于2023-12-23 收藏 1.65MB PPT 举报

红色： ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("[hreflang|='en']").css("background-color", "red"); }); }); </script> </head> <body> <a href="#" hreflang="en">英语的链接</a> <a href="#" hreflang="en-uk">英式英语的链接</a> <button>设置背景色为红色</button> </body> </html> ``` 在上面的例子中，当点击按钮时，属性选择器`[hreflang|='en']`将选择所有`hreflang`属性的值以"en"开头的元素，并将它们的背景色设置为红色。这个例子展示了如何使用属性过滤选择器来选择具有特定属性值的元素，并对它们进行操作。除了`[attribute|='value']`，属性过滤选择器还有其他几种形式，比如`[attribute^='value']`用来选择属性值以特定字符串开头的元素，`[attribute$='value']`用来选择属性值以特定字符串结尾的元素，`[attribute*='value']`用来选择属性值包含特定字符串的元素。这些属性过滤选择器为开发人员提供了灵活的方式来选择和操作特定属性值的元素，从而实现更丰富的页面效果和交互。总的来说，属性过滤选择器是jQuery中非常实用和强大的选择器之一，开发人员可以利用它们来精确地选择页面中的元素，并对它们进行各种操作。通过本文的示例和说明，读者可以更加深入地了解属性过滤选择器的用法和原理，从而在实际的项目开发中更好地应用它们，提高工作效率和开发质量。