Jquery | 基础 | 属性过滤选择器

<!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">
    <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <title>使用jQuery 属性过滤选择器</title>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        div {
            float: left;
            border: solid 1px #ccc;
            margin: 8px;
            width: 65px;
            height: 65px;
            display: none
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function () { // 显示所有含有name 属性的元素
                $("div[name]").show(1000);

            })
            $("#button2").click(function(){
                //显示所有属性title的值是"A"的元素
                 $("div[title='n']").show(1000);
             })
            $("#button3").click(function(){
                //显示属性title的值不是"n"的元素
                 $("div[title!='n']").show(1000);
            })
            $("#button4").click(function(){
                //显示所有属性title的值以"n"开始的元素
                $("div[title^='n']").show(1000);
            })
            $("#button5").click(function(){
                //显示所有属性title的值以"e"结束的元素
                $("div[title$='e']").show(1000);
            })
            $("#button6").click(function(){
                //显示所有属性title的值中含有"e"的元素
                 $("div[title*='e']").show(1000);
            })
            $("#button7").click(function(){
               //显示所有属性title的值中含有"e",且属性id的值是"div2"的元素
                $("div[id='div2'][title*='e']").show(1000);
            })
        })
    </script>
</head>

<body>

    <div id="div1" name="n1">hello</div>
    <div title="n" name="n2">world</div>
    <div id="div2" title="ne">good morning</div>
    <div title="nef">good afternoon</div>

    <button id="button1">显示所有含有name 属性的元素</button>
    <button id="button2">显示所有属性title的值是"A"的元素 </button>
    <button id="button3">显示属性title的值不是"n"的元素</button>
    <button id="button4">显示所有属性title的值以"n"开始的元素</button>
    <button id="button5">显示所有属性title的值以"e"结束的元素</button>
    <button id="button6">显示所有属性title的值中含有"e"的元素</button>
    <button id="button7">显示所有属性title的值中含有"e",且属性id的值是"div2"的元素</button>
</body>

</html>