jQuery :contains 选择器_前端contains-优快云博客

定义和用法

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

在这里插入图片描述