jQuery:属性选择器

ma_no_lo

于 2024-08-16 08:20:34 发布

阅读量131

点赞数 6

分类专栏： Python全栈开发文章标签： jquery 前端 javascript html css

本文链接：https://blog.csdn.net/ma_no_lo/article/details/141213489

版权

Python全栈开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一，Attribute Selector [name="value"]

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <div>
    <input type="radio" name="user" value="username">
    <span>username</span>
  </div>

  <div>
    <input type="radio" name="user" value="age">
    <span>age</span>
  </div>


  <script>
    console.log($("input[value='username']").next());
    $("input[value='username']").next().html("new username");
  </script>

</body>

</html>

二，Attribute Selector [name|="value"]

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <input type="text" name="sub-string">

  <script>
    console.log($("input[name |= 'sub']"));
  </script>

</body>

</html>

三，Attribute Selector [name*="value"]

选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <input type="text" name="sub-string">
  <input type="text" name="a-string">
  <input type="text" name="bstring">
  <input type="text" name="cstring">
  

  <script>
    console.log($("input[name *= 'string']"));
  </script>

</body>

</html>

四，Attribute Selector [name~="value"]

选择指定属性用空格分隔的值中包含一个给定值的元素

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <input type="text" name="sub-string">
  <input type="text" name="a string">
  <input type="text" name="bstring">
  <input type="text" name="cstring">
  

  <script>
    console.log($("input[name ~= 'string']"));
  </script>

</body>

</html>

五，Attribute Selector [name$="value"]

选择指定属性是以给定值结尾的元素。这个比较是区分大小写的

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <input type="text" name="sub-string">
  <input type="text" name="a string">
  <input type="text" name="bstring">
  <input type="text" name="cstring">


  <script>
    console.log($("input[name $= 'string']"));
  </script>

</body>

</html>

六，Attribute Selector [name^="value"]

选择指定属性是以给定字符串开始的元素

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>

<body>
  <input type="text" name="sub-string">
  <input type="text" name="a string">
  <input type="text" name="bstring">
  <input type="text" name="cstring">


  <script>
    console.log($("input[name ^= 'a']"));
  </script>

</body>

</html>

ma_no_lo

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery:属性选择器

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。选择指定属性用空格分隔的值中包含一个给定值的元素。选择指定属性是以给定字符串开始的元素。
复制链接

扫一扫

专栏目录