jQuery选择器

最新推荐文章于 2022-11-03 22:33:30 发布

夏灿y

最新推荐文章于 2022-11-03 22:33:30 发布

阅读量97

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/103916760

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery初学

选择器（四）

内容过滤选择器

":contains(text)" /* 包含指定字符串的所有元素*/
$(“ul li:contains(a)”) /* 所有ul下的li元素中含有a文本的li元素*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li>14aw</li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:contains(a)").css("backgroundColor","#B2E0FF"); //选取到了第二，三个li元素
			})
		</script>
	</body>
</html>

":empty" /* 获取没有文本节点或子元素的所有节点*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li>14aw</li>
			<li></li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(":empty").css("backgroundColor","#B2E0FF"); //选取最后个空的li元素
			})
		</script>
	</body>
</html>

":has()" /* 选取到含有某元素的元素*/
$(“ul li:has(span)”) /* 选取到ul下li含有span元素的li元素*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li>14aw</li>
			<li><span></span></li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:has(span)").css("backgroundColor","#B2E0FF"); //选取到了含有sapn元素的li元素
			})
		</script>
	</body>
</html>

":parent" /* 选取到含有子元素或文本节点的所有元素*/
$(“ul li:parent”) /* 获取到ul 下所有的含有子元素或文本节点的li元素*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li>14aw</li>
			<li></li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:parent").css("backgroundColor","#B2E0FF"); //选取到了所有ul下含有文本节点的li元素
			})
		</script>
	</body>
</html>

可见性过滤选择器

":hidden" /* 获取所有不可见的元素，注意该方法经常用与判断，可以"is（）"结合使用判断*/
$(“ul li:hidden”) /* 获取ul下不可见的li元素*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li style="display: none;">14aw</li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:hidden").css("display","black"); //选取隐藏的li元素并让其显示
			})
		</script>
	</body>
</html>

":visible" /* 获取所有可见的元素*/
$(“ul li:visble”) /* 获取ul下所有可见的li元素*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>abc</li>
			<li style="display: none;">14aw</li>
		</ul>
		
		
		<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li:visible").css("backgroundColor","#B2E0FF"); //选取到了所有标题元素
			})
		</script>
	</body>
</html>