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>
结论：
CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别的更多相关文章
- html5 css选择器。 井号，句号的区别
.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...
- CSS选择器div和p的用法和区别
div,p.div p.div>p.div+p.div~p.div.a的用法和区别 div,p:选择所有<div>元素和<p>元素 <style> p,spa ...
- [attribute|=value]和[attribute^=value]选择器区别
1.[attribute|=value] [attribute|=value]选择器说明:http://www.w3school.com.cn/cssref/selector_attribute_va ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS 选择器(转)
原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...
- CSS选择器的一些记录
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- 精通 CSS 选择器
CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...
- CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...
- CSS 选择器汇总
CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS ...
随机推荐
- idea插件备份
- SAS与SATA的区别
SAS SATA的区别 协议方面 SAS(Serial Attached SCSI)即串行连接SCSI,SATA(Serial Advanced Technology Attachment)即串行高级 ...
- Apache ActiveMQ序列化漏洞(CVE-2015-5254)复现
Apache ActiveMQ序列化漏洞(CVE-2015-5254)复现 一.漏洞描述 该漏洞源于程序没有限制可在代理中序列化的类.远程攻击者可借助特制的序列化的java消息服务(JMS)Objec ...
- Spring Security 教程 大牛的教程
https://www.iteye.com/blog/elim-2247073 Spring Security 教程 Spring Security(20)——整合Cas Spring Securit ...
- SAP模块常用增强总结（转）
转自:http://blog.sina.com.cn/s/blog_4298a2c80102x40c.html MM模块: 采购订单增强: BADI :ME_GUI_PO_CUST ME_PROCES ...
- ABAP对象-面向对象（转）
转自:https://www.jianshu.com/p/f847c8f71438 1 面向对象基础 不多赘述何为对象与类.简单回顾一下在面向对象特性. 封装 限定内部资源的可见性 多态 相同名称的方 ...
- .net core使用NLog日志
前言:NLog日志对.net core web项目最新的支持在官网上有最新的介绍: 官网介绍地址:https://github.com/NLog/NLog/wiki/Getting-started-w ...
- WPF自定义控件的制作
因为有时候需要定制化的控件,需要多个控件的组合及复杂功能的集成,这样可以考虑自定义用户控件.下面分享一个简单的数值增减功能的自定义控件作为说明. 效果图如下: 1.创建自定义用户控件(添加->新 ...
- hibernateHQL
HQL 即Hibernate Query Language的缩写 hql和sql区别/异同 HQL ...
- Vuex细说
vuex 1,什么是 vuex? vuex 是一个专门为 vue.js 应用程序 开发的状态管理模式+库 它充当应用程序中所有组件的集中存储(数据状态) ,其规则确保状态只能以可预测的方式进行变更 并 ...