内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
包括:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配元素的元素
:parent 匹配含有子元素或者文本的元素
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery之内容过滤器</title>
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
$('td:parent').css('background-color','#E8F3D1');//为非空的单元格设置背景颜色
$('td:empty').html('暂无内容');//为空的单元格添加默认内容
$("td:contains('祝福者')").css('color','red');//将含有'祝福者'的单元格的文字颜色设置红色
})
</script>
</head>
<body>
<div class="content">
<table style="text-align: center;" width="98%" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#3F873B">
<tr >
<td width="11%" height="27">编号</td>
<td width="14%" >祝福对象</td>
<td width="12%" >祝福者</td>
<td width="33%" >字条内容</td>
<td width="30%" >发送时间</td>
</tr>
<tr style="text-align:center;">
<td width="11%" height="27">1</td>
<td >琪琪</td>
<td >妈妈</td>
<td ></td>
<td>2020-05-06 20:30:00</td>
</tr>
</table>
</div>
</body>
</html>