02.jQuery属性选择器

作者: 讲武德的年轻人 | 来源:发表于2019-12-14 17:08 被阅读0次

02.jQuery属性选择器
00.CSS基础知识回顾
选择器
html5选择器
HTML5-Day3
css选择器
CSS：选择器、继承、权重、文本标签、列表、单位、颜色
css学习笔记
第二章始
CSS选择器（转载）

<!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>