Heim > Artikel > Web-Frontend > Was sind die Filterselektoren in jQuery?

Was sind die Filterselektoren in jQuery?

yuliaOriginal: 2018-09-18 16:02:131640Durchsuche

Es gibt viele Selektoren in jQuery, z. B. Selektoren für untergeordnete Elemente, Selektoren für Nachkommen, Filterselektoren usw. In diesem Artikel erfahren Sie mehr über die Filterselektoren in jQuery für diejenigen, die Selektoren lernen. Ich hoffe, Sie können sich darauf beziehen es wird Ihnen hilfreich sein.

:first und :last Filterselektoren

:first ruft das erste Element in einer Gruppe von Elementen mit demselben Tag ab
:last ruft eines ab Das letzte Element in der Gruppe mit demselben Tag
Zum Beispiel:

<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) Filterselektor

:contains(text) wählt das angegebene aus Einschlüsse Alle Elemente der Zeichenfolge. Wird normalerweise in Kombination mit anderen Elementen verwendet, um alle Elementobjekte abzurufen, die den Inhalt der Zeichenfolge „Text“ enthalten.
Zum Beispiel:

<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 Selektor

: Die Funktion des Filterselektors has(selector) besteht darin, alle Elemente im Selektor abzurufen, die den angegebenen Elementnamen enthalten
Zum Beispiel:

<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>

:versteckter Filterselektor

: Die Funktion des versteckten Filterselektors besteht darin, alle unsichtbaren Elemente abzurufen. Zu diesen unsichtbaren Elementen gehören Elemente mit dem Typattributwert versteckt
Zum Beispiel:

<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>

:sichtbarer Filterselektor

:sichtbarer Filterselektor erhält alle sichtbaren Elemente, d. h. solange der Anzeigeattributwert des Elements nicht auf „none“ gesetzt ist, dann kann über diesen Selektor abgerufen werden.
Zum Beispiel:

<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] Attributselektor

[attribute=value] Die Funktion des Attributselektors besteht darin, den vollständigen Attributnamen zu erhalten und Attributwert Alle gleichen Elemente, wobei [] das Klammersymbol ist, das speziell für Attributselektoren verwendet wird, das Parameterattribut den Attributnamen darstellt und der Wertparameter den Attributwert darstellt.
Zum Beispiel:

<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>

[Attribut!=Wert] Attributselektor

[Attribut!=Wert] Die Funktion des Attributselektors besteht darin, das Attribut abzurufen Name, der nicht enthält, oder alle Elemente, die sich vom Attributnamen und Attributwert unterscheiden, wobei [] das Klammersymbol für den Attributselektor ist, das Parameterattribut den Attributnamen darstellt und der Wertparameter den Attributwert darstellt.

[attribute*=value] Attributselektor

[attribute*=value] Kann alle Elemente abrufen, deren Attributwert den angegebenen Inhalt enthält, wobei [] Klammern ist Wird ausschließlich für Attributselektoren verwendet. Der Attributparameter stellt den Attributnamen dar, und der Wertparameter stellt den entsprechenden Attributwert dar.
Zum Beispiel:

<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>

:Filterselektor für das erste untergeordnete Unterelement

:Der Filterselektor für das erste untergeordnete Unterelement kann jedes übergeordnete Element erhalten Das erste Das zurückgegebene untergeordnete Element ist eine Sammlung, die häufig zum Auswählen von Daten aus mehreren Sammlungen verwendet wird.
Zum Beispiel:

<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>

:Filterselektor für das letzte untergeordnete Unterelement

hat die entgegengesetzte Funktion von :Filterselektor für das erste untergeordnete Unterelement: last-child Die Funktion des Filterselektors für untergeordnete Elemente besteht darin, das letzte untergeordnete Element abzurufen, das in jedem übergeordneten Element zurückgegeben wird. Es ist auch eine Sammlung und wird häufig für die Auswahlverarbeitung mehrerer Sammlungsdaten verwendet.

Das obige ist der detaillierte Inhalt vonWas sind die Filterselektoren in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery 字符串 Attribute 对象选择器 display

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind var, let, const in JavaScript? Verwendung von var, let, const (Code)Nächster Artikel：Was sind var, let, const in JavaScript? Verwendung von var, let, const (Code)

In Verbindung stehende Artikel

Mehr sehen