Explication détaillée de la façon dont jQuery utilise le filtre contain pour obtenir une correspondance exacte

Explication détaillée de la façon dont jQuery utilise le filtre contain pour obtenir une correspondance exacte_jquery

WBOY

Libérer： 2016-05-16 15:13:48

original

1387 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery utilise le filtre contain pour obtenir une correspondance exacte. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le sélecteur

:contains sélectionne les éléments qui contiennent la chaîne spécifiée.

La chaîne peut être du texte contenu directement dans l'élément, ou contenu dans un élément enfant.

est souvent utilisé avec d'autres éléments/sélecteurs pour sélectionner des éléments contenant du texte spécifié dans un groupe spécifié, tel que :

$("p:contains(is)") signifie sélectionner tous les éléments

Autre exemple :

$("p:contains(张三)") ou $("p:contains("张三")") signifie sélectionner tous les éléments

qui contiennent "张三".

Vous pouvez également utiliser des variables dans ce sélecteur pour atteindre l'objectif de sélection, telles que :

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

Copier après la connexion

Nous pouvons également utiliser la méthode filter de jquery et la méthode contain ensemble pour obtenir une correspondance plus floue, telle que :

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

Copier après la connexion

signifie définir la couleur du texte de la boîte contenant "李" sur rouge.

jQuery utilise le filtre contain pour obtenir une correspondance exacte :

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

Copier après la connexion

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery" et "Résumé de l'utilisation du sélecteur jquery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.