[转]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
---------------------
作者:85541585
来源:CNBLOGS
原文:https://www.cnblogs.com/fuxp/p/9903184.html
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件
[转]Jquery属性选择器(同时匹配多个条件,与或非)(附样例)的更多相关文章
- jquery属性选择器(匹配具有指定属性的元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 属性选择器
jquery 属性选择器 第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...
- jquery-6 jquery属性选择器
jquery-6 jquery属性选择器 一.总结 一句话总结:jquery操作就是选择器加jquery对象的各种方法. 1.大量操作样式用什么方式? 大批量样式通过加类和减类完成 2.jquery中 ...
- jquery属性选择器(同时匹配多个条件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...
- Jquery 属性选择器&设置元素属性
什么是属性选择器呢?感觉理解起来有点难,举个例子就很容易明白了,<div id="ajaxa"></div>这里的id就是属性,这下就很容易理解了, jqu ...
- Jquery属性选择器(同时匹配多个条件,与或非)(附样例)
1. 前言 为了处理除了两项不符合条件外的选择,需要用到jquery选择器的多个条件匹配来处理,然后整理了一下相关的与或非的条件及其组合. 作为笔记记录. 2. 代码 <!DOCTYPE htm ...
- jquery属性选择器中|value和^value的区别
jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...
随机推荐
- python 正则表达式常用操作符
- log4j:ERROR Could not read configuration file [log4j.properties]
遇到这个错误,程序能够正常运行,log4j.properties也在classpath中,后来在网上查了资料,把下面这个语句去掉就好啦. PropertyConfigurator.configure( ...
- Ui自动化测试框架
为了提高我们的UI测试效率,我们引用Ui自动化测试框架,这里简单先描述一下,后续会详细补充: 了解一个测试框架,我们就需要了解一下源码,能看懂源码即可: 1.稳定先封装wait EC,电脑性能配置较好 ...
- 开窗函数over()中partition by关键字解析
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- oralce update操作
1.基本语法:update 表名 set 列名=表达式 [列名=表达式. . . ] where 条件 2.使用的注意事项: v UPDATE语法可以用新值更新原有表行中的各列 把zs的性别改为女 ...
- HZOJ Permutation
输出原序列有45分…… 字典序最小可以和拓扑序联系起来. 根据原来的题意不是很可做,于是对原序列求逆,令q[p[i]]=i; 那么就成功将题意转化:相邻元素值的差大于等于k时可以交换,使序列字典序最小 ...
- jquery解析XML文件实现的省市联动
XML我是直接在网上下载的文件包 拿过来用的 jquery我用的是3.1的 前台页面 <form action="buy.html" method="get&quo ...
- jQuery 手风琴效果
//点击标题弹出对应的div 再次点击则隐藏 //jQuery只能获取行内的样式 没法获取头部的样式 $(".parentWrap .menuGroup span.groupTitle&qu ...
- 查看JAVA占用CPU高的线程日志
# . 查看主进程占用cpu高 top # java # . 按照线程占用cpu由高到低进行排查: -o THREAD,tid, # USER %CPU PRI SCNT WCHAN USER SYS ...
- jquery的操作
jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...