ホームページ > 記事 > ウェブフロントエンド > jQuery が contains フィルターを使用して正確なmatching_jqueryを実現する方法の詳細な説明

jQuery が contains フィルターを使用して正確なmatching_jqueryを実現する方法の詳細な説明

WBOYオリジナル: 2016-05-16 15:13:481328ブラウズ

この記事の例では、jQuery が contains フィルターを使用して完全一致を実現する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

:contains セレクターは、指定された文字列を含む要素を選択します。

文字列は、要素内に直接含まれるテキスト、または子要素内に含まれるテキストにすることができます。

は、指定されたグループ内の指定されたテキストを含む要素を選択するために、次のような他の要素/セレクターと一緒に使用されることがよくあります。

$("p:contains(is)") は、「is」を含むすべての e388a4556c0f65e1904146cc1a846bee 要素を選択することを意味します。

別の例:

$("p:contains("张三")") または $("p:contains("张三")") は、「张三」を含むすべての e388a4556c0f65e1904146cc1a846bee 要素を選択することを意味します。

このセレクターで次のような変数を使用して、選択の目的を達成することもできます。

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

次のように、jquery の filter メソッドと contains メソッドを併用して、よりあいまいな一致を実現することもできます。

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

は、「李」を含むボックスの文字色を赤色に設定することを意味します。

jQuery は、contains フィルターを使用して完全一致を実現します:

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

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「

JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。、「jQuery共通古典特撮使い方まとめ」、「jQueryアニメーションと特撮使い方まとめ」、「jQueryセレクター使い方まとめ」

この記事が jQuery プログラミングのすべての人に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript デザインパターンの古典的なコマンド pattern_javascript スキル次の記事：JavaScript デザインパターンの古典的なコマンド pattern_javascript スキル

続きを見る

jQuery が contains フィルターを使用して正確なmatching_jqueryを実現する方法の詳細な説明

関連記事