suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung, wie jQuery den Filter „Contains' verwendet, um eine exakte Matching_JQuery zu erreichen

Detaillierte Erklärung, wie jQuery den Filter „Contains' verwendet, um eine exakte Matching_JQuery zu erreichen

WBOY
WBOYOriginal
2016-05-16 15:13:481386Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery den Filter „enthält“ verwendet, um eine genaue Übereinstimmung zu erreichen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Selektor

:contains wählt Elemente aus, die die angegebene Zeichenfolge enthalten.

Die Zeichenfolge kann Text sein, der direkt im Element oder in einem untergeordneten Element enthalten ist.

wird oft zusammen mit anderen Elementen/Selektoren verwendet, um Elemente auszuwählen, die bestimmten Text in einer bestimmten Gruppe enthalten, wie zum Beispiel:

$("p:contains(is)") bedeutet, alle e388a4556c0f65e1904146cc1a846bee-Elemente auszuwählen, die „is“ enthalten.

Ein weiteres Beispiel:

$("p:contains(张三)") oder $("p:contains("张三")" bedeutet die Auswahl aller e388a4556c0f65e1904146cc1a846bee-Elemente, die „张三" enthalten.

Sie können in diesem Selektor auch Variablen verwenden, um den Zweck der Auswahl zu erreichen, wie zum Beispiel: 

$(document).ready(function(){
var ddd="John";
$("div:contains(‘" + ddd + "‘)").css("color", "#f00");
});

Wir können auch die Filtermethode und die Methode „contains“ von jquery zusammen verwenden, um einen Fuzzy-Matching zu erzielen, wie zum Beispiel: 

$(document).ready(function(){
$(".box").filter(":contains(李)").css("color", "#f00");
});

bedeutet, die Textfarbe des Feldes mit „李“ auf Rot zu setzen.

jQuery verwendet den Filter „enthält“, um eine genaue Übereinstimmung zu erreichen: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <!--<script src="jquery.min.js" type="text/javascript"></script>-->
  <script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      //根据select中的option的文本来执行选中
      //$("#selectbox option[text='第二项']");
      //$("#selectbox option").filter("[text='第二项']");
      //上面两种写法都是错误的
      //正确写法
      $("#btn4").click(function () {
        var $option =$("#selectbox option:contains('第二项')").map(function(){
          if ($(this).text() == "第二项") {
            return this;
          }
        });
        alert($option.length > 0 &#63; "有对象" : "无对象");
        $option.attr("selected", true);
      });
    });
  </script>
</head>
<body>
  <form id="form1">
  <div>
    <select id="selectbox">
      <option value="1">第一项</option>
      <option value="2">第二项</option>
      <option value="21">第二项1</option>
    </select>
    <input type="button" id="btn4" value="contains测试" />
  </div>
  </form>
</body>
</html>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung der Verwendung des JQuery-Selektors“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

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：JavaScript-Entwurfsmuster, klassischer Befehl, Muster_Javascript-KenntnisseNächster Artikel：JavaScript-Entwurfsmuster, klassischer Befehl, Muster_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen