<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<script src="js/jquery-1.12.4.js"></script>
<style type="text/css">
div{
background-color:#F00;
margin:5px;
}
</style>
</head>
<body>
<div id="div1" class="cls1" a="v1">1---</div>
<div a="v2">2---</div>
<div a="v1">3---</div>
<div a="v2" b="w1">4---</div>
<div a="v1">5---</div>
<div a="v12">6---</div>
<div a="v31" b="w2">7---</div>
<div b="w1">8---</div>
<div b="w2">9---</div>
<div b="w31">10---</div>
<script type="text/javascript">
$(function(){
// 选择有a属性的div元素，不管值是多少,变青色
$('div[a]').css('background-color','#0FF')
// 拥有某个属性的元素，且属性值是value，变绿
$('div[a=v1]').css('background-color','#0F0')
// 拥有某个属性的元素但是属性值不等于value，或不含有这个属性的元素,变黄
$('div[a!=v1]').css('background-color','#FF0')
// 拥有某个属性的元素但是属性值不等于value，变紫
$('div[a][a!=v1]').css('background-color','#F0F')
// 拥有某个属性的元素，属性值以value（v）开头,变紫
$('div[a^=v]').css('background-color','#F0F')
// 拥有某个属性的元素，属性值以value（1）结尾,变紫
$('div[a$=1]').css('background-color','#F0F')
// 拥有某个属性的元素，属性值包含value（1），变紫
$('div[a*=1]').css('background-color','#F0F')
// 如果需要元素同时满足多个属性选择器，中间不能有空格，因为空格代表层级选择器
$('div[a][b]').css('background-color','#F0F')
// 有a属性，但是没有b属性
$('div[a]:not([b])').css('background-color','#F0F')
// 有a属性，但是属性值不等于v1
$('div[a][a!=v1]').css('background-color','#F0F')
$('div[a]:not([a=v1])').css('background-color','#F0F')
// 有a属性，但是不能以1结尾
$('div[a]:not([a$=1])').css('background-color','#F0F')
// 有且只有a或b中的一个属性,有a没b或有b没a
$('div[a]:not([b]),div[b]:not([a])').css('background-color','#F0F')
});
</script>
</body>
</html>
网友评论