第1章 WEB前端开发工程师-jQuery框架 1-7：jQuery 内容过滤选择器

                                                 jQuery 内容过滤选择器

 

本节课所讲内容：

1. jQuery过滤选择器

 

                                                                           主讲教师：Head老师

一. jQuery内容过滤选择器

内容过滤器的过滤规则主要是包含的子元素或文本内容上。

过滤器名	jQuery 语法	说明	返回
:contains(text)	$(':contains("Head ")')	选取含有"Head"文本的元素	集合元素
:empty	$(':empty')	选取不包含子元素或空文本的元素	集合元素
:has(selector)	$(':has(.red)')	选取含有 class 是 red 的元素	集合元素
:parent	$(':parent')	选取含有子元素或文本的元素	集合元素

 

//选择元素文本节点含有 ycku.com 文本的元素

$('div:contains("head")').css('background', '#ccc');

$('div:empty').css('background', '#ccc'); //选择空元素

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

$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

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

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本

的元素，而是获取当前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素

$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素

$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止