<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//1.内容过滤选择器
function f1 () {
//:contains--获得结点内部必须包含指定的内容
//$('div:contains(beijing)').css('color','red');
//alert($('div:empty'))
$('div:has(p)').css('color','red');
}
//2.表单域选中选择器
function f2 () {
//获得选中的复选框
alert($('.hby:checked').val());
}
</script>
</head>
<body>
<h1>内容过滤选择器</h1>
<div> I like <span>beijing</span></div>
<div>she likes shanghai</div>
<div></div>
<div>qiuzhiwen</div>
<div><p>hello world</p></div>
<input type="button" value="触发" onclick="f1()" />
<h2>表单域选中选择器</h2>
<input type="checkbox" class="hby" name="hobby[]" value="1" />足球
<input type="checkbox" class="hby" name="hobby[]" value="2" />篮球
<input type="checkbox" class="hby" name="hobby[]" value="3" />排球
<input type="checkbox" class="hby" name="hobby[]" value="4" />棒球
<input type="button" value="触发" onclick="f2()" />
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//1.内容过滤选择器
function f1 () {
//:contains--获得结点内部必须包含指定的内容
//$('div:contains(beijing)').css('color','red');
//alert($('div:empty'))
$('div:has(p)').css('color','red');
}
//2.表单域选中选择器
function f2 () {
//获得选中的复选框
alert($('.hby:checked').val());
}
</script>
</head>
<body>
<h1>内容过滤选择器</h1>
<div> I like <span>beijing</span></div>
<div>she likes shanghai</div>
<div></div>
<div>qiuzhiwen</div>
<div><p>hello world</p></div>
<input type="button" value="触发" onclick="f1()" />
<h2>表单域选中选择器</h2>
<input type="checkbox" class="hby" name="hobby[]" value="1" />足球
<input type="checkbox" class="hby" name="hobby[]" value="2" />篮球
<input type="checkbox" class="hby" name="hobby[]" value="3" />排球
<input type="checkbox" class="hby" name="hobby[]" value="4" />棒球
<input type="button" value="触发" onclick="f2()" />
</body>
</html>