属性选择符使用一种从正则表达式中借鉴来的通配符语法,以^表示值在字符串的开始,以$表示值在字符串的结尾。而且,也是用星号*表示要匹配的值可以出现在字符串中的任意位置,用叹号!表示对值取反。
<a href="mailto:henryiv@king.co.uk">email</a>
JQ选择这个a标签的方法就是:
$('a[href^="mailto:"]').addClass('mailto');
要为所有指向PDF文件的链接添加类,需要使用美元符号($)而不是脱字符号(^)。这是
因为我们要选择所有href属性以.pdf结尾的链接
$('a[href$=".pdf"]').addClass('pdflink');
$表示字符串的结尾
*表示要匹配的值可以出现在字符串中的任意位置
a href="www.google.com">链接6</a>
$('a[href *= "google"]').addClass('ablue');
html:
<a href="https://www.baidu.com">链接1</a>
<a href="baidu.pdf">链接2</a>
<a href="www.google.com">链接3</a>
<a href="google.pdf">链接4</a>
<a href="baidu.pdf">链接5</a>
<a href="www.google.com">链接6</a>
<a href="https://www.baidu.com">链接7</a>
css:
a{
display: block;
margin: 10px;
color: #000;
}
.ared{
color: red;
}
.apink{
color: pink
}
.ablue{
color: blue;
}
jq:
$(document).ready(function(){
$('a[href ^= "https:"]').addClass('ared'); // ^表示字符串的开始
$('a[href $= ".pdf"]').addClass('apink'); // $表示字符串的结尾
$('a[href *= "google"]').addClass('ablue'); // *表示可以出现在任意位置
})
结果显示: