$('div p')、$('div>p')、$(div+span)的用法和区别
- $(‘div p’):将所有
<div>
标签里面的<p>
标签选中(子标签和孙子辈标签)- $(‘div>p’)将所有
<div>
标签的子标签<p>
选中,不包括孙子辈标签。- $(div+span)将所有离
<div>
最近的<span>
标签选中
下面是这三个选择器的用法举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
<script src="./jquery-3.1.0.min.js"></script>
<script>
$(document).ready(
function(){
$('div p').addClass('blue');
$('div>p').addClass('red');
$('div+span').addClass('green');
}
);
</script>
<title>jquery</title>
</head>
<body>
<div>
<p>你好</p>
</div>
<span>事件</span>
<div>
<span><p>时间</p></span>
</div>
<span>事件2</span>
</body>
</html>
运行结果: