suchen

Heim  >  Artikel  >  Web-Frontend  >  JQuery :contains(text)-Selektor-Anwendungsfall

JQuery :contains(text)-Selektor-Anwendungsfall

黄舟
黄舟Original
2017-06-23 11:05:251766Durchsuche

Übersicht

Entspricht Elementen, die den angegebenen Text enthalten

Parameter

TextStringV1.1.4

A to FindString

Beispiel

Beschreibung:

Alle div-Elemente finden, die „John“ enthalten

HTML-Code:

<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn

jQuery-Code:

$("div:contains(&#39;John&#39;)")

Ergebnis:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

Beispielcode:

Beispiel 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</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:contains(&#39;html&#39;)").css("color","blue") 
  }) 
}) 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
  <li>html5专区</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

Der obige Code kann die Textfarbe im li-Element, das „html“ enthält, auf blaue Farbe setzen.

:contains(text) in jQuery

<body>
    <div>
        我    </div><script>
    $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
    });</script>    </body>

:contains Selector wählt eine Zeichenfolge aus, die das angegebene enthält String-Elemente. (W3school)

Ich möchte Elemente auswählen, die die Zeichenfolge „Sie“ enthalten. Offensichtlich gibt es auf der Seite keine Elemente, die den Kriterien entsprechen, aber die Seite wird auch grün. Die folgenden beiden können die Seite auch grün machen (Blindtest): $(':even').css('background','lime'); $(':odd').css('background','lime') ; Darf ich fragen, warum das so ist? Danke.

1. Warum wird die Seitenfarbe:contains('you') grün?

Da sich Ihr Skript-Tag auf dem HTML-Bildschirm befindet, durchsucht JQuery bei der Suche nach Elementen den gesamten Bildschirm. Suchen Sie dann im Skript nach dem Wort „Sie“, das der von Ihnen geschriebene JavaScript-Code ist. Das Programm behandelt es vorerst als Text: 

 $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
 });

Also: enthält (Sie) sollte drei Elemente finden: html, body und dieses Skript hinzufügen Hintergrund zu den Stilen dieser drei Elemente Natürlich ist das Hinzufügen von Hintergrund nutzlos, wenn das Skript dies nicht unterstützt.

2.$(':even').css('background','lime'); $(':odd').css('background','lime'); ändern Grün werden?

$(':even') wählt HTML aus, $(':odd') wählt den Text aus, und das Festlegen des Hintergrunds dieser beiden Elemente ist natürlich nützlich.

Noch eine Ergänzung: Was den ersten Punkt betrifft: Wenn Sie Ihren JS-Code in eine JS-Datei schreiben und ihn dann über das Skript-Tag einführen, wird es kein solches Problem geben. Sollte der gesuchte Text im Kommentar vorkommen, wird dieser ebenfalls ignoriert.

Das obige ist der detaillierte Inhalt vonJQuery :contains(text)-Selektor-Anwendungsfall. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung der Verwendung von jquery: Focus SelectorNächster Artikel：Detaillierte Erläuterung der Verwendung von jquery: Focus Selector

In Verbindung stehende Artikel

Mehr sehen