定义和用法
: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>
