JQuery内容过滤器

最新推荐文章于 2021-10-31 14:50:02 发布

Bird

最新推荐文章于 2021-10-31 14:50:02 发布

阅读量3.2k

点赞数 1

分类专栏： jQuery 文章标签： jquery function button input div float

本文链接：https://blog.csdn.net/a352193394/article/details/7566479

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery的选择器非常众多，下面介绍其中的一种，内容过滤器。内容过滤器顾名思义就是根据内容进行选择的一种

选择器，下面我们来举例一下这个内容过滤器的使用方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>使用jQuery内容过滤器</title>
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	
	<style type="text/css">
		body{font-size: 12px;text-align: center;}
		div{float: left;border: solid 1px #ccc; margin:8px;
		width: 65px;height: 65px;display: none;}
		span{float:left;border:solid 1px #ccc;margin:8px;
		width:45px;height:45px;background-color: #eee;}
	</style>
	
	<script type="text/javascript">
		$(function(){//显示包含给定文本的元素
			$("#test1").click(function(){
				 $("div:contains('A')").css("display","block");
			})
		})
		
		$(function(){//显示所有不包含子元素或者文本的空元素
			$("#test2").click(function(){
				$("div:empty").css("display","block");
			})
		})
		
		$(function(){//显示含有选择器的元素
			$("#test3").click(function(){
				$("div:has(span)").css("display","block");
			})
		})
		
		$(function(){//显示含有子元素的元素
			$("#test4").click(function(){
				$("div:parent").css("display","block");
			})
		})
	</script>
  </head>
 
  <body>
    <div>ABCD</div>
    <div><span></span></div>
    <div>EFaH</div>
    <div></div>
    <input id="test1" type="button" value="test1"/><br/>
    <input id="test2" type="button" value="test2"/><br/>
    <input id="test3" type="button" value="test3"/><br/>
    <input id="test4" type="button" value="test4"/><br/>
  </body>
</html>

Bird

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery内容过滤器

jQuery的选择器非常众多，下面介绍其中的一种，内容过滤器。内容过滤器顾名思义就是根据内容进行选择的一种选择器，下面我们来举例一下这个内容过滤器的使用方法。使用jQuery内容过滤器 body{font-size: 12px;text-align: center;} div{float: left;border: solid 1px #ccc; ma
复制链接

扫一扫

专栏目录