本文实例讲述了jQuery中内容过滤器简单用法。分享给大家供大家参考,具体如下:
一 介绍
内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:contains(text)
、:empty
、:has(selector)
和:parent
4种,如下表所示。
Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-bottom: 4px; line-height: 22px; padding-left: 8px; padding-right: 8px; border-collapse: collapse; color: rgb(79,79,79); font-size: 14px; border-top: rgb(187,187) 1px solid; border-right: rgb(187,187) 1px solid; padding-top: 4px">过滤器 | Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">说明Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">示例Box-sizing: border-Box; border-right-width: 0px; background-color: rgb(247,247,247); border-bottom-width: 0px; border-top: rgb(221,187) 1px solid; padding-top: 4px">contains(text)Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">匹配包含给定文本的元素Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">$("li:contains('DOM')")//匹配含有“DOM”文本内容的li元素Box-sizing: border-Box; border-right-width: 0px; background-color: rgb(255,187) 1px solid; padding-top: 4px">:emptyBox-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">匹配所有不包含子元素或者文本的空元素Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">$("td:empty")//匹配不包含子元素或者文本的单元格Box-sizing: border-Box; border-right-width: 0px; background-color: rgb(247,187) 1px solid; padding-top: 4px">:has(selector)Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">匹配含有选择器所匹配元素的元素Box-sizing: border-Box; border-bottom: rgb(187,187) 1px solid; padding-top: 4px">$("td:has(p)")//匹配表格的单元格中含有
二 应用
应用内容过滤器匹配为空的单元格、不为空的单元格和包含指定文本的单元格
三 代码
rush:js;">
四 运行结果
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。