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

最新推荐文章于 2020-11-19 15:26:55 发布
最新推荐文章于 2020-11-19 15:26:55 发布
阅读量876 收藏
点赞数
分类专栏： 网页-JQuery

https://www.cnblogs.com/fanbi/p/7705235.html\

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. 效果

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

妹子把我们叫二货
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery选择器的与、或、非
kagurawill的博客
08-16 5191
Jquery选择器的与、或、非 文章目录1. 与2. 或3. 非 1. 与 两个相与的条件之间紧密相连 $('div[id^=="aa"]div[id$=="div"]').css('color','purple');//id以aa开头的div，并且id以div结尾的div 两个元素之间有空格，代表父子元素 $('tbody td[attr1=="a1"]').css('color','...
【JQuery框架】五大选择器“全家桶”详解！，2024年最新学好前端开发
最新发布
m0_60749700的博客
04-16 689
如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。**在这里需要注意的是：**这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，**后代选择器会将元素A内部的所有B元素都选中，****而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。// 选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id=“b7”
jquery 与 非
05-23
&& || jquery常用的两个符号
Jquery属性选择器（同时匹配多个条件,与或非）
极客神殿
04-02 744
1. 前言 为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。 作为笔记记录。 2. 代码 <!DOCTYPE html> <html> <head> <title>Test multi selection</title> <script s...
jquery的find用法
技术人宝哥
04-25 3894
<br />1：children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。 <br />2：children方法获得的仅仅是元素一下级的子元素，即：immediate children。 <br />3：find方法获得所有下级元素，即：descendants of these elements in the DOM tree <br />4：children方法的参数selector 是可选的（optionall
jquery选择器-根据多个属性选择示例代码
10-26
根据多个属性选择在某些对选择比较精确的情况下，还是比较实用的，其实很简单，不会的朋友看下本
jquery 属性选择器（匹配具有指定属性的元素）
10-21
在实际应用中，属性选择器经常用于动态修改元素样式、处理事件或执行其他操作。例如，上述代码中的 `window.onload` 函数监听了 `#btnOk` 按钮的点击事件，当按钮被点击时，它会选取所有具有 `color` 属性的 `<font>...
jquery基本选择器匹配多个元素的实现方法
10-21
下面小编就为大家带来一篇jquery基本选择器匹配多个元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery编写的常用商城商品属性选择器
02-21
jQuery编写的常用商城商品属性选择器
jquery仿淘宝商城选择商品尺寸与大小颜色功能
07-12
本资源为模仿淘宝商品选择页面,可以预览商品,后台提交,文件下载解压即可,亲测可用,可以直接部署自己的项目
js逻辑与或非
liuyongshun2的博客
07-31 1万+
首先js 会将 && 和 || 两边的值转成Boolean 类型，然后再进行逻辑关系运算 。 &&运算如果返回true，则取后面的值，如果 || 返回true,则取前面的值。 var num = 44 && 55; var num2 = 44 || 55; console.log(num); // 55 console.log(num2); // 44 转换成boolean 的规则
Javascript 或与非的区别
huhuhuja
11-19 563
1.在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true 2.测试typeof5和typeof!!5的区别 console.log(typeof5);//number console.log(typeof!!5);//boolean!!的作用是把一个其他类型的变量转成的bool类型 3.||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达...
Java |与|| 、&与&& ，或与非的使用和区别
热门推荐
csdn_aiyang的博客
03-07 10万+
目录 前言 一、“与”和“或”的定义区别 二、&、&&使用和区别 三、|、||的使用和区别 前言 在平时的开发工作当中，经常会使用到if判断，当满足某一个或多个条件下就可以继续往下执行。在java中是使用|、||（或） 、&、&&（与）的代码符号来表示。下面一起来看他们的具体使用，分析他们之间的区别。 一、“与”和“或”的定义区...
jquery 选中匹配多个属性值 获取 勾选的checked 的input标签
weixin_39297798的博客
07-16 4440
在前端页面中进行统计或计算某些值的时候通常要匹配到多个属性值 且被选中的问题： 可通过以下方法进行获取 $("input.promo.cart":checked");  选中class属性值包含promo和cart且被选中的input 标签 . 给标签属性复制方法:  $("img").attr({ src: "test.jpg", alt: "Test Image" }); //给
jQuery 多个条件检索,多条件检索的第一个和$（this）
学而不思则罔 思而不学则殆
06-15 8596
$("input[name='aa'] [title='bb']") $(".aa:first") $(this)需要上下文，如 $(":button").click( function(){ $(this).parent().parent().remove(); } );
jQuery实现静态页面的多条件筛选查询
qq_40650064的博客
08-18 1766
jQuery实现静态页面的多条件筛选查询 静态页面实现table的条件筛选 html页面代码 姓名：<input type="text" id="id02" value="" placeholder="请输入姓名"/><br /><br /> 地址：<select id="address02"> <option value="全部" selected="selected">全部</option> <option v

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值