Jquery实战学习--内容过滤选择器

最新推荐文章于 2025-03-18 16:11:16 发布

左岸人生

最新推荐文章于 2025-03-18 16:11:16 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/zuoanren/article/details/8775047

JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的内容过滤选择器示例，通过`:contains`和`:has`选择器来筛选并高亮显示包含特定文本或元素的`div`。这有助于理解如何根据元素内的内容进行DOM操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内容过滤选择器</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
</head>

<body>
<div>haha</div>
<div>hehe</div>

<div style="width:100px">
	<p>enheng</p>
</div>

</body>
<!-- 内容过滤选择器的过滤规则主要体现在所包含的子元素或者文本内容上-->
<script type="text/javascript">
	$("div:contains('a')").css("background","red");
	$("div:contains('e')").css("background","green");//选取div中含有“”的div元素，改变样式
</script>

<script type="text/javascript">
	$("div:has('p')").css("background","orange");
</script>
</html>