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基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
最新文章
- 星巴克不使用两阶段提交
- C++ string流
- keras从入门到放弃(四)多分类问题
- 1.Excel业务分析数据
- Andoroid之BottomNavigationView右上角添加红点布局和自动跳转到底部具体第几个Tab
- java 树状数据算法_使用递归算法结合数据库解析成Java树形结构的代码解析
- rust怎么上邮轮_20年内泰坦尼克号将消失 英公司推三千米沉船之旅
- 在新版本caffe里添加新的一层(向旧格式中加)
- select - I/O多路复用
- sql server 高可用故障转移(1)
- 1解锁方式9008_黔隆科技刷机教程金立E7忘记密码刷机解锁降级救砖解屏幕锁账户锁教程...
- 数据库1_五大主流数据库模型
- Java培训机构可靠吗?
- oracle pdb与cdb区别,浅谈oracle 12C的新特性-CDB和PDB
- 搜索广告的整体架构-子模块划分
- zabbix图形中文字显示方框或乱码问题
- matlab ode45的使用
- 中国园区经济行业“十四五“规划与前景深度研究报告2021年版
- 软件企业税收优惠政策2023
- PHP扩展undefined symbol,解决 undefined symbol: php_pdo_register_driver in Unknown on line 0