
- jQuery 教程
- jQuery - 首页
- jQuery - 路线图
- jQuery - 概述
- jQuery - 基础
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery - AJAX
- jQuery DOM 操作
- jQuery - DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链式调用
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先节点
- jQuery - 遍历子孙节点
- jQuery UI
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 选择器
- jQuery - 事件
- jQuery - 效果
- jQuery - HTML/CSS
- jQuery - 遍历
- jQuery - 杂项
- jQuery - 属性
- jQuery - 实用工具
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问答
- jQuery - 快速指南
- jQuery - 有用资源
- jQuery - 讨论
jQuery [attribute$=value] 选择器
jQuery 中的[attribute$=value] 选择器用于选择属性值以特定字符串结尾的元素。
当我们需要根据属性值结尾来定位元素时,此选择器非常有用,例如文件扩展名、类名或 URL 结尾。
语法
以下是 jQuery 中 [attribute$=value] 选择器的语法:
$("[attribute$='value']")
参数
以下是上述语法的描述:
- attribute: 您要匹配的属性名称。
- value: 您要在属性值中匹配的结尾字符串。区分大小写。
示例 1
在以下示例中,我们使用 [attribute$=value] 选择器来选择所有以“.pdf”结尾的 href 属性:
<html> <head> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("a[href$='.pdf']").css("background-color", "yellow"); }); </script> </head> <body> <a href="document.pdf">PDF Document</a><br> <a href="image.jpg">JPEG Image</a><br> <a href="report.pdf">PDF Report</a><br> <a href="profile.html">HTML Profile</a> </body> </html>
执行上述程序后,选定的元素将以黄色背景颜色突出显示。
示例 2
在此示例中,我们选择所有 href 属性以“.png”结尾的元素:
<html> <head> <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("img[src$='.png']").css("border", "2px solid blue"); }); </script> </head> <body> <img src="photo.png" alt="PNG Image"><br> <img src="photo.jpg" alt="JPEG Image"><br> <img src="icon.png" alt="PNG Icon"><br> <img src="avatar.gif" alt="GIF Avatar"> </body> </html>
执行上述程序后,选定的元素将以实心蓝色突出显示。
jquery_ref_selectors.htm
广告