jQuery :contains 选择器

作者: 祈澈菇凉 | 来源:发表于2021-07-02 17:32 被阅读0次

jQuery :contains 选择器
JQuery模糊查询
jquery选择器书目录
JQUERY一
jQuser有选择器
选择器
jQuery 基础
jQuery
jQuery选择器
JQuery基础知识

定义和用法

:contains 选择器选取包含指定字符串的元素。

该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素（如下面的例子）。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
          
    </style>
    </head>
    <body>
    <h1>Welcome to My Homepage</h1>
    <p class="intro">My name is Donald</p>
    <p>I live in Duckburg</p>
    <p>My best friend is Mickey</p>
    <div id="choose">
    Who "is" your favourite:
    <ul>
    <li>Goofy</li>
    <li>Mickey</li>
    <li>Pluto</li>
    </ul>
    </div>
    </body>
<script type="text/javascript"> 
 
$(document).ready(function(){
    debugger
    $("p:contains(is)").css("background-color","#B2E0FF");
});
 
</script>   
</html>

例子

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
    </head>
    <body>
        <div class="floorinside">F01</div>
        <div class="floorinside">F02</div>
        <div class="floorinside">F03</div>
        <div class="floorinside">F04</div>
        <div class="floorinside">F05</div>
    </body>
    <script type="text/javascript">
        $(".floorinside:contains(F02)").css("background-color", "#B2E0FF");
    </script>
</html>

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
    </head>
    <body>
        <div class="floorinside">F01</div>
        <div class="floorinside">F02</div>
        <div class="floorinside">F03</div>
        <div class="floorinside">F04</div>
        <div class="floorinside">F05</div>
    </body>
    <script type="text/javascript">
        var drawing = "02"
        $(".floorinside:contains(F" + drawing + ")").css("background-color", "#B2E0FF");
    </script>
</html>