Jquery属性选择器(同时匹配多个条件,与或非)(附样例)
1. 前言
为了处理除了两项不符合条件外的选择,需要用到jquery选择器的多个条件匹配来处理,然后整理了一下相关的与或非的条件及其组合。
作为笔记记录。
2. 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html>
<head>
<title>Test multi selection</title>
<script src= "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script type= "text/javascript" >
$().ready( function (){
debugger; // open console and click F10
//多条件选择
$( '#td1,#td2,p' ).css( 'color' , 'red' );
//选择内容不是id=td1
$( 'tbody td:not(#td1)' ).css( 'color' , 'green' );
//选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素
$( '[attr1="a1"][attr2="a2"]' ).css( 'color' , 'blue' );
//选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素
$( '[attr1="a1"],[attr2="a2"]' ).css( 'color' , 'yellow' );
//选择不满足 条件1 attr1="a1" 的元素
$( 'tbody td[attr1!="a1"]' ).css( 'color' , 'purple' );
//选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素
$( 'tbody td:not([attr1="a1"],[attr2="a2"])' ).css( 'color' , 'orange' );
$( 'tbody td[attr1!="a1"][attr2!="a2"]' ).css( 'color' , 'black' );
//选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素
$( 'tbody td:not([attr1="a1"][attr2="a2"])' ).css( 'color' , '#ff7700' );
$( 'tbody td[attr1!="a1"],tbody td[attr2!="a2"]' ).css( 'color' , 'black' );
//选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2", 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素
$( 'tbody td[attr1!="a1"],[attr2!="a2"]' ).css( 'color' , 'grey' );
})
</script>
</head>
<body>
<table border= "1px" >
<thead>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</thead>
<tbody>
<tr>
<td id= "td1" >1</td>
<td id= "td2" >2</td>
<td id= "td3" attr1= "a1" attr2= "a2" >3</td>
<td id= "td4" attr1= "a1" >4</td>
<td id= "td5" >5</td>
</tr>
</tbody>
</table>
<p>I am first paragraph </p>
</body>
</html>
|
3. 效果
1
2
|
//多条件选择
$( '#td1,#td2,p' ).css( 'color' , 'red' );
|
1
2
|
//选择内容不是id=td1
$( 'tbody td:not(#td1)' ).css( 'color' , 'green' );
|
1
2
|
//选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素
$( '[attr1="a1"][attr2="a2"]' ).css( 'color' , 'blue' );
|
1
2
|
//选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素
$( '[attr1="a1"],[attr2="a2"]' ).css( 'color' , 'yellow' );
|
1
2
|
//选择不满足 条件1 attr1="a1" 的元素
$( 'tbody td[attr1!="a1"]' ).css( 'color' , 'purple' );
|
1
2
|
//选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素
$( 'tbody td:not([attr1="a1"],[attr2="a2"])' ).css( 'color' , 'orange' );
|
1
2
|
//选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素(等价于上一条)
$( 'tbody td[attr1!="a1"][attr2!="a2"]' ).css( 'color' , 'black' );
|
1
2
|
//选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素
$( 'tbody td:not([attr1="a1"][attr2="a2"])' ).css( 'color' , '#ff7700' );
|
1
2
|
//选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素(等价于上一条)
$( 'tbody td[attr1!="a1"],tbody td[attr2!="a2"]' ).css( 'color' , 'black' );
|
1
2
|
//选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2", 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素
$( 'tbody td[attr1!="a1"],[attr2!="a2"]' ).css( 'color' , 'grey' );
|
4. 参考
http://www.runoob.com/jquery/jquery-ref-selectors.html
转载于:https://www.cnblogs.com/fuxp/p/9903184.html
Jquery属性选择器(同时匹配多个条件,与或非)(附样例)相关推荐
- jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、
jQuery和源生DOM的转化 案例 <body> <p id="test">123</p> <p>456</p> &l ...
- JQuery属性选择器(属性值是变量、多属性选择)
结论: 1.属性值是变量时,$("div[属性 = "+变量+"]"):2.属性值是变量时,$(`div[属性 = ${变量}`):3.多属性选择器时,$(&q ...
- mysql数据库创建表时通过设置什么属性可以设置字段编号自动增加_Mysql数据库创建表样例和解释...
目录 照着下面样例创建表,设置自己的表名,字段和字段属性,基本都能满足需求啦: 参数解释: 1. AUTO_INCREMENT是设置该字段为自增列: 2. COMMENT '邮箱' :字段备注邮箱 3 ...
- jquery可见性选择器(匹配匹配所有显示的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素. $("[href]") 选取所有带有 href 属性的元素. $("[href='#']") ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选 ...
- jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
- html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
- jQuery对象,jQuery查找标签,层级选择器,属性选择器,表单筛选器,操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
最新文章
- Java中byte与16进制字符串的互相转换
- HttpClient的一种简单实现Demo
- 揭开Google暴利秘密的数学公式
- 了解***的初级阶段---网络信息探测技巧
- bzoj1230[Usaco2008 Nov]lites 开关灯*
- linux 脚本 DIST,shell 脚本判断linux 的发行版本
- What's NEW in C++/CLI Language
- 什么? 搞不定redis分布式锁?
- 鱼c工作室小甲鱼的水平_历历万乡 | 得两代帝王喜爱,又上过国际舞台!深冬就去浙个“年鱼福气”加持的小村子吧!...
- poj 1270 Following Orders
- 转--linux开启FrameBuffer
- 持久化存储技术之SharedPreferences存储
- Swift - 通过url地址打开web页面
- 车牌识别算法实践(一):先验知识
- Rhodamine-PEG-Pyrene,罗丹明聚乙二醇芘丁酸,Pyrene-PEG-RB
- sql判断邮箱是否合法_用正则表达式验证邮箱与手机号的合法性
- 这游戏到底怎么了? 一年后,再看《刺客信条奥德赛》
- easyexcel插件
- DZ拿shell总结
- java 本周一_java 获取本周一的日期