基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器

筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头,通过一个列表,看看基本筛选器的描述:

注意事项:

  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
  2. gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始
  3. gt:greater than ;lt:less than

内容筛选选择器

基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上

内容过滤器描述如下表:

注意事项:

  1. :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
  3. :parent与:empty是相反的,两者所涉及的子元素,包括文本节点

可见性筛选选择器

元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

描述如下:

这2个选择器都是 jQuery 延伸出来的,看起来比较简单,但是元素可见性依赖于适用的样式

:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素:

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度,是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的,如果当他们被插入到文档中,jQuery没有办法知道他们是否是可见的,因为元素可见性依赖于适用的样式

属性筛选选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。

描述如下:

浏览器支持:

  • [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
  • [name!="value"]  属于jQuery 扩展的选择器
CSS选择器无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

子元素筛选选择器

子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表:

注意事项:

  1. :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  2. :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
  3. 如果子元素只有一个的话,:first-child与:last-child是同一个
  4. :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
  5. jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
  6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

转载于:https://www.cnblogs.com/sMKing/p/5804177.html

jQuery的筛选选择器相关推荐

  1. jQuery属性筛选选择器

    2019独角兽企业重金招聘Python工程师标准>>> 代码一 <h2>属性筛选选择器</h2><h3>[att=val].[att].[att| ...

  2. JQuery选择器——基本筛选选择器和内容筛选选择器

    基本筛选选择器和内容筛选选择器 1   基本筛选选择器能更快捷的找到所需的DOM元素 2   基本筛选选择器的描述 $(":first")        匹配第一个元素 $(&qu ...

  3. JQuery中的基本筛选选择器

    很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQuery自己为了开 ...

  4. jQuery 的常用选择器,筛选器

    jQuery jQuery 的简介 插件 :一个功能高度分装 类库 :工具库,提供操作工具,不提供具体功能 jQuery 是一个工具集合 框架 : 项目每一个组件都会提供出来.我们只需要引入框架语法, ...

  5. jQuery教程09-子元素筛选选择器

    jQuery选择器之子元素筛选选择器 子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点 子元素筛选选择器描述表: 注意: :first只匹配一个单独的元素,但是:first-child ...

  6. jQuery教程08-属性筛选选择器

    jQuery选择器之属性筛选选择器 属性选择器让你可以基于属性来定位一个元素.可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值 ...

  7. jQuery教程07-内容筛选选择器

    jQuery选择器之内容筛选选择器 基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 内容过 ...

  8. jQuery教程06-基本筛选选择器

    jQuery选择器之基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CS ...

  9. jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

    jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...

最新文章

  1. 关于本分类(codeforces-好题系列)
  2. PHP Session变量
  3. html统计筛选表格count,Excel中工作表数据进行计数和筛选的操作方法
  4. 深入认识javascript中的eval函数
  5. HDU1517 A Multiplication Game (博弈论+思维)
  6. 在win7命令行使用ssh通过秘钥登录linux
  7. Hello~CSND
  8. php5.0 cms安装教程,小浣熊CMS5.0漫画系统安装教程和采集教程
  9. 南通市城管局推动“数字化城管”向“智慧城管”升级
  10. Win7操作系统: 请求的操作需要提升
  11. 给excel设置格式
  12. kbhit(), bioskey(), system(pause)
  13. 深入理解Windows域概念
  14. 将一个数的每一位都正序输出——简单算法
  15. [网赚项目] 分享一个刚需赚钱项目,可多重变现,月入好几个w
  16. Dialog 对话框
  17. Definition of Spline Basis Function
  18. 【其他】逻辑、逻辑推理概念
  19. 蓝牙(BLE)传输数据的吞吐量
  20. 云商城类似于淘宝商城系统源码+附教程

热门文章

  1. C语言能否写windows应用程序,C语言能写windows的窗口吗?
  2. 15.10.4 捕获异常
  3. spring 各个jar包的功能
  4. LeetCode Pancake Sorting
  5. 用python的字典实现简单的通讯录
  6. js字符串与数组的处理
  7. OS X进程管理之launchctl
  8. 2015结束,2016开始
  9. SQL(Oracle)日常使用与不常使用函数的汇总
  10. 如何优化电子邮件营销的效果