cari

Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang cara jQuery menggunakan penapis mengandungi untuk mencapai padanan_jquery yang tepat

Penjelasan terperinci tentang cara jQuery menggunakan penapis mengandungi untuk mencapai padanan_jquery yang tepat

WBOY
WBOYasal
2016-05-16 15:13:481363semak imbas

Contoh dalam artikel ini menerangkan cara jQuery menggunakan penapis mengandungi untuk mencapai padanan tepat. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

:mengandungi pemilih memilih elemen yang mengandungi rentetan yang ditentukan.

Rentetan boleh menjadi teks yang terkandung terus dalam elemen, atau terkandung dalam elemen kanak-kanak.

sering digunakan dengan elemen/pemilih lain untuk memilih elemen yang mengandungi teks tertentu dalam kumpulan tertentu, seperti:

$("p:contains(is)") bermaksud memilih semua e388a4556c0f65e1904146cc1a846bee

Contoh lain:

$("p:contains(张三)") atau $("p:contains("张三")") bermaksud memilih semua e388a4556c0f65e1904146cc1a846bee

Anda juga boleh menggunakan pembolehubah dalam pemilih ini untuk mencapai tujuan pemilihan, seperti: 

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

Kami juga boleh menggunakan kaedah penapis jquery dan mengandungi kaedah bersama-sama untuk mencapai padanan yang lebih kabur, seperti: 

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

bermaksud untuk menetapkan warna teks kotak yang mengandungi "李" kepada merah.

jQuery menggunakan penapis mengandungi untuk mencapai padanan tepat: 

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

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Kesan seret JQuery dan ringkasan kemahiran", "ringkasan kemahiran sambungan jQuery" , "Ringkasan kesan khas klasik biasa JQuery", "ringkasan penggunaan jQuery dan kesan khas penggunaan" dan "ringkasan penggunaan pemilih jquery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Corak reka bentuk JavaScript kemahiran arahan klasik pattern_javascriptArtikel seterusnya：Corak reka bentuk JavaScript kemahiran arahan klasik pattern_javascript

Artikel berkaitan

Lihat lagi