Jquery属性选择器(同时匹配多个条件,与或非)(附样例)
1. 前言
为了处理除了两项不符合条件外的选择,需要用到jquery选择器的多个条件匹配来处理,然后整理了一下相关的与或非的条件及其组合。
作为笔记记录。
2. 代码
<!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. 效果
//多条件选择
$('#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');
//选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素(等价于上一条)
$('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');
//选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素(等价于上一条)
$('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');
4. 参考
http://www.runoob.com/jquery/jquery-ref-selectors.html
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. 代码 1 2 3 4 5 6 7 8 ...
- jquery属性选择器中|value和^value的区别
jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...
随机推荐
- 关于chrome控制台出现代码叠加页面不能正常显示大小问题
见下图页面出现在chrome中的情况 描述状态:代码都变小了才出现控制台代码叠加问题 解决办法:使用鼠标滚轮放大代码就行啦,在设置里面让页面的大小显示为100%就可以了.
- PHP依赖倒置和控制反转
判断代码的好坏,我们有自己的标准:高内聚,低耦合.为了解决这一问题,php中有许多优秀的设计模式,比如工厂模式,单例模式. 而在代码中体现出来的设计模式,就如依赖注入和控制反转. 那什么是依赖注入? ...
- CSS的显示模式
div与span div与span有什么区别 div单独占一行,span不会单独占一行 div是容器级的标签,而span是一个文本级的标签 容器级的标签有:div , h , ul , ol , dl ...
- GO语言的进阶之路-Golang高级数据结构定义
GO语言的进阶之路-Golang高级数据结构定义 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们之前学习过Golang的基本数据类型,字符串和byte,以及rune也有所了解, ...
- win10重复安装
使用大白菜启动盘装win10的时候,一直循环的重启然后设置,然后再重启,再设置.陷入了死循环. 解决办法:在自定义快捷键那个界面按 Ctrl+Shift+F3 .这是直接进入桌面的快捷键.
- maven中经常使用的插件
tomcat插件:非常实用,特点就是不用配置tomcat,可以任意修改端口号. <plugin> <groupId>org.apache.tomcat.maven</gr ...
- Hive记录-Hive常用命令操作
1.hive支持四种数据模型 • external table ---外部表:Hive中的外部表和表很类似,但是其数据不是放在自己表所属的目录中,而是存放到别处,这样的好处是如果你要删除这个外部表,该 ...
- Ubuntu 下 Tomcat7 的安装和配置
tomcat下载地址:http://tomcat.apache.org/download-70.cgi 声明:下面的内容和原创笔者的博文的内容差不多,不一样的只是tomcat7的安装目录不同,我按照我 ...
- Http请求中Content-Type讲解以及在Spring MVC中的应用【转】
完全引用自: http://blog.csdn.net/blueheart20/article/details/45174399#t1 此文讲得很清晰,赞! 引言: 在Http请求中,我们每天都在 ...
- 绕过/*,web.xml直接访问jsp【转】
web.xml中如果配置了/* 全匹配,那么不能用servet去响应页面返回了,因为全都被会/*拦截. <servlet> <servlet-name>validateAuth ...