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. 集合-Collection接口

    集合 和 数组 的比较: 数组 - 本质上就是在内存空间中申请的一段连续内存空间,存放多个相同类型的数据 - 数组一旦定义完毕,则在内存空间中的长度固定. - 插入/删除元素时可能导致大量元素的移动, ...

  2. Leetcode884.Uncommon Words from Two Sentences两句话中的不常见单词

    给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不常用单 ...

  3. js简单倒计时

    不想每次用倒计时,都现写代码,比较烦,这里记一下,也顺便分享一些倒计时简单的逻辑. 如果你有更简单方便的代码,可以分享给大家. var method = { countdownObj: { timer ...

  4. thinkphp5.0 模板输出常用内容

    1.在模板获取session和cookie等全局变量 {$Think.session.user_id}//输出$_SESSION['user_id']变量 2.获取请求信息 {$Request.con ...

  5. Effective Modern C++：04智能指针

    裸指针有着诸多缺点:裸指针的声明中看不出它指向的是单个对象还是数组:裸指针的声明中也无法看出使用完它指向的对象后是否需要删除,也就是声明中看不出裸指针是否拥有其指向的对象:即使知道要析构裸指针指向的对 ...

  6. TP3.2的URL重写省略index.php问题

    1. 在tp3框架的配置文件里,明确指定了路由的格式,这个配置位于thinkPHP文件夹下的conf文件夹里的convention.php中,修改以下字段 'URL_MODEL' => 2, # ...

  7. Unicode与FFFE(记一个蛋疼的项目)

    好久没更新博客了. 近期忙着一个项目, 还要应付各种考试就顾不上博客了. 今天遇到了一个蛋疼的问题, 通过BLE4.0与蓝牙外设通信. 按照客户给的协议文档发送的数据, 可是外设不能正确识别.折腾了一 ...

  8. find 使用搜集

    find:-atime +n/-n:表示访问或执行时间大于或小于n天的文件-ctime +n/-n:表示写入.更改inode属性的时间大于或小于n天的文件-mtime +n/-n:表示写入时间大于或小 ...

  9. Spring读取mybatis在多个jar包下的的mapper文件

     刚开始的时候我的配置文件在同名目录下都是在/mapper下,导致只能读取一个jar中的mapper文件.先解决如下: 1.将mapper文件放在不能放在同名的目录下.        比如:user. ...

  10. javascript实现html中关键字查询

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...