jQuery的内容过滤器选择器学习教程

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

$(“div : contains”(“XXX”))。css('背景'，' # CCC ')；//选择元素$ ('div:empty ')。元素文本节点包含xxx文本的CSS ('background '，' # CCC ')；//选择空元素$ ('ul:has()。红色)')。CSS('背景'，' # CCC ')；//选定的子元素包含元素$ (':parent ')。类为红色的CSS ('background '，' # CCC ')；//选择非空元素jQuery提供了一个has()方法来提高：has过滤器的性能：

$('ul ')。has('。红色')。css('背景'，' # CCC ')；//选择一个类为红色的元素。jQuery提供了一个名称类似于：parent的方法，但是这个方法不选择包含子元素或文本的元素，而是获取当前元素的父元素并返回元素集合。

$('li ')。父项()。css('背景'，' # CCC ')；//选择父元素$ ('Li ')。父母()。当前元素的CSS('背景'，' # CCC ')；//选择父元素和祖先元素$ ('Li ')。父母直到(' div ')。当前元素的CSS('背景'，' # CCC ')；//当遇到div父元素时，选择当前元素停止jQuery内容过滤。选择器的过滤规则主要应用于DOM元素或其文本内容中包含的子元素，主要包括以下四种过滤方式：

为了学得更好，先写几个DOM元素的HTML结构：

Div辞职/Div乔治马丁/Div马尔孔约翰辛克莱/Div J.ohn/Div/Divp/PDIVHASP/p/Div I .内容过滤器选择器——:包含(文本)选择器：

E:contains(text) //E指的是DOM元素和包含在：contains(text)中的文本，它是指定搜索字符串的描述：

选择文本内容为“文本”的元素。

返回值：

收集元素

示例：

脚本类型='text/javascript' $(文档)。ready(function(){ $(' div : contains(John)')。css('背景'，' # f36 ')；});/script函数：

用文本“John”更改div元素的背景色。

效果：

回到前面的HTML结构，我们可以看到两个div元素都包含了文本‘John’，因为我们主要是改变了包含文本‘John’的div的背景颜色，所以在效果上可以看到第一个和第三个div的背景都变成了' #f36 '。为了更好的理解变化，我们可以通过Firefox中的Firebug工具看到HTML的变化：

第二，内容过滤器选择器——:为空。

选择器：

E:empty //其中e是DOM元素，empty表示DOM元素不包含任何子元素或文本描述：

选择没有任何子元素或文本的空元素。

返回值：

收集元素

示例：

脚本类型='text/javascript' $(文档)。ready(function(){ $(' div : empty ')。css('背景'，' # f36 ')；});/script函数：

更改没有子元素的div的背景颜色(包括没有文本的元素)，换句话说，更改没有任何内容的div的背景颜色。

效果：

虽然我们以前的html中的所有元素都不包含子元素，但有些包含文本元素，只有一个div和一个p元素没有子元素，也没有文本内容。此外，在我们的例子中，我们只改变了div的背景颜色，没有子元素和文本内容，所以我们的效果中只有div添加了背景颜色“#f36”。我们也来看看HTML的变化：

第三，内容过滤器选择器——:具有(选择器)。

选择器：

E:has(选择器)//其中e是有效的DOM元素标记，而：has(选择器)包含一个选择器，用于过滤。

描述：

选择包含由选择器匹配的元素的元素。

返回值：

收集元素

示例：

脚本类型='text/javascript' $(文档)。ready(function(){ $(' div : has(p)')。css('背景'，' # f36 ')；});/script功能：用子元素p改变div元素的背景色效果；

在我们的例子中，只有一个div包含子元素p，所以它包含满足这个要求的div元素，并且它的背景颜色设置为“#f36”，更改后的HTML:

四.内容过滤器选择器——:父级。

选择器：

E:parent //E是有效的DOM元素标记，parent包含子元素或文本内容。

描述：

选择包含子元素或文本的元素标签。

返回值：

收集元素

示例：

脚本类型='text/javascript' $(文档)。ready(function(){ $(' div : parent ')。css('背景'，' # f36 ')；});/script

功能：更改包含子元素或文本内容的div的背景颜色。换句话说，只有当div包含任何子元素或任何内容时，它的背景颜色才会改变。效果：

在本例中，只有一个div和一个p元素不包含任何子元素和文本内容。因为我们在这里设置了div，效果显示这两个没有子元素，没有任何内容的div的背景颜色都变成了“#f36”，更改后的HTML:

至于jQuery Selector中的内容过滤器选择器，我在这里简单说一下。如果你想更深入地了解它的具体用法，可以在本地多做几个例子。如果你对jQuery Selector的其他选择器的用法感兴趣，可以了解一下这个网站其他选择器的具体功能和用法，也可以随时观看这个网站的内容更新。