<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.9jQuery选择器之属性过滤选择器</title>
<style>
</style>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//选取所有含有id属性的ul标签
$('ul[id]').css('border','solid 2px red');
//选取所有含有class属性并且属性值是nav的a标签
$("a[class='nav']").css('background-color','#CCC');
$("a[class='nav active']").css('background-color','red');
//选取a标签中类名不是nav的元素
$("a[class!='nav']").css("color","#FFF");
//选取href属性值为s开头的a元素
$("a[href^='s']").css('color','#F09');
//选取href属性值以sp结束的a元素
$("a[href$='sp']").css('border','solid 2px #333');
//选取href属性值中含有o字符的a元素
$("a[href*='o']").css('font-size','20px');
//多属性过滤
$("a[class^='nav'][href$='jsp']").css('font-family','楷体');
});
</script>
</head>
<body>
<ul id="menu">
<li><a class="nav active" href="index.jsp">首页</a></li>
<li><a class="nav" href="show.asp">商品展示</a></li>
<li><a class="nav" href="about.php">关于我们</a></li>
<li><a class="nav" href="service.html">售后服务</a></li>
<li><a class="nav" href="login.htm">登录</a></li>
</ul>
</body>
</html>
