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. Android——系统权限

    Android是一个特权分隔的操作系统,每一个应用程序运行在不同的系统身份中(Linux的user ID和group ID).系统部分和不同的身份被隔离开来.因此,Linux隔离了应用程序(与其它程序 ...

  2. java获取外网ip地址

    转自:http://blog.163.com/houjunchang_daxue/blog/static/13037938320134543310451/ /** * 获取外网IP.归属地.操作系统 ...

  3. 2018-8-10-C#-快速释放内存的大数组

    title author date CreateTime categories C# 快速释放内存的大数组 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17 ...

  4. JSP Web第七章整理复习 Servlet基础知识

    P206-208 Servlet项目的创建,web.xml的配置及标签含义,相关程序 创建:new 一个Servlet类,继承自javax.servlet.http.HttpServlet; 写doG ...

  5. springboot security 安全

    spring security几个概念 “认证”(Authentication) 是建立一个他声明的主体的过程(一个“主体”一般是指用户,设备或一些可以在你的应用程序中执行动作的其他系统) . “授权 ...

  6. tp5 上传视频到七牛云

    废话少说直接上代码 html <!DOCTYPE html> <html> <head> <title></title> </head ...

  7. 判断字符s是否为正整数和正小数

    下面一段代码是判断是否为正整数和正小数的:

  8. Java练习 SDUT-2444_正方形

    正方形 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给出四个点,判断这四个点能否构成一个正方形. Input 输入的 ...

  9. TIJ——Chapter Thirteen:Strings

    String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...

  10. 【NS2】添加mUDP、mUdpSink和mTcpSink模块

    根据柯老师的教材可知,mUDP是UDP的延伸,除了具有UDP的功能外,还能记录所发送的包的信息.mUdpSink可以把接收到的包的信息记录 到文件中.mTcpSink是TCPsink的延伸,除了具有T ...