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 ...
随机推荐
- 疑问：Spring 中构造器、init-method、@PostConstruct、afterPropertiesSet 孰先孰后，自动注入发生时间
一.前言 spring的一大优点就是扩展性很强,比如,在spring bean 的生命周期中,给我们预留了很多参与bean 的生命周期的方法.大致梳理一下,有以下几种: 通过实现 Initializi ...
- java基础(18):集合、Iterator迭代器、增强for循环、泛型
1. 集合 1.1 集合介绍 集合,集合是java中提供的一种容器,可以用来存储多个数据. 在前面的学习中,我们知道数据多了,可以使用数组存放或者使用ArrayList集合进行存放数据.那么,集合和数 ...
- 多线程学习二：线程池 ExecutorService
创建线程池的2种方式: 使用线程池方式1--Runnable接口: 通常,线程池都是通过线程池工厂创建,再调用线程池中的方法获取线程,再通过线程去执行任务方法. Executors:线程池创建工厂类: ...
- MIME格式解析
- 邮件例子 一个MIME格式的邮件例子如下: Return-Path: <mlemos@acm.org> To: Manuel Lemos <mlemos@linux.local& ...
- 深浅拷贝的应用-copy、mutableCopy
ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController //如果想让li ...
- 微信小程序初体验遇到的坑
今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下, ...
- 剑指offer 13：数值的整数次方
题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0 问题分析 计算一个浮点数的整数次 ...
- python基础-并发编程02
并发编程 子进程回收的两种方式 join()让主进程等待子进程结束,并回收子进程资源,主进程再结束并回收资源 from multiprocessing import Process import ti ...
- Mysql—常见查询命令
查询mysql的日志 -- 查找错误日志文件路径 mysql> show variables like "log_error"; -- 查找通用日志文件路径 mysql> ...
- wsl笔记
目录 环境 修改更新源 新建用户 设置超级用户 环境变量 zsh美化终端 设zsh为默认shell 环境变量PATH 开启 ssh 远程连接 apt命令与问题 windows 和 wsl 互相访问文件 ...