jQueryのフィルターセレクターとは何ですか?-jsチュートリアル-php.cn

jQueryのフィルターセレクターとは何ですか?

yulia

リリース： 2018-09-18 16:02:13

オリジナル

1648 人が閲覧しました

jQueryには、子要素セレクター、子孫セレクター、フィルターセレクターなど、たくさんのセレクターがあります。この記事では、セレクターを学習している方に向けて、jQueryのフィルターセレクターについて説明しますので、参考にしていただければ幸いです。それはあなたの役に立つでしょう。

:first および :last フィルターセレクター

:first は、同じタグを持つ要素のグループ内の最初の要素を取得します
:last は 1 つを取得します同じタグ要素を持つグループ内の最後の要素
例:

<body>
  <div>改变最后一行"苹果"背景颜色：</div>
  <ol>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>苹果</li>
  </ol>       
<script type="text/javascript">
  $("li:last").css("background-color", "red");
</script>

ログイン後にコピー

:contains(text) フィルターセレクター

:contains(text) は、指定された包含文字列のすべての要素。通常、「テキスト」文字列のコンテンツを含むすべての要素オブジェクトを取得するために、他の要素と組み合わせて使用されます。
例:

<body>
  <div>改变包含"jQuery"字符内容的背景色：</div>
  <ol>
    <li>强大的"jQuery"</li>
    <li>"javascript"也很实用</li>
    <li>"jQuery"前端必学</li>
    <li>"java"是一种开发语言</li>
    <li>前端利器——"jQuery"</li>
  </ol>
<script type="text/javascript">
  $("li:contains(&#39;jQuery&#39;)").css("background", "green");
</script>
</body>

ログイン後にコピー

:has( selector) filter selector

: has(selector) フィルターセレクターの機能は、指定された要素名
を含むセレクター内のすべての要素を取得することです。例:

<body>
  <div>改变包含"label"元素的背景色：</div>
  <ol>
    <li><p>我是P先生</p></li>
    <li><label>L妹纸就是我</label></li>
    <li><p>我也是P先生</p></li>
    <li><label>我也是L妹纸哦</label></li>
    <li><p>P先生就是我哦</p></li>
  </ol>
<script type="text/javascript">
  $("li:has(&#39;label&#39;)").css("background-color", "blue");
</script>
</body>

ログイン後にコピー

:非表示フィルターセレクター

: 非表示フィルターセレクターの機能は、すべての非表示要素を取得することです。これらの非表示要素には、type 属性値が非表示の要素が含まれます。 # 例:

<body>
  <h3>显示隐藏元素的内容</h3>
  <input id="hidstr" type="hidden" value="我已隐藏起来"/>
  <div></div>
  <script type="text/javascript">
    var $strHTML = $("input:hidden").val();
    $("div").html($strHTML);
  </script>
</body>

ログイン後にコピー

:可視フィルターセレクター

: 可視フィルターセレクターは、要素の表示属性値が " に設定されていない限り、すべての可視要素を取得します。 none" は、このセレクターを通じて取得できます。

例:

<body>
  <h3>修改可见“水果”的背景色</h3>
  <ul>
    <li style="display:none">橘子</li>
    <li style="display:block">香蕉</li>
    <li style="display:">葡萄</li>
    <li>苹果</li>
    <li style="display:none">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li:visible").css("background-color","blue");
  </script>
</body>

ログイン後にコピー

[attribute=value]属性セレクター

[attribute=value]属性セレクターの機能は、完全な属性名を取得することです。および属性値はすべて同じ要素です。ここで、[] は属性セレクターに特に使用される括弧記号であり、パラメーター属性は属性名を表し、値パラメーターは属性値を表します。

例:

<body>
  <h3>改变"title"属性值为"蔬菜"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="水果">苹果</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title=&#39;蔬菜&#39;]").css("background-color", "green");
  </script>
</body>

ログイン後にコピー

[attribute!=value]属性セレクター

[attribute!=value]属性セレクターの機能は、属性を取得することです。を含まない名前、または属性名および属性値とは異なるすべての要素。ここで、[] は属性セレクター専用の大括弧記号であり、パラメーターattribute は属性名を表し、value パラメーターは属性値を表します。

[attribute*=value] 属性セレクター

[attribute*=value] 属性値に指定された内容が含まれるすべての要素を取得できます。[] は括弧です。属性セレクターにのみ使用されます。attribute パラメーターは属性名を表し、value パラメーターは対応する属性値を表します。

例:

<body>
  <h3>改变"title"属性值包含"果"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="人参果">小西红柿</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title*=&#39;果&#39;]").css("background-color", "green");
  </script>
</body>

ログイン後にコピー

:first-child サブ要素フィルターセレクター

:first-child サブ要素フィルターセレクターは各親要素を取得できます。返される子要素はコレクションです。これは通常、複数のコレクションからデータを選択するために使用されます。

例:

<body>
  <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
  <ol>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ol>
  <ol>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ol>
  <script type="text/javascript">
    $("li:first-child").css("background-color", "green");
  </script>
</body>

ログイン後にコピー

:last-child サブ要素フィルターセレクター

:first-child サブ要素フィルターセレクターの機能は逆です。 last-child 子要素フィルターセレクターの機能は、各親要素で返される最後の子要素を取得することです。これはコレクションでもあり、複数のコレクションデータの選択処理によく使用されます。

以上がjQueryのフィルターセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。