收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery内容选择器</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
div{
width: 90px;
height: 90px;
margin-top:20px;
background: gray;
}
</style>
<script>
//1、$(selector:contains(text)) 查找contains表示包含某一文本的选择器
//2、$(selector:has(selector)) 查找contains表示包含某一元素的选择器
//2、$(selector:empty) 查找contains表示不含有任何内容的选择器 注意包含空元素的匹配不到
//2、$(selector:parent) 查找contains表示包含子元素或文本的选择器
$(document).ready(function(){
$('div:contains("jion")').css("background","red");
$('div:has(b)').css("background",'yellow');
$('div:empty').css("background","blue");
$('div:empty').css("background","blue");
$('div:parent').css("background","pink");
})
</script>
</head>
<body>
<div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><b>jion</b></div>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
