Jquery:属性选择器（同时匹配多个条件,与或非）

前言

在处理ESA中的table内js代码的时候出现了问题，主要是为了让同一个div下的不同选项来处理不同的操作，为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。

代码

// 内部操作监听
$(elem).on("click",".esa-table-body [esa-event][esa-event!='checkbox'][esa-event!='radio']",function(e){
                
})
// 头尾时间监听
$(elem).on("click",".esa-table-head [esa-event],.esa-table-foot [esa-event],.esa-table-body [esa-event='checkbox'],[esa-event='radio']",function(e){
                
})

示例

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://blog.bug-maker.com/admin/js/jquery.js?v=17.10.30"></script>
    <script type="text/javascript">
 
    $().ready(function(){
         
        debugger;// open console and click F10
        //多条件选择
        $('#table1 #td1-1,#td1-2').css('color','red');
        //选择内容不是id=td1
        $('#table2 tbody td:not(#td2-1)').css('color','green');
        //选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table3 [attr1="a1"][attr2="a2"]').css('color','blue');
        //选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素
        $('#table4 [attr1="a1"],#table4 [attr2="a2"]').css('color','yellow');
 
        //选择不满足 条件1 attr1="a1" 的元素
        $('#table5 tbody td[attr1!="a1"]').css('color','purple');
         
        //选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素
        $('#table6 tbody td:not([attr1="a1"],[attr2="a2"])').css('color','red');
        $('#table6 tbody td[attr1!="a1"][attr2!="a2"]').css('color','red');
 
        //选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table7 tbody td:not([attr1="a1"][attr2="a2"])').css('color','red');
        $('#table7 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
 
        //选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素
        $('#table8 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
    })
 
    </script>
</head>
<body>
    <p>第一个：多条件选择</p>
    <table border="1px" id="table1">
        <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">1</td><td id="td1-2">2</td><td id="td1-3" attr1="a1" attr2="a2">3</td><td id="td1-4" attr1="a1">4</td><td id="td1-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择内容不是id=td1</p>
    <table border="1px" id="table2">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td2-1">1</td><td id="td2-2">2</td><td id="td2-3" attr1="a1" attr2="a2">3</td><td id="td2-4" attr1="a1">4</td><td id="td2-5">5</td></tr></tbody>
    </table>
    <p>第三个：选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table3">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td3-1">1</td><td id="td3-2">2</td><td id="td3-3" attr1="a1" attr2="a2">3</td><td id="td3-4" attr1="a1">4</td><td id="td3-5">5</td></tr></tbody>
    </table>
    <p>第四个：选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table4">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td4-1">1</td><td id="td4-2">2</td><td id="td4-3" attr1="a1" attr2="a2">3</td><td id="td4-4" attr1="a1">4</td><td id="td4-5">5</td></tr></tbody>
    </table>
    <p>第五个：选择不满足 条件1 attr1="a1" 的元素</p>
    <table border="1px" id="table5">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td5-1">1</td><td id="td5-2">2</td><td id="td5-3" attr1="a1" attr2="a2">3</td><td id="td5-4" attr1="a1">4</td><td id="td5-5">5</td></tr></tbody>
    </table>
    <p>第六个：选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table6">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td6-1">1</td><td id="td6-2">2</td><td id="td6-3" attr1="a1" attr2="a2">3</td><td id="td6-4" attr1="a1">4</td><td id="td6-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td7-1">1</td><td id="td7-2">2</td><td id="td7-3" attr1="a1" attr2="a2">3</td><td id="td7-4" attr1="a1">4</td><td id="td7-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td8-1">1</td><td id="td8-2">2</td><td id="td8-3" attr1="a1" attr2="a2">3</td><td id="td8-4" attr1="a1">4</td><td id="td8-5">5</td></tr></tbody>
    </table>
</body>
</html>

放荡不羁的bug

猪在天上飞

放荡不羁的bug

Jquery:属性选择器（同时匹配多个条件,与或非）

前言

代码

示例

示例代码