属性过滤选择器

Posted yuyujuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了属性过滤选择器相关的知识，希望对你有一定的参考价值。

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素，常见的属性过滤选择器如下表：

技术分享图片

同前面一样，在开始操作之前，先在html中写下如下基础代码，后面所有的过滤操作均在此基础之上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script></script>  
</head>
<body>
     <div>
            <span>span0</span><br>
            <span title="span1">span1</span><br>
            <span title="span2" id="s">span2</span><br>
            <span title="span3">span3</span>
       </div>
       <div title="div">div</div>
</body>
</html>

技术分享图片

1、attribute

选取拥有某属性的元素

$(function(){
　　　　//获得拥有"title"属性的元素
      $("[title]").css(‘color‘,‘red‘)
 })

技术分享图片

$(function(){
//获得拥有"title"属性的div
     $("div[title]").css(‘color‘,‘red‘)
})

技术分享图片

2、attribute = value

选取属性的值为value的元素

 $(function(){
      $("[title=span1]").css(‘color‘,‘red‘)
 })

技术分享图片

3、attribute ！= value

选取属性值不等于value的元素

 

4、attribute^ = value

选取属性的值以value开始的元素

$(function(){
    $("[title ^= span]").css(‘color‘,‘red‘)
})

技术分享图片

5、attribute  $= value

选取属性的值以value结尾的元素

$(function(){
     $("[title $= 2]").css(‘color‘,‘red‘)
})

技术分享图片

6、attribute *= value

选取属性的值中含有value的元素

$(function(){
     $("[title *= p]").css(‘color‘,‘red‘)
})

技术分享图片

7、attribute |= value

选取属性值等于value或者以value为前缀（value后跟一个连字符"-"）的元素。

$(function(){
      $("[title |= div]").css(‘color‘,‘red‘)
 })

技术分享图片

8、attribute ~ = value

选取属性用空格分隔的值中包含有vaue的元素

9、[attribute 1][attribute2 ]...[attributeN ]

基于属性选择器合并的复合属性选择器，满足多个条件妹妹选择一次，范围缩小一次。

 $(function(){
//选取拥有属性id，并且属性title以"span"开头的span元素
      $("span[id][title^=span]").css(‘color‘,‘red‘)
 })

技术分享图片




以上是关于属性过滤选择器的主要内容，如果未能解决你的问题，请参考以下文章

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

jquery 选择器(name,属性,元素)大全

JQuery选择器学习整理(基本选择器，层级选择器，伪类选择器，属性过滤，内容过滤，可见性过滤，范围选择器，排除选择器)

jQuery选择器之过滤选择器

VSCode自定义代码片段——CSS选择器