视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2020-11-27 22:00:41 责编:小采
文档


本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法。分享给大家供大家参考,具体如下:

jQuery的内容过滤选择器

一、:contains(text)

选择器::contains(text)
描述:匹配包含给定文本的元素
返回值:元素集合

示例:

$("div.mini:contains('div')")
//div.mini是DOM元素集合,:contains('div')是过滤条件

二、:has(selector)

选择器::has(selector)
描述:匹配含有选择器所匹配的元素的元素
返回值:元素集合

示例:

$("div.mini:has(p)")
//div.mini是DOM元素集合,:has(p)是过滤条件

三、:empty

选择器::empty
描述:匹配所有不包含子元素或者文本的空元素
返回值:元素集合

示例:

$("div.item:empty")
//div.item是DON元素集合,:empty是过滤条件

四、:parent

选择器::parent
描述:匹配含有子元素或者文本的元素
返回值:元素集合

示例:

$("div.item:parent")
//div.item是DOM元素集合,:parent是过滤条件

jQuery子元素过滤选择器

一、:first-child

选择器::first-child
描述:匹配第一个子元素
返回值:元素集合

示例:

$("div.mini:first-child")//如果div.mini是某元素的第一个子元素,那么选中此div.mini
$("div.mini :first-child")//如果**div.mini**的后代元素A是某元素的第一个子元素,那么选中此后代元素A
$("div.mini span:first-child")//如果**div.mini**的span后代元素A是某元素的第一个子元素,那么选中此**span后代元素A**
$("div.mini span :first-child")//如果**div.mini的span后代元素**的后代元素A是某元素的第一个子元素,那么选中此后代元素A

二、:last-child

选择器::last-child
描述:匹配最后一个子元素
返回值:元素集合

示例:

$("div.mini:last-child")//如果div.mini是某元素的最后一个子元素,那么选中此div.mini
$("div.mini :last-child")//如果**div.mini**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A
$("div.mini span:last-child")//如果**div.mini**的span后代元素A是某元素的最后一个子元素,那么选中此**span后代元素A**
$("div.mini span :last-child")//如果**div.mini的span后代元素**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A

三、:only-child

选择器::only-child
描述:如果某元素A是其父元素中唯一的子元素,那么A将会被匹配
返回值:单个元素

示例:

$("div.mini:only-child")//如果div.mini是某元素唯一的子元素,那么选中此div.mini
$("div.mini :only-child")//如果**div.mini**的后代元素A是某元素唯一的子元素,那么选中此后代元素A
$("div.mini span:only-child")//如果**div.mini**的span后代元素A是某元素唯一的子元素,那么选中此**span后代元素A**
$("div.mini span :only-child")//如果**div.mini的span后代元素**的后代元素A是某元素唯一的子元素,那么选中此后代元素A

四、:nth-child

选择器::nth-child(:eq()索引从0开始,:nth-child()索引从1开始)
描述:匹配包含给定文本的元素
返回值:元素集合

示例:

$("div.mini:nth-child(1)")//如果div.mini是某元素的**第一个**子元素,那么选中此div.mini
$("div.mini :nth-child(1)")//如果**div.mini**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A
$("div.mini span:nth-child(1)")//如果**div.mini**的span后代元素A是某元素的**第一个**子元素,那么选中此**span后代元素A**
$("div.mini span :nth-child(1)")//如果**div.mini的span后代元素**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A

:nth-child()的索引值除了具体数字值为还可以是表达式:

:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(3n+1)
:nth-child(3n+2)

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

下载本文
显示全文
专题