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属性选择器（同时匹配多个条件,与或非）（附样例）的更多相关文章

  1. jquery属性选择器（匹配具有指定属性的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery 属性选择器

    jquery 属性选择器   第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素即<l ...

  3. jquery-6 jquery属性选择器

    jquery-6 jquery属性选择器 一.总结 一句话总结:jquery操作就是选择器加jquery对象的各种方法. 1.大量操作样式用什么方式? 大批量样式通过加类和减类完成 2.jquery中 ...

  4. jquery属性选择器（同时匹配多个条件）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery属性选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery属性选择器.attr()和.prop()两种方法

    在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined. 原来jQuery ...

  7. Jquery 属性选择器&设置元素属性

    什么是属性选择器呢?感觉理解起来有点难,举个例子就很容易明白了,<div id="ajaxa"></div>这里的id就是属性,这下就很容易理解了, jqu ...

  8. [转]Jquery属性选择器（同时匹配多个条件,与或非）（附样例）

    1. 前言 为了处理除了两项不符合条件外的选择,需要用到jquery选择器的多个条件匹配来处理,然后整理了一下相关的与或非的条件及其组合. 作为笔记记录. 2. 代码 1 2 3 4 5 6 7 8 ...

  9. jquery属性选择器中|value和^value的区别

    jquery的属性选择中有两个比较混淆:一个是[attribute^value], 另一个是[attribute|value]. 先看解释: [attribute^value]:选取属性的值以valu ...

随机推荐

  1. 用矩阵和待定系数法求数列的分析(复杂度log(n))

    下载地址:http://pan.baidu.com/s/1nuVew6d

  2. centos7 修改 PATH环境变量（注意，不是添加！！！TMD）

    起因都是,参照阿里云的Java环境配置,MMP~ 现在我们分析一下这几句话.JAVA_HOME和JRE_HOME都是没问题的 CLASSPATH:注意 [  lib$:JRE  ]这部分,Linux环 ...

  3. 2018acm-icpc西安邀请赛后记

    第一次参加icpc的邀请赛,有一点小激动,深知大一弱队实力弱,赛前给队友的目标就是拿块铜,不打铁. 热身赛因为没有用过pc^2,codeblocks又用不习惯的原因,开始调工程调了很久,差一点拿到A题 ...

  4. Web压力测试工具 LoadRunner12.x简易入门教程--（一）回放与录制

        LoadRunner12.x简易入门教程--(一)回放与录制 今天在这里分享一下LoadRunner12.x版本的入门使用方法,希望对刚接触LoadRunner的童鞋有所帮助. LoadRun ...

  5. C语言指针详解(经典,非常详细)

    前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其 ...

  6. Dubbo的负载均衡

    背景 Dubbo是一个分布式服务框架,能避免单点故障和支持服务的横向扩容.一个服务通常会部署多个实例.如何从多个服务 Provider 组成的集群中挑选出一个进行调用,就涉及到一个负载均衡的策略. 几 ...

  7. Thread的setDaemon(true)方法

    定义:守护线程--也称“服务线程”,在没有用户线程可服务时会自动离开.优先级:守护线程的优先级比较低,用于为系统中的其它对象和线程提供服务. 设置:通过setDaemon(true)来设置线程为“守护 ...

  8. UVALive 7143 Room Assignment（组合数学+DP）

    题目链接 参考自:http://www.cnblogs.com/oyking/p/4508260.html 题意 n个人,其中有k对双胞胎.现有m间房间,每间房间有容量ci问分配房间的方案数. 分析 ...

  9. Python复习笔记（二）变量进阶

    02. 可变和不可变类型 不可变类型,内存中的数据不允许被修改: 数字类型 int , bool , float , complex , long(2.x) 字符串 str 元组 tuple 可变类型 ...

  10. C# 实现Bezier曲线（vs2008）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...