前言

　　　　首先你需要知道[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>

　　结论：

　　　　　　

　　　　　　  参考原文

CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别的更多相关文章

  1. html5 css选择器。 井号，句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  2. CSS选择器div和p的用法和区别

    div,p.div p.div>p.div+p.div~p.div.a的用法和区别 div,p:选择所有<div>元素和<p>元素 <style> p,spa ...

  3. [attribute|=value]和[attribute^=value]选择器区别

    1.[attribute|=value] [attribute|=value]选择器说明:http://www.w3school.com.cn/cssref/selector_attribute_va ...

  4. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  5. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  6. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  7. 精通 CSS 选择器

    CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...

  8. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  9. CSS 选择器汇总

    CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS ...

随机推荐

  1. 教妹学 Java：难以驾驭的多线程

    00.故事的起源 “二哥,上一篇<集合>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很关心. “这篇文章的浏览量要比第一篇<泛型>好得多.” “这是 ...

  2. Vue修改单个组件的背景颜色

    组件默认背景颜色为白色,但工作需要改成黑色,于是研究了一番. 很简单,只需在组件中使用两个钩子函数beforeCreate (),beforeDestroy () 代码如下: beforeCreate ...

  3. Redis for OPS 06：Redis Cluster 集群

    写在前面的话 前面的主从,HA 都只是解决我们数据安全性方面的问题,并没有解决我们业务瓶颈的问题.当业务并发到达一定瓶颈的时候,我们需要对服务进行横向扩展,而不是纵向扩展.这就需要引入另外一个东西,R ...

  4. C#上手练习4（Break、CONITINUE语句）

    C# 中的 continue 语句有点像 break 语句.但它不是强制终止,continue 会跳过当前循环中的代码,强制开始下一次循环. 对于 for 循环,continue 语句会导致执行条件测 ...

  5. Wpf Backgroundworker

    <Window x:Class="WpfApp53.MainWindow" xmlns="http://schemas.microsoft.com/winfx/20 ...

  6. Vue基础语法(二)

    class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 style绑定 v-bind:style=" ...

  7. jenkins在搭建中常见的问题

    1.window环境读取不到chrom.exe System.setProperty("webdriver.chrome.driver","chromedriver.ex ...

  8. [b0026] python 归纳 (十一)_线程_threading.Thread

    总结: 默认父线程跑完,子线程并不会马上退出,不像 thread.start_threadXXXX 父线程跑完了,并没有退出,一直在那里 线程启动速度很快,不占多少开销,不到1毫 秒 代码: # -* ...

  9. Zeppelie连接jdbc的使用

    1. 下载 wget http://apache.mirror.cdnetworks.com/zeppelin/zeppelin-0.8.1/zeppelin-0.8.1-bin-all.tgz 2. ...

  10. SRDC - ORA-1548: Checklist of Evidence to Supply (Doc ID 1682693.1)

    SRDC - ORA-1548: Checklist of Evidence to Supply (Doc ID 1682693.1) Action Plan 1. Execute srdc_db_u ...