jQuery的内容过滤选择器学习教程

$('div:contains("xxx")').css('background', '#c'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#c'); //选择空元素 
 
$('ul:has(.red)').css('background', '#c'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#c'); //选择非空元素 

$('ul').has('.red').css('background', '#c'); //选择子元素含有class 是red 的元素 

$('li').parent().css('background', '#c'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#c'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#c'); //选择当前元素遇到div 父元素停止 

<div>John Resign</div>
<div>Gee Martin</div>
<div>Mal John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

<script type="text/javascript">
 $(document).ready(function(){
  $('div:contains(John)').css('background','#f36');
 });
</script>

<script type="text/javascript">
 $(document).ready(function(){
  $('div:empty').css('background','#f36');
 });
</script>

<script type="text/javascript">
 $(document).ready(function(){
  $('div:has(p)').css('background','#f36');
 });
</script>

功能
改变含有子元素P的div元素的背景色
效果

<script type="text/javascript">
 $(document).ready(function(){
  $('div:parent').css('background','#f36');
 });
</script> 

功能
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容，其背景色都将会改变。
效果

本例子，只有一个div和一个p元素中不包含任何子元素和文本内容，因为我们这里是对div进行设置，所以效果中显示，除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”，变化后的HTML

有关于jQuery选择器中的内容过滤选择器，就简单的说到这里，大家如果想更深的体会其具体的用法，可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，也可以随时观注本站的内容更新。