jQuery选择器 之 属性选择器

于 2024-09-06 08:31:58 发布
阅读量636 收藏 10
点赞数 4
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141939470
版权

语法说明

https://api.jquery.com/category/selectors/attribute-selectors/

  • 带有属性选择器：选择具有指定属性且其值任意的元素，$('A[属性名]')，如$( "div[id]" )
  • 属性等于选择器：选择具有指定属性且其值恰好等于某个特定值的元素，$('A[属性名=属性值]')，如$( "input[value='Hot Fuzz']" )
  • 属性不等于选择器：选择那些没有指定属性，或者有指定属性但其值不等于某个特定值的元素，$('A[属性名!=属性值]')，如$( "input[name!='newsletter']" )
  • 属性开头选择器：选择具有指定属性且其值恰好以给定字符串开头的元素，$('A[属性名^=属性值]')，如$( "input[name^='news']" )
  • 属性结尾选择器：选择具有指定属性且其值恰好以给定字符串结尾的元素。比较是区分大小写的。$('A[属性名$=属性值]')，如$( "input[name$='letter']" )
  • 属性包含选择器：选择具有指定属性且其值包含给定子字符串的元素。$('A[属性名*=属性值]')，如$( "input[name*='man']" )
  • 多个属性选择器：匹配所有指定的属性过滤器的元素。$('A[属性名=值]...[属性名=值]')，如$( "input[id][name$='man']" )

示例

带有属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，将含有属性title的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

属性等于选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，将属性title值等于test的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title="test"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

属性不等于选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，将属性title值不等于test的div元素(没有属性title的也将被选中)背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title!="test"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

属性开头选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，属性title值以te开始的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title^="te"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

属性结尾选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，属性title值以est结束的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title$="est"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

属性包含选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，属性title值含有es的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[title*="es"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面按钮：
在这里插入图片描述

多个属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body {
      font-size: 24px;
    }

    #one {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    #two {
      margin-left: 20px;
      float: left;
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }

    .mini {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

    .one {
      float: left;
      margin-left: 20px;
      width: 300px;
      height: 300px;
      background-color: #979ccd;
    }

    span {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    input {
      font-size: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <input type="button" id="b1" value="点击按钮，选取有属性id的元素，然后在结果中选取属性title值含有es的div元素背景色改为红色"><br><br>
  <div id="one">div:id为one</div>
  <div id="two" title="test">div:id为two,title="test"
    <div class="mini">div:class为mini</div>
  </div>
  <div class="one" title="test02">div:class是one,title="test02"
    <div class="mini">div:class是mini</div>
    <div class="mini">div:class是mini</div>
  </div>
  <div class="one">div:class是one</div>
  <span>span</span>

  <script>
    $('#b1').click(function () {
      $('div[id][title*="es"]').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

听海边涛声
关注
jquery 属性选择器的使用
08-03
NULL 博文链接：https://871421448.iteye.com/blog/1985929
JQ 属性选择器
08-13
NULL 博文链接：https://onestopweb.iteye.com/blog/2290077
JQuery 属性选择器 [id^=btn]
houyanhua1的专栏
12-18 1629
$('input');  //所有input元素 $('input[id]'); //input元素中，设置了id属性的所有元素。 $('input[id=btn1]'); //input元素中，id=btn1的元素。 $('input[id*=btn]'); //input元素中，id包含btn的所有元素。 $('input[id^=btn]'); //input元素中，id以btn开头
jQuery JavaScript Library v1.10.2源码
weixin_30436101的博客
08-28 987
/*! * jQuery JavaScript Library v1.10.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors * R...
jQuery之属性选择器
python全栈
01-24 4116
属性选择器 [attribute]匹配包含给定属性的元素 $("a").addClass("myClass"); $("a[href]").addClass("myClass"); [attribute1][attribute2]复合属性选择器，需要同时满足多个属性 $("a[href][title]").addClass("myClass"); [attribute=value]匹配给定的属性是某个特定值的元素 $("a[href='film-2.html']").addClass("myClas
JQuery中属性选择器
最新发布
you4580的专栏
03-21 1904
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器。语法：$("A[属性名='值'][]...")包含多个属性条件的选择器。语法： $("A[属性名]")包含指定属性的选择器。
jQuery选择器之属性筛选选择器用法详解
12-02
在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的 [attr=”value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=”text”],input[type=”checkbox”]等 [attr*=”...
jquery选择器之属性过滤选择器详解
10-26
jQuery选择器是一种非常强大的工具，它允许开发者通过各种规则快速地选择和操作网页中的HTML元素。本文将详细介绍jQuery中的属性过滤选择器。属性过滤选择器主要基于HTML元素的属性来进行元素筛选，是日常开发中常用...
jquery选择器和属性对象的操作实例分析
10-15
通过这些实例，我们可以看到jQuery选择器和属性对象的实用性，它们让开发者能够快速、高效地操作页面元素，大大提升了开发效率。无论是简单的选取元素还是复杂的筛选操作，jQuery都能提供简洁、直观的API。在实际...
jQuery属性选择器
weixin_34194702的博客
06-12 1912
jQuery属性选择器是基于元素属性作为筛选条件的选择器。 [attribute] 属性名选择器 [attribute=value]属性值选择器 [attribute!=value]非属性值选择器 [attribute^=value]属性值以某个字符串开头的选择器 [attribute$=value]属性值以某个字符串结尾的选择器 [attribute*=value]属性值中包含某个字...
JQuery属性选择器
weixin_45365266的博客
02-22 402
JQuery API 提供的模糊匹配方法常用的有如下几个： 1、选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素 （Attribute Contains Prefix Selector [name|=“value”]） 例1.$(div[text|=te]) 2、选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素） （Att
jQuery——属性选择器
Yeoman92的博客
12-29 4492
属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute)<input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" />在jQuery中，除了直接使用id和class属性作为选择器之外，还可以根据各种属性（如title等）对由选择器查询到的元素进行过滤。属性
jQuery属性选择器（附有代码以及运行截图）
GodGump的博客
02-28 453
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 XPath使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 说上面是为了理解下面几个常见的属性选择器 注意一下代码中：attribute表示一个属性名，value表示一个属性值 $(" [attribute] = 'value' ") 选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。 $("[attribute*='value']")
jquery属性选择器
wangin1013的专栏
04-12 125
[name|='value'] 该类型选择器选择匹配value或value-的元素，例子： &lt;a href="http://www.baidu.com" title="en-x"&gt;百度&lt;/a&gt; &lt;a href="http://www.google.com" title="enp"&gt;谷歌&lt;/a&gt; &lt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值