前言

　　　　首先你需要知道[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. python 动态语言和协议编程

    动态语言:不需要去定义变量的类型 协议编程:一个类实现了某个魔法函数,这个类就是什么类型,理解为协议

  2. hive引擎的选择：tez和spark

    背景 mr引擎在hive 2中将被弃用.官方推荐使用tez或spark等引擎. 选择 tez 使用有向无环图.内存式计算. spark 可以同时作为批式和流式的处理引擎,减少学习成本. 问题& ...

  3. Java开发桌面程序学习（八）——启动浏览器或者打开资源管理器操作与hyperlink超链接的使用

    启动浏览器或者打开资源管理器 启动浏览器 java1.6版本以上,Desktop Desktop.getDesktop().browse(new URI("www.cnblogs.com/k ...

  4. java基础(7):自定义类、ArrayList集合

    1. 引用数据类型(类) 1.1 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好 ...

  5. PHP的循环和函数

    1.循环      1.1for循环 for(初始值;条件;增量){ //循环体 } 1.2while.do-while while(条件){ } ------------------------- ...

  6. 从实例一步一步入门学习SpringCloud的Eureka、Ribbon、Feign、熔断器、Zuul的简单使用(附代码下载)

    场景 SpringCloud -创建统一的依赖管理: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102530574 Sprin ...

  7. 函数截流---js

    <div id="show">0</div> <button id="btn">click</button> & ...

  8. scrapy简单使用方法

    scrapy简单使用方法 1.创建项目:scrapy startproject 项目名例如:scrapy startproject baike windows下,cmd进入项目路径例如d:\pytho ...

  9. qt 网络库使用介绍

    qt 网络库使用介绍 在.pro文件中,要手动添加network模块:QT += network 有三个核心类, QNetworkAccessManager: 发送get或者post请求. 用get方 ...

  10. Linux:目录的查找

    搜索文件与目录 find [查找范围] [查找条件表达式] 常用的选项 -name 按名称查找,允许使用通配符 -type 按文件类型查找 文件类型包括: 普通文件 f 目录 d 块设备文件 b 字符 ...