首页 > web前端 > 前端问答 > jquery怎么实现过滤功能

jquery怎么实现过滤功能

青灯夜游
发布: 2022-06-10 15:09:02
原创
2557 人浏览过

jquery中通过过滤选择器来实现过滤功能。按照不同的过滤规则,过滤选择器可分为:1、内容过滤选择器,可根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以绝对模糊或绝对匹配进行元素定位;2、可见性过滤器,可根据元素是否可见的特征获取元素;3、属性过滤器,可根据元素的某个属性获取元素;4、表单对象属性过虑器,可通过表单中某对象属性特征获取元素,如enabled属性。

jquery怎么实现过滤功能

本教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jquery中通过多种过滤选择器来实现过滤功能。

过滤?肯定是要添加过滤条件的。通过“:”添加过滤条件,比如“$(“div:first”)”返回div元素集合的第一个div元素,first是过滤条件。
按照不同的过滤规则,过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器等。

1)简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中过滤选择中使用最广泛的一种

选择器 功能描述
first()或 :first 获取第一个元素
last()或 :last 获取最后一个元素
:not(selector) 获取除给定选择器外的所有元素
:even 获取所有索引值为偶数的元素,索引号从0开始
:odd 获取所有索引值为奇数的元素,索引号从0开始
:eq(index) 获取指定索引值的元素,索引号从0开始
:gt(index) 获取所有大于给定索引值的元素,索引号从0开始
:lt(index) 获取所有小于给定索引值的元素,索引号从0开始
:header 获取所有标题类型的元素,如h1、h2… 元素集合
:animated 获取正在执行动画效果的元素

2)内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以绝对模糊或绝对匹配进行元素定位

选择器 功能描述
:contains(text) 获取包含给定文本的元素
:empty 获取所有不包含子元素或者文本的空元素
:has(selector) 获取含有选择器所匹配的元素
:parent 获取含有子元素或者文本的元素

3)可见性过滤器

可见性过滤选择器根据元素是否可见的特征获取元素

选择器 功能描述
:hidden 获取所有不可见元素,或者type为hidden的元素
:visble 获取所有的可见元素

4)属性过滤器

属性过滤器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以“[”号开始、一"]"号结束

选择器 功能描述
[attribute] 获取包含给定属性的元素
[attribute=value] 获取等于给定的属性是某个特定值的元素
[attribute!=value] 获取不等于给定的属性是某个特定值的元素
[attribute^=value] 获取给定的属性是以某些值开始的元素
[attribute$=value] 获取给定的属性是以某些值结束的元素
[attribute*=value] 获取给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 获取满足多个条件的符合属性的元素

5)子元素过滤器

在页面开发过程中,尝尝遇到突出指定某行的需求。虽然使用基本过滤选择器“:eq(index)"可实现单个表格的显示,但不能满足大量数据和多个表格的选择需求。为了实现这样的功能,jQuery中可以通过子元素过滤选择器轻松获取所有父元素中的某个元素。

选择器 功能描述
:nth-child(eq/even/odd/index) 获取每个父元素下的特定位置元素,索引号从1开始
:first-child 获取每个父元素下的第一子元素
:last-child 获取每个父元素下的最后一个子元素
:only-child 获取每个父元素下的仅有一个子元素

6)表单对象属性过虑器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该元素,如enabled、disabled、checked、selected属性。

选择器 功能描述
:enabled 获取表单中所有属性为可用的元素
:disabled 获取表单中素有属性为不可用的元素
:checked 获取表单中所有被选中的元素
:selected 获取表单中所有被选中option的元素

7)表单过虑器

在jQuery选择器中引入表单选择器,该选择器专为表单量身打造,通过它可以在页面中快速定位某表单对象。

选择器 功能描述
:input 获取所有input、textarea、select
:text 获取所有单行文本框
:password 获取所有密码框
:radio 获取所有单选按钮
:checkbox 获取复选框
:submit 获取所有提交按钮
:image 获取所有图像域
:reset 获取所有重置按钮
:button 获取所有按钮
:file 获取所有文件域

【推荐学习:jQuery视频教程web前端视频

以上是jquery怎么实现过滤功能的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板