<!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>
网友评论