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 ...
随机推荐
- C++入门到理解阶段二基础篇(3)——C++数据类型
目录 1.数据类型概述 2.基本的内置类型 整型 实型(浮点型) 字符型 转义字符 字符串型 c风格的字符串 c++风格的字符串 布尔类型bool 1.数据类型概述 使用编程语言进行编程时,需要用到各 ...
- oracle查找某个字符在字符串中的个数的技巧
Oracle没有提供查找某个字符在字符串中出现次数的函数,当遇到这样的需求的时候,我们只能使用另外的方法去实现. 简单的思路就是,假设有个字符串str,然后里面有n个[a]字符,当把这n个[a]字符去 ...
- MapReduce Shuffle 和 Spark Shuffle 原理概述
Shuffle简介 Shuffle的本意是洗牌.混洗的意思,把一组有规则的数据尽量打乱成无规则的数据.而在MapReduce中,Shuffle更像是洗牌的逆过程,指的是将map端的无规则输出按指定的规 ...
- node.js箭头函数使用
ES6允许使用=>定义函数,箭头函数使得表达更加简洁,例如 // 正常函数写法 [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1 ...
- 练手WPF（三）——扫雷小游戏的简易实现（下）
十四.响应鼠标点击事件 (1)设置对应坐标位置为相应的前景状态 /// <summary> /// 设置单元格图样 /// </summary> /// <para ...
- NET EF 连接Oracle 的配置方法记录
主要记录下如何在EF 中连接Oracle s数据库,很傻瓜式,非常简单,但是不知道的童鞋,也会搞得很难受,我自己就是 1.创一个控制台程序,并且添加 Oracle.ManagedDataAccess ...
- HTML常用标签四
表单 表单的组成 一个完整的表单通常由表单域.表单控件(也称表单元素)和提示信息3各部分组成 表单域 表单域是一个包含表单元素的区域 在HTML中,<form> 标签用去定义表单域,以实现 ...
- 按需动态加载js
有些时间我们希望能按需动态加载js文件,而不是直接在HTML中写script标签. 以下为示例代码: var js = document.createElement('script'); js.asy ...
- 为Dynamics CRM注释的图片附件做个预览功能
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...
- protocol buffers 使用方法
protocol buffers 使用方法 为什么使用 Protocol Buffers 我们接下来要使用的例子是一个非常简单的"地址簿"应用程序,它能从文件中读取联系人详细信息. ...