日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery?編程之jQuery?屬性選擇器_jquery

作者：RiemannHypothesis ? 更新時間： 2022-10-02 編程語言

一、屬性選擇器

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"       hreflang="en">Some text</a> 
 
  <a href="example.html"       hreflang="en-UK">Some other text</a>
 
  <a href="example.html"       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>

原文鏈接：https://juejin.cn/post/7129159069507518495

欄目分類
最近更新