本文实例讲述了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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 群星《十二女声Ⅲ》[WAV/CUE/分轨][626.4MB]
- 陈百强.1993-离不开...纪念歌集2CD【华纳】【WAV+CUE】
- 于台烟.2003-爱自己【乾坤唱片】【WAV+CUE】
- 群星.2024-我们永远是我们电影原声带【乐禾发文化】【FLAC分轨】
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[DSF]
- 明达年度发烧碟MasterSuperiorAudiophile2017[DSF]
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WAV+CUE】
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]