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 ...
随机推荐
- njnja 安装
git clone git://github.com/ninja-build/ninja.git && cd ninja 安装re2c wget https://kojipkgs.f ...
- jsp页面科学计数法显示问题的解决办法
在JSP页面中返回的double类型的数值,如果数值过大,就会被显示成科学计数法. 这个问题通常出现在表单填写的input中,因此是必须要解决的问题. JSTL提供了标准的数值格式化标签,使用上非常简 ...
- linux如何修改权限详解
前言 今日,同事问我,服务器上拷贝过来的tomcat,怎么执行不了./startup.sh.于是,我一想,那肯定是没有权限的问题了.于是使用chmod命令更改了权限后,就可以执行了.项目正常启动.我想 ...
- char.IsWhiteSpace(str,num),TimeSpan
IsWhiteSpace(String, Int32) 指示指定字符串中位于指定位置处的字符是否属于空格类别. TimeSpan TimeSpan ts=new TimeSpan(4,30,0); C ...
- 怎样深入学习php，成为php高手!?
本文章开头我想问一句话:PHP是做什么的? 因为这是面试中会问到的一个问题,虽然它看起来很简单,回答做网站的,也就是个简单建站的水平.回答做网站后端开发的,对PHP有了一定的认识,回答做后端处理的,有 ...
- crm-1
1.crm 客户关系管理系统 :1.业务逻辑部分 2.权限插件 2.forms组件之modelform modelform就是model+form ,form根据model的字段生成标签 ,校验信息 ...
- JavaScript初探 一（认识JavaScript）
JavaScript 初探 JavaScript插入HTML中 内嵌的Js代码 <!DOCTYPE html> <html> <head> <meta cha ...
- Dynamics CRM 2015/2016新特性之三十二：新增乐观并发处理
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复215或者20160328可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- iOS 禁用`URL Scheme`和`Universal Link`(通用链接)
为什么要禁用URL Scheme和Universal Link(通用链接) 通常我们APP中都会嵌套一些web页面,有时我们的web页面会被DNS劫持从而跳转到其他APP中:或者是某些APP的Univ ...
- [Go] gocron源码阅读-go语言的结构体
结构体类型 type 名字 struct{},下面这段是github.com/urfave/cli包里的代码,声明了一个App的结构体类型 type App struct { // The name ...