<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JQ filter() filter function</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<style type="text/css">
div { width:60px; height:60px; margin:5px; float:left; border:2px white solid; }
</style>
<div></div>
<div class="middle"></div>
<div class="demo"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script type="text/javascript">
//The first, directly filter the elements of the selector
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
</script>
<p style="clear:both;"></p>
<ul>
<li><a href="###">张三</a></li>
<li><a href="###">李四</a></li>
<li><a href="###">王五</a></li>
<li><a href="###">赵六</a></li>
<li><a href="###">张飞</a></li>
</ul>
<script type="text/javascript">
//Second, the label style where the filter content is modified
$("ul li").filter(":contains('张三'),:contains('李四'),:contains('王五')").css("background","#f60");
</script>
<script type="text/javascript" src="js/jquery.textSearch-1.0.js"></script>
<p class="cont">Reading who asks you to recite, the water falls and the fragrance floats. Floating fragrance. . . </p>
<script>
//The third, filter the specified content and highlight it
$(".cont").textSearch("浮香");
$(".cont").textSearch("阅 水",{markColor: "blue"});
</script>
</body>
</html>
Effect picture: