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 ...
随机推荐
- java8中的stream().filter()的使用和Optional()
转: https://www.cnblogs.com/yimiyan/p/5992440.html Optional: https://www.cnblogs.com/zhangboyu/p/7580 ...
- pyqt4
PyQt4 工具包简介1.1 关于本指南 这是一个入门级的 PyQt 指南.其目的在于引导读者快速上手 PyQt4 工具包.该指南在 Linux 环境下创建并通过测试. 关于 PyQt PyQt 是用 ...
- 盖得化工--selenium翻页测试
Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...
- Ansible拷贝文件遇到的问题
ansible报错Aborting, target uses selinux but python bindings (libselinux-python) aren't installed 报错内容 ...
- 【转载】关闭XenServer中挂起(hang)虚机的方法
在XenServer中,碰到VM挂起(hang)的情况,也不是那么少见,而VM长时间挂起,那么很影响心情和后续的操作. 一般情况下,为了关闭VM或者重启VM,我们推荐这样的操作顺序: 进入到VM内,使 ...
- JDBC-通用查询
手动实现查询结果返回为一个对象集合 实体类 package com.jdbc; public class User { private Integer id; private String name; ...
- Math.random()和UUID.randomUUID().toString()性能对比【纯原】
Math.random()和UUID.randomUUID().toString()性能对比 不言而喻,因为Math.random()不需要保证唯一性,所做的操作远比UUID消耗更小的性能, 在部分要 ...
- POJ 2443 Set Operation
Set Operation Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 3558 Accepted: 1479 Des ...
- PHP 进行支付宝开发中return_url和notify_url的区别分析
在支付宝处理业务中return_url,notify_url是返回些什么状态呢,我们要根据它来做一些处理就必须了解return_url,notify_url的区别,下面我就来给大家介绍; 一.问题描述 ...
- VS2015 与 Git 的简单使用
前言 在白忙之中抽了点时间,记录了下 VS 与 Git 的简单使用. 在之前使用命令行的时候,提交或拉取代码时,总报错:(提取时遇到错误: Unsupported URL protocol),后来在网 ...