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

  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. 代码 <!DOCTYPE htm ...

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

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

随机推荐

  1. 【JZOJ4461】【GDOI2016模拟4.21】灯塔 分治

    题面 GDOI是一个地处丘陵的小国,为了边防建设,国王希望在国界线上的某一座山峰上建立一座灯塔,照亮整个边界.而灯塔建设的调研工作,就交给了你. GDOI的国境线上有N座连续的山峰,其中第i座的高度是 ...

  2. optim.py cs231n

    n如果有错误,欢迎指出,不胜感激 import numpy as np """ This file implements various first-order upda ...

  3. PHP 中Session 反序列化机制的三种方法

    �php.ini中存在三项配置项: session.save_path="" --设置session的存储路径 session.save_handler=""- ...

  4. 如何建一个Liferay 7的theme

    首先附上原文链接Creating theme and Deploying in liferay 7 by using Eclipse 1.第一步:建一个Liferay module 项目,选择them ...

  5. 在Liferay 7中如何自定义一个Portlet的toolbar

    哈哈,懒得自己写了,直接贴教程了,你想为那个portlet添加自定义的toolbar,就在javax.portlet.name=属性中写上它的值.教程博客:Adding Portlet URL in ...

  6. 非接触型手掌静脉识别 PalmSecure™

    静脉识别,使用近红外线读取静脉模式,与存储的静脉模式进行比较,进行本人识别的识别技术.富士通的PalmSecure™,利用该技术,由离开识别装置的位置,使用近红外线拍摄,与预先存储的静脉模式进行比较从 ...

  7. Django中blank和NULL

    当我们在django中添加一个数据库字段时,我们通常会写models.CharField(max_length = 100,null = True,blank = True).用ForeignKey, ...

  8. Directx11教程(14) D3D11管线(3)

    原文:Directx11教程(14) D3D11管线(3)       现在我们开始学习一些CP(command processor)的知识.参考资料: http://fgiesen.wordpres ...

  9. 将Gradle项目发布到Maven Central库中

    本文主要介绍如何一个由gradle构建的项目部署到Maven Central. 网上大部分都是介绍如何将由maven构建的项目部署到Maven Central.与Gradle相关的比较少. 申请账号 ...

  10. day4_python之三元表达式、列表推导式、生成器表达式

    一.三元表达式 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(res) 二.列表解析 l = [] for ...