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

最新推荐文章于 2023-11-07 23:41:38 发布
最新推荐文章于 2023-11-07 23:41:38 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： jquery
原文链接：https://www.cnblogs.com/fanbi/p/7705235.html
版权

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

thlzjfefe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 与 非
05-23
&& || jquery常用的两个符号
jquery中的多条件选择，相对选择和层次选择
林中路
09-01 4915
1、多条件选择器用途：使用多个条件同时选择多个标签用法：$(“条件1，条件2，条件3，……，条件n “);特征：多个条件在“”内用逗号隔开；用例：$(“div#id,span.tip,p”); //同时选择id为“id”的div标签,class为“tip”的span标签和p标签；2、相对选择器用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素用法：$(“条件1”,条件2)；特征：两个
Web学习笔记——jQuery
weixin_57599261的博客
01-09 1014
jQuery学习笔记
Jquery选择器的与、或、非
kagurawill的博客
08-16 5192
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','...
CSS的选择器、常用属性、浮动与定位
最新发布
2301_78474749的博客
11-07 110
选择器属性1：属性值1；属性2：属性值2；属性3：属性值3；
jquery选择器-根据多个属性选择示例代码
10-26
根据多个属性选择在某些对选择比较精确的情况下，还是比较实用的，其实很简单，不会的朋友看下本
jquery 属性选择器（匹配具有指定属性的元素）
10-21
在实际应用中，属性选择器经常用于动态修改元素样式、处理事件或执行其他操作。例如，上述代码中的 `window.onload` 函数监听了 `#btnOk` 按钮的点击事件，当按钮被点击时，它会选取所有具有 `color` 属性的 `<font>...
jquery基本选择器匹配多个元素的实现方法
10-21
下面小编就为大家带来一篇jquery基本选择器匹配多个元素的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery属性选择器（同时匹配多个条件）
weixin_34148340的博客
09-06 316
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
Jquery属性选择器（同时匹配多个条件,与或非）
极客神殿
04-02 745
1. 前言 为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。 作为笔记记录。 2. 代码 <!DOCTYPE html> <html> <head> <title>Test multi selection</title> <script s...
jQuery实现多条件筛选
09-12
请问下， 代码中 selectA 是什么东西，在 html 代码里怎么找不到。。。。等等一系列问题，在这里都能找到答案。
jquer多条件选择
名十七的专栏
05-31 638
jquery 多条件选择 1、id选择 2、类选择 3、元素选择器（标签） 4、*号选择器 选择html文档全部 5、多条件选择器   5.1、通过元素名称，id，class 三种组合查询选择（$("div.class#id")）   5.2 有多个选择条件是用逗号分开如($("div.class#id,input#id.class"))     5.3  查找子元素  选择条件用
jquery 多条件选择器
guoshaowen98的博客
05-03 2072
转载自：https://www.cnblogs.com/fanbi/p/7705235.html1. 前言为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。作为笔记记录。2. 代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test mu...
JQuery属性选择器(属性值是变量、多属性选择）
qq_39636959的博客
08-01 2984
结论： 1、属性选择器是变量时，("div[属性=′"+变量属性值+"′]")；2、多属性选择器时，("div[属性 = '"+变量属性值+"']")； 2、多属性选择器时，("div[属性=′"+变量属性值+"′]")；2、多属性选择器时，(“div[属性一 = 属性值一 ][属性二 = 属性值二]”); 案例： <div data-value="test" data-status="on">div_test_on</div> <div data-value=
Jquery（一）选择器
weixin_51760209的博客
07-29 852
概念：使用jquery封装的Dom对象叫做jquery对象。•优点：jQuery 的扩展属性和函数在底层判断了浏览器以及版本实现了浏览器的兼容。 •缺点：jQuery 扩展的函数只能实现基本的 dom 操作，但是对于元素独有的 htmldom 接口 封装很少(例如 input、select())，对于 html5 新增的 DOM 方法也不支持，如果想实现类似功 能，只能使用 dom 接口。 结论：为保证兼容性尽量使用 jQuery 对象的 API，但特殊功能也需要使用原生 dom 接口。如果获取的是 jQu
jquery实现多条件筛选
youif的博客
04-16 1936
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
WEB入门之十三 jQuery选择器
张晨光老师的播客
02-23 2593
学习内容jQuery层次选择器jQuery属性选择器jQuery表单选择器jQuery过滤选择器能力目标熟悉jQuery各种选择器的使用场合能熟练使用jQuery各种选择器本章简介上一章我初步接触了jQuery，并能够编写一些简单的jQuery代码，其中重点是jQuery基本选择器。jQuery的选择器非常强大，它是jQuery的根基，基本上任何操作都要依赖于选择器。本章重点学习jQue
jQuery7(多条件选择器,层次选择器)
xbc1213的博客
02-05 617
多条件选择器关键点:当使用$('') ,引号内的内容可以写多个. 实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值