`
willsunforjava
  • 浏览: 167855 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery筛选器

 
阅读更多

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筛选器插件选项卡

    标题中的“jquery筛选器插件选项卡”是指利用jQuery库来创建一个功能丰富的筛选器组件,该组件以选项卡的形式展示,用户可以通过点击不同的选项卡来筛选内容。这个插件通常用于网页上数据的分类展示,例如产品列表、...

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

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

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

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

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

    《CSS3、HTML5与jQuery筛选器插件:构建选项卡效果》 在现代网页设计中,CSS3、HTML5和jQuery的结合使用已经成为一种趋势,它们为开发者提供了丰富的功能和出色的用户体验。在这个主题中,我们将深入探讨如何利用...

    jQuery 筛选器简单操作示例

    本文实例讲述了jQuery 筛选器简单操作。分享给大家供大家参考,具体如下: jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this...

    jquery筛选器插件选项卡HTML5 css3制作筛选容器选项卡

    本主题探讨的是如何利用jQuery、HTML5和CSS3来创建一个功能丰富的筛选器插件,特别是针对选项卡式界面。选项卡设计是用户界面中常见的布局模式,能够有效地组织和展示大量信息,提高用户体验。 首先,让我们从HTML5...

    JQuery筛选器全系列介绍

    例如:$(“*”)·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$(“#id,div,.style1”) 2).表单 ·:button 匹配所有按钮。例如:$(“:button”)·:checkbox 匹配所有复选框。...

    jQuery筛选器children()案例详解(图文)

    在jQuery中,选择器和筛选器是两种不同的概念,它们共同构成了jQuery强大的DOM操作功能。选择器用于选取符合特定规则的HTML元素,而筛选器则是对已选择的元素集进行进一步筛选,以满足更具体的需求。本文将深入探讨...

    jquery表格筛选器.rar

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

    jQuery筛选选择器.png

    jQuery筛选选择器

    jquery滑动效果带进度条滑动筛选器代码

    本教程将详细讲解如何利用jQuery实现一个带有进度条的滑动筛选器代码,以提升用户体验。 首先,让我们理解标题中的“滑动效果”和“进度条滑动筛选器”。滑动效果通常指的是页面元素(如图片或内容块)在用户滚动...

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

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

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

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

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

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

    jQuery筛选列表过滤插件Filterizr

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

    jquery常见的选择器、筛选器、事件.docx

    以上介绍了 jQuery 中各种常用的选择器、筛选器、查找方法以及属性操作的基本用法。这些方法可以极大地提高前端开发的效率,并帮助开发者更轻松地处理页面元素。通过灵活运用这些功能,可以实现更加复杂的用户界面...

    jQuery筛选排序插件listnav

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

Global site tag (gtag.js) - Google Analytics