jQuery - 属性セレクタ

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

1. 概要

属性フィルターで要素を指定します。

$("[属性]")      //指定した属性を持つ要素
$("[属性=値]")   //属性の値が指定した値と同じ要素
$("[属性!=値]")  //属性の値が指定した値と異なる要素

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <input type="text" value="apple" name="apple"/><br />
  <input type="text" value="orange" /><br />
  <input type="text" value="banana" /><br />
  <input type="password" value="1234567890" /><br />
  <select name="level">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select></p>
  
  <!-- Script -->
  <script>
    $(function(){
      //対象：name属性を持つ要素 -> 背景をグレーにする
      $("[name]").css("background-color", "#aaa");

      //対象：type="text" を持つ要素 -> 文字を赤にする
      $("[type=text]").css("color", "red");

      //対象：inputタグ かつ type="text" を持たない要素 -> 文字を青にする
      $("input[type!=text]").css("color", "blue");
    });
  </script>

</body></html>

実行結果：画面



Tag

New Article