jQuery での [attribute=value] セレクターの使用例-jsチュートリアル-php.cn

jQuery での [attribute=value] セレクターの使用例

黄舟

リリース： 2017-06-23 13:17:30

オリジナル

1199 人が閲覧しました

概要

指定されたattributeが特定の値

parameter

attributeStringV1.0

ログイン後にコピー

属性名

value StringV1.0

ログイン後にコピー

属性値である要素と一致します。ほとんどの場合、引用符はオプションです。ただし、属性値に「]」が含まれる場合の競合を避けるために使用されます。

例

説明:

name属性がnewsletterであるすべての入力要素を検索します

HTMLコード:

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

ログイン後にコピー

jQueryコード:

$("input[name=&#39;newsletter&#39;]").attr("checked", true);

ログイン後にコピー

結果:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, 
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

ログイン後にコピー

このセレクターは、指定された要素と一致します。属性と属性値。

文法構造:

$("[attribute=value]")

ログイン後にコピー

サンプルコード:

例1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>[attribute=value]选择器</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li[id=third]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="third">欢迎来到PHP中文网</li>
  <li>PHP中文网欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

ログイン後にコピー

上記のコードは、li要素の3番目のid属性値を持つli要素の文字色を青に設定できます。

例 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>[attribute=value]选择器</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li[id=thi]rd]").css("color","blue");
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second">Jquery专区</li>
</ul>
<ul>
  <li id="thi]rd">欢迎来到PHP中文网</li>
  <li>PHP中文网欢迎您</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

ログイン後にコピー

以上がjQuery での [attribute=value] セレクターの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。