脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery 属性选择器

jQuery 编程之jQuery 属性选择器

 更新时间：2022年08月08日 08:34:49   作者：RiemannHypothesis  
这篇文章主要介绍了jQuery 编程之jQuery 属性选择器，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下

一、属性选择器

Attribute Selector [name="value"]

选择指定属性是给定值的元素。

attribute: 一个属性名.
value: 一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。

<!DOCTYPE html>
<html>
<head>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <label>
      <input type="radio" name="newsletter" value="name" />
      <span>name</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="age" />
      <span>age</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="newsletter" value="age" />
      <span>sex</span>
    </label>
  </div>
<script>$('input[value="name"]').next().text("username");</script>
</body>
</html>

Attribute Selector [name|="value"]

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

<!DOCTYPE html>
<html>
<head>
  <style>
a { display: inline-block; }
  </style>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="en">Some text</a> 
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="en-UK">Some other text</a>
 
  <a href="example.html" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  hreflang="english">will not be outlined</a>
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>
</body>
</html>

Attribute [name*="value"]

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

<!DOCTYPE html>
<html>
<head>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="man-news" />
 
  <input name="milkman" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name*="man"]').val('has man in it!');</script>
 
</body>
</html>

Attribute Selector [name~="value"]

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

<!DOCTYPE html>
<html>
<head>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="man-news" />
 
  <input name="milk man" />
  <input name="letterman2" />
  <input name="newmilk" />
<script>$('input[name~="man"]').val('mr. man is in it!');</script>
 
</body>
</html>

Attribute Selector [name$="value"]

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

<!DOCTYPE html>
<html>
<head>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="newsletter" />
 
  <input name="milkman" />
  <input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>
 
</body>
</html>

Attribute Selector [name^="value"]

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

<!DOCTYPE html>
<html>
<head>
  <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
  <input name="newsletter" />
 
  <input name="milkman" />
  <input name="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>
 
</body>
</html>

到此这篇关于jQuery 编程之jQuery 属性选择器的文章就介绍到这了,更多相关jQuery 属性选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论