定义和用法

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


jQuery :contains 选择器_css


例子

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


jQuery :contains 选择器_bootstrap_02


例子：

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


jQuery :contains 选择器_字符串_03