<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font-size: 12px;
text-align: center;
}
div {
float: left;
border: 1px solid #CCCCCC;
margin: 8px;
width: 65px;
height: 65px;
display: none;
}
span {
float: left;
border: 1px solid #CCCCCC;
margin: 8px;
width: 45px;
height: 45px;
background-color: #EEEEEE;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
$("div:contains('b')").css("display","block");
});
$("#btn2").click(function () {
$("div:empty").css("display","block");
});
$("#btn3").click(function () {
$("div:has(span)").css("display","block");
});
$("#btn4").click(function () {
$("div:parent").css("display","block");
});
})
</script>
</head>
<body>
<div>abcd</div>
<div><span></span></div>
<div>efah</div>
<div></div>
<input type="button" value="contains(b)" id="btn1">
<input type="button" value="empty" id="btn2">
<input type="button" value="has(span)" id="btn3">
<input type="button" value="parent" id="btn4">
</body>
</html>
