JQuery :contains(text)-Selektor-Anwendungsfall-js-Tutorial-php.cn

JQuery :contains(text)-Selektor-Anwendungsfall

黄舟

Freigeben： 2017-06-23 11:05:25

Original

1798 Leute haben es durchsucht

Ü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

Nach dem Login kopieren

jQuery-Code:

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

Nach dem Login kopieren

Ergebnis:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

: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;);
 });

Nach dem Login kopieren

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!