前言

　　　　首先你需要知道[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. 【MySQL】MySQL 8.0的SYS视图

    MySQL的SYS视图 MySQL8.0的发展越来越趋同与Oracle,为了更好的监控MySQL的一些相关指标,出现了SYS视图,用于监控. 1.MySQL版本 (root@localhost) [s ...

  2. D - Ugly Problem HDU - 5920

    D - Ugly Problem HDU - 5920 Everyone hates ugly problems. You are given a positive integer. You must ...

  3. SpringCloud之API网关与服务发现——Cloud核心组件实战入门及原理

    微服务发展历史 单体模式——>服务治理(服务拆分)——>微服务(细分服务)——>Segments(服务网格) 微服务 VS SOA 微服务:模块化.独立部署.异构化 SOA:共同的治 ...

  4. Asp.net MVC 中的TempData对象的剖析

    另一篇文章,也对TempData 做了很详细的介绍,链接地址:https://www.jianshu.com/p/eb7a301bc536   . MVC中的 TempData 可以在Controll ...

  5. Activit 5.13 工作流部署新版本后回退到上一个版本

    有时因为某些原因Activit流程部署新版本后,还没有发起流程,回退到上一个版本.操作过程: 1.查询版本更新记录,记录字段ID_值,假设值为100: select to_char(t.deploy_ ...

  6. 由定时脚本错误以及Elasticsearch配置错误引发的Flink线上事故

    近期接手离职同事项目,突然遇到线上事故,Flink无法正常聚合数据生成指标. 以下是详细的排查过程: 问题复现 清晨,运维报告Flink数据分析模块无法正常生成指标数据. 赶紧登陆Flink所在机器, ...

  7. [b0004] Hadoop 版hello word mapreduce wordcount 运行

    目的: 初步感受一下hadoop mapreduce 环境: hadoop 2.6.4 1 准备输入文件 paper.txt 内容一般为英文文章,随便弄点什么进去 hadoop@ssmaster:~$ ...

  8. Mac遇到挖矿程序的应急方法

    Mac遇到挖矿程序应急的方法 工作笔记:   1.起因:监控发现jsonrpc挖矿报警,询问当事人描述当时情况是安装了sketch软件.   网上可以定位到该IOC   运行后该IOC流量依然可以观测 ...

  9. [日常] 使用TCPDUMP和Ethereal抓包分析HTTP请求中的异常情况

    在测试功能的过程中,出现这样一种现象.前端js发起ajax请求后,在浏览器的审查元素网络状态中可以看到status为pending,等15秒以后js会把当前超时的请求取消掉,变成了红色的cancel. ...

  10. react的路由中的switch和exact的使用

    刚刚接触react不久,发现在项目中的路由配置中会有switch和exact的使用,现总结如下 switch  为了解决route的唯一渲染(仅仅渲染一个路由路径)出现的 <Switch> ...