recherche

Maison >interface Web >js tutoriel >Explication détaillée de la façon dont jQuery utilise le filtre contain pour obtenir une correspondance exacte_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:13:481384parcourir

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 e388a4556c0f65e1904146cc1a846bee

Autre exemple :

$("p:contains(张三)") ou $("p:contains("张三")") signifie sélectionner tous les éléments e388a4556c0f65e1904146cc1a846bee 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");
});

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

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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Modèle de conception JavaScript, commande classique, compétences pattern_javascriptArticle suivant：Modèle de conception JavaScript, commande classique, compétences pattern_javascript

Articles Liés

Voir plus