jquery怎么实现过滤功能
- 青灯夜游 原创
- 2022-06-10 15:09:02 2227浏览
jquery中通过过滤选择器来实现过滤功能。按照不同的过滤规则，过滤选择器可分为：1、内容过滤选择器，可根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以绝对模糊或绝对匹配进行元素定位；2、可见性过滤器，可根据元素是否可见的特征获取元素；3、属性过滤器，可根据元素的某个属性获取元素；4、表单对象属性过虑器，可通过表单中某对象属性特征获取元素，如enabled属性。
本教程操作环境：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前端视频】
