CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别

　　前言

　　　　首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么？

　 使用场景（下面我用获取input为例，逐步描述何时使用[attribute | = value] 和 [attribute ^ = value]）

　　　　①：type相同，name不同，没有class（获取type即可，$("input[type=text]")）

　　　　 <input type="text" name="mary1" placeholder="mary" />
        <input type="text" name="mary2" placeholder="mary" />
        <input type="text" name="mary3" placeholder="mary" />

　　　　②：type不同，name相同，没有class（获取name即可，$("input[name=tom]")）

　　　　 <input type="month" name="tom" placeholder="tom" />
        <input type="number" name="tom" placeholder="tom" />
        <input type="text" name="tom" placeholder="tom" />

　　　　③：type不同，name不同，没有class（通过[attribute|=value] 获取name，$("input[name|=kevin")）

　　　　 <input type="month" name="kevin-1" placeholder="kevin" />
        <input type="number" name="kevin-2" placeholder="kevin" />
        <input type="text" name="kevin-3" placeholder="kevin" />

　　　　④：type不同，name不同且name值没有'-'，没有class（通过[attribute ^ = value]获取name，$("input[name^=bob")）

　　　　 <input type="month" name="bob1" placeholder="bob"  />
        <input type="number" name="bob2" placeholder="bob"  />
        <input type="text" name="bob3" placeholder="bob"  />

　　完整示例demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            .tutu1 {
                margin: 20px;
                border: 2px solid red;
            }
            
            .tutu2 {
                margin: 20px;
                border: 2px solid blue;
            }
            
            .tutu3 {
                margin: 20px;
                border: 2px solid green;
            }
            .tutu4 {
                margin: 20px;
                border: 2px solid rosybrown;
            }
        </style>
    </head>

    <body>
        
        <!-- type相同，name不同，没有class -->
        <input type="text" name="mary1" placeholder="mary" />
        <input type="text" name="mary2" placeholder="mary" />
        <input type="text" name="mary3" placeholder="mary" />
        <hr />
        
        <!-- type不同，name相同，没有class -->
        <input type="month" name="tom" placeholder="tom" />
        <input type="number" name="tom" placeholder="tom" />
        <input type="text" name="tom" placeholder="tom" />
        <hr />
        
        <!-- type不同，name不同，没有class -->
        <input type="month" name="kevin-1" placeholder="kevin" />
        <input type="number" name="kevin-2" placeholder="kevin" />
        <input type="text" name="kevin-3" placeholder="kevin" />
        <hr />
        
        
        <!-- type不同，name不同且name值没有'-'，没有class -->
        <input type="month" name="bob1" placeholder="bob"  />
        <input type="number" name="bob2" placeholder="bob"  />
        <input type="text" name="bob3" placeholder="bob"  />
        <hr />
        
        <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function() {
                $("input[type=text]").addClass("tutu1");
            });

            $(function() {
                $("input[name=tom]").addClass("tutu2");
            });

            $(function() {
                $("input[name|=kevin").addClass("tutu3");
            });
            
            $(function() {
                $("input[name^=bob").addClass("tutu4");
            });
        </script>
    </body>

</html>

　　结论：

　　　　　　 参考原文