jQuery中内容过滤器简单用法示例

本文实例讲述了jQuery中内容过滤器简单用法。分享给大家供大家参考，具体如下：

一介绍

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:contains(text)、:empty、:has(selector)和:parent4种，如下表所示。

Box-sizing: border-Box; border-bottom: rgb(187,187,187) 1px solid; text-align: left; border-left: rgb(187,187) 1px solid; widows: 2; text-transform: none; background-color: rgb(255,255,255); font-style: normal; text-indent: 0px; margin: 0px; display: table; border-collapse: collapse; font-family: Helvetica,"Hiragino Sans GB",微软雅黑,"Microsoft YaHei UI",Simsun,SimHei,arial,sans-serif; white-space: normal; orphans: 2; letter-spacing: normal; color: rgb(69,69,69); font-size: 15px; border-top: rgb(187,187) 1px solid; font-weight: normal; border-right: rgb(187,187) 1px solid; word-spacing: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px"> Box-sizing: border-Box; border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px"> Box-sizing: border-Box; border-right-width: 0px; background-color: rgb(255,255); border-bottom-width: 0px; border-top: rgb(221,221,221) 1px solid; border-left-width: 0px; border-image: initial">

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)")//匹配表格的单元格中含有

标记的单元格Box-sizing: border-Box; border-right-width: 0px; background-color: rgb(255,187) 1px solid; padding-top: 4px">:parentBox-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: parent")//匹配不为空的单元格，即在该单元格中还包括子元素或者文本

二应用

应用内容过滤器匹配为空的单元格、不为空的单元格和包含指定文本的单元格

三代码

rush:js;">

四运行结果