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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery的内容过滤选择器学习教程_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3489字，纯文字阅读大概需要5分钟。

内容图文

jQuery 提供了一个has()方法来提高:has 过滤器的性能：

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上，主要包括以下四种过滤方法：

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

John Resign
George Martin
Malcom John Sinclair
J.Ohn


Has p

一、内容过滤选择器——:contains(text)
选择器：

E:contains(text) //E是指DOM元素，:contains(text)包含的文本，text是指定查找的字符串
描述：

选取含有文本内容为“text”的元素

返回值：

集合元素

实例：

功能：

改变含有文本为“John”的div元素的背景色

效果：

回到前面的HTML结构中我们可以看出其中有两个div元素中包含了"John"文本，因为我们这里主要是改变了包含文本“John”的div的背景色，因此大家在效果中可以看出我们其中第一个和第三个div的背景色变成了"#f36",为了更能体会从中的变化，大家可以通过Firefox中的Firebug工具看出HTML的变化：

二、内容过滤选择器——:empty

选择器：

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

选取不含任何子元素或文本的空元素

返回值：

集合元素

实例：

功能：

改变不含子元素（包括不含文本元素）的div的背景色，换句话说，就是改变不包含任何东西的div的背景色

效果：

虽然我们前面的html中所有元素中不包含子元素，但有一些包含了文本元素，只有一个div和一个p元素具没有子元素也没有文本内容。加上我们这个例子中，我们只对不包含子元素和文本内容的div进行了改变背景色的设置，所以我们的效果中只有div加上了“#f36”的背景色，同样我们来看看HTML的变化吧：

三、内容过滤选择器——:has(selector)

选择器：

E:has(selector) //其中E为有效果DOM元素标签，:has(selector)含有一个选择器，selector用于筛选的选择器

描述：

选取含有选择器所匹配的元素的元素

返回值：

集合元素

实例：

在我们这个实例中，只有一个div中包含了子元素P，所以包含了符合这个要求的div元素其背景色被设置为“#f36”，改变后的HTML:

四、内容过滤选择器——:parent

选择器：

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

描述：

选取含有子元素或者文本的元素标签

返回值：

集合元素

实例：

内容总结

以上是互联网集市为您收集整理的jQuery的内容过滤选择器学习教程_jquery全部内容，希望文章能够帮你解决jQuery的内容过滤选择器学习教程_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端