`

JQuery的强大筛选器

阅读更多

在Web应用程序中,大部分的客户端操作都是基于对象的操作,要操作对象就必须先获取对象,jQuery(v1.3.2)提供了强大的选择器让我们获取对 象。在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件。选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符 合某些特征的对象。

1.选择对象

1).基本

·#id

根据给定的ID匹配一个元素。例如:$("#id")
·element 根据给定的元素名匹配所有元素。例如:$("div")
·.class 根据给定的类匹配元素。例如:$(".style1");
·* 匹配所有元素。例如:$("*")
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$("#id,div,.style1")

2).表单

·:button 匹配所有按钮。例如:$(":button")
·:checkbox 匹配所有复选框。例如:$(":checkbox")
·:file 匹配所有文件域。例如:$(":file")
·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$("input:hidden")
·:image 匹配所有图像域。例如:$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
·:password 匹配所有密码框。例如:$(":password")
·:radio 匹配所有单选按钮。例如:$(":radio")
·:reset 匹配所有重置按钮。例如:$(":reset")
·:submit 匹配所有提交按钮。例如:$(":submit")
·:text 匹配所有的单行文本框。例如:$(":text")
·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(":header").css("background", "#EEE");

2.筛选条件

1).属性筛选

·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!='man');
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$("input[name$='man']")
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$("input[name='man']");
·[attribute] 匹配包含给定属性的元素。例如:$("div[id]")
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$("input[name^='man']")
·[selector1][selector2][selectorN] 同时满足多个条件。例如:$("input[id][name$='man']")
·:hidden 匹配所有的不可见元素。例如:$("tr:hidden")
·:visible 匹配所有的可见元素。例如:$("tr:visible")
·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$("input:checked")
·:disabled 匹配所有不可用元素。例如:$("input:disabled")
·:enabled 匹配所有可用元素。例如:$("input:enabled")
·:selected 匹配所有选中的option元素。例如:$("select option:selected")

2).内容筛选

·:contains(text) 匹配包含给定文本的元素。例如:$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")

3).层级筛选

·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$("form input")
·parent > child 在给定的父元素下匹配所有的子元素。例如:$("form > input")
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$("form ~ input")
·:first-child 匹配第一个子元素。例如:$("ul li:first-child")
·:last-child 匹配最后一个子元素。例如:$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$("ul li:nth-child(2)")
·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$("ul li:only-child")

4).方法筛选

·:animated 匹配所有正在执行动画效果的元素。例如:$("div:animated");
·:eq(index) 匹配一个给定索引值的元素。例如:$("tr:eq(1)")
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$("tr:even")
·:first 匹配找到的第一个元素。例如:$("tr:first")
·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$("tr:gt(0)")
·:last 匹配找到的最后一个元素。例如:$("tr:last")
·:lt(index) 匹配所有小于给定索引值的元素。例如:$("tr:lt(2)")
·:not(selector) 去除所有与给定选择器匹配的元素。例如:$("input:not(:checked)")
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$("tr:odd")
分享到:
评论

相关推荐

    jquery表格筛选器.rar

    《jQuery表格筛选器详解及其应用》 在网页开发中,数据展示往往涉及到大量的表格内容,如何高效、便捷地对这些信息进行筛选,是提升用户体验的关键。"jQuery表格筛选器"便是一个为此目的而设计的工具,它使得用户...

    jQuery图片筛选过滤器插件.zip

    5. **应用样式**:使用CSS对筛选器和图片进行样式定制,使其与网站整体风格保持一致。 四、实际应用 在实际项目中,"jQuery图片筛选过滤器插件"可用于各种场合,如电子商务网站的商品图片展示,摄影作品集,旅行...

    jquery表格筛选功能

    在实现表格筛选功能时,我们会用到jQuery的选择器、事件处理和DOM操作等功能。 下面是一个基本的实现步骤: 1. **选择元素**:首先,我们需要选择表格和筛选输入框。例如,如果筛选输入框的ID是`searchInput`,...

    jQuery带过滤功能列表分类筛选插件代码

    jQuery的核心概念是选择器(Selectors),它用于选取HTML元素。例如,`$("#myID")`会选择ID为"myID"的元素,`$(".myClass")`会选择所有类名为"myClass"的元素。 **二、列表分类筛选的重要性** 在现代网页设计中,...

    jquery 筛选器 制作类似雅虎饲料中阅读器小工具

    在本教程中,我们将深入探讨如何使用jQuery筛选器来创建一个类似于雅虎饲料中的阅读器小工具。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。筛选器是jQuery的一个核心功能,允许我们高效...

    css3和HTML5特效jquery筛选器插件选项卡

    jQuery库简化了JavaScript的DOM操作,其筛选器功能强大,如: 1. **Class选择器**: 通过`.class`选择具有特定类名的元素。 2. **ID选择器**: 通过`#id`选择具有特定ID的元素。 3. **属性选择器**: 通过`[attribute=...

    jQuery仿淘宝商品多条件筛选代码

    总的来说,"jQuery仿淘宝商品多条件筛选代码"是一个实用的Web开发工具,它结合了jQuery的强大功能和响应式设计原则,为构建高效的多分类筛选系统提供了便利。通过理解和学习这个项目,开发者可以提升自己的前端技能...

    css3和HTML5特效jquery筛选器插件选项卡.zip

    在实现筛选器插件时,我们可以通过jQuery选择器快速定位元素,然后使用`.click()`或`.on('click')`监听用户点击事件。`.hide()`和`.show()`方法可以用来隐藏和显示内容,而`.toggleClass()`则可以方便地切换类名,...

    jQuery设置表格列字段筛选改变代码

    接下来是CSS(`css`文件),用于美化表格和可能的筛选指示器。例如,可以为被选中的列添加一个特殊样式。 ```css .selected { background-color: lightblue; } ``` 最后,我们关注JavaScript部分,这部分主要由...

    jquery筛选并控制图片排序插件

    总结来说,"jquery筛选并控制图片排序插件"涉及到jQuery的选择器、事件处理、DOM操作、数组排序以及插件开发等多个知识点。通过巧妙运用这些技术,开发者可以构建出功能强大、用户体验优良的图片管理模块,适用于...

    jQuery可筛选响应式瀑布流

    本项目"jQuery可筛选响应式瀑布流"是针对网页上图片展示的一种高效解决方案,尤其适合内容丰富的网站或者电商平台,能够提供美观且交互性强的图片展示效果。 瀑布流(Masonry Layout)是一种网页布局方式,它的特点...

    jQuery商品分类多项筛选菜单.zip

    在该筛选菜单的实现中,主要利用了jQuery的选择器、事件处理和DOM操作等特性。选择器用于找到页面上的特定元素,事件处理则用于监听用户的操作,而DOM操作则用来动态修改页面内容,实现菜单的展开、收起以及商品筛选...

    jQuery可筛选下拉框美化插件.zip

    1. **初始化插件**:在页面加载完成后,通过jQuery选择器找到需要应用插件的下拉框元素,并调用插件方法进行初始化。 2. **构建搜索框**:在下拉框前添加一个搜索输入框,监听用户的输入事件。 3. **实时过滤**:...

    jquery filterizr图片列表筛选插件附教程链接

    Filterizr是一款基于jQuery的强大的图像过滤和排序插件,它允许用户在网页上实现优雅的图片列表筛选效果。通过使用这个插件,开发者可以为网站添加交互性,使用户能够轻松地根据类别、属性或其他条件筛选展示的内容...

    jQuery多重筛选过滤插件Filterizr.zip

    4. **自定义配置**:开发者可以通过配置选项来调整筛选行为,例如设置动画速度、选择排序方式、启用或禁用特定筛选器等,以适应不同的设计需求。 5. **响应式设计**:Filterizr兼容各种屏幕尺寸,确保在桌面端和...

    jQuery筛选列表过滤插件Filterizr

    jQuery筛选列表过滤插件Filterizr是一款强大的前端工具,主要用于实现动态筛选和排序列表项,尤其适用于展示项目集合或产品目录的网页。它以其简洁的API和丰富的自定义选项,为开发者提供了灵活且高效的解决方案。 ...

    jquery 动态选择器

    在JavaScript的世界里...总结来说,jQuery的动态选择器为开发者提供了强大而灵活的方式来选取和操作DOM元素,大大提升了JavaScript编程的效率。通过熟练掌握这些选择器,开发者可以更轻松地实现复杂的交互和动态效果。

    jquery多条件筛选样式

    通过以上知识点的组合运用,我们可以创建出一个功能强大且用户体验良好的多条件筛选功能,使用户在海量数据中快速定位到他们感兴趣的内容。在实际开发过程中,应考虑代码的可维护性和扩展性,同时注意性能优化,确保...

    jQuery选择器全解.

    jQuery是一种快速、简洁的JavaScript库,其核心特性之一便是强大的选择器引擎。通过jQuery选择器,开发者能够轻松地定位和操作DOM(Document Object Model)元素,极大地提高了网页开发的效率与灵活性。本文将深入...

    jQuery筛选排序插件listnav

    jQuery筛选排序插件Listnav是一款强大的JavaScript工具,它专为提升用户体验而设计,特别是在处理大型数据列表时。通过在网页上动态添加一个筛选导航栏,用户可以轻松地过滤出他们感兴趣的信息,极大地提高了浏览...

Global site tag (gtag.js) - Google Analytics