jQuery之过滤选择器

过滤选择器

1.基本选择器

2.内容选择器

3.可见性选择器

4.子元素过滤器

过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持CSS3的

浏览器也能支持。和常规的选择器一样,jQuery为了更方便开发者使用,提供了很多独有的过滤器。

一、基本过滤器

过滤器主要通过特定的过滤规则来筛选所需的DOM元素,和CSS中的伪类的语法类似:使用冒号(:)开头。

过滤器名 jQuery语法 说明 返回 :first $(‘li :first’) 选取第一个元素 单个元素 :last $(‘li :last’) 选取最后一个元素 单个元素 :not(selecter) $(‘li :not(.red)’) 选取class不是red的li元素 集合元素 :even $(‘li :even’) 选择索引(0 开始)是偶数的所有元素 集合元素 :odd $(‘li :odd’) 选择索引(0 开始)是奇数的所有元素 集合元素 :eq(index) $(‘li :eq(2)’) 选择索引(0 开始)等于index的元素 单个元素 :gt(index) $(‘li :gt(2)’) 选择索引(0 开始)大于index的元素 集合元素 :lt(index) $(‘li :lt(2)’) 选择索引(0 开始)小于index的元素 集合元素 :header $(‘li :header’) 选择标题元素,h1~h6 集合元素 :animated $(‘li :animated’) 选择正在执行动画的元素 集合元素 :focus $(‘li :focus’) 选择当前被焦点的元素 集合元素

jQuery为最常用的过滤器提供了专用的方法,以达到提高性能和效率的作用:

$(‘li’).eq(2).css(‘background’,’#ccc’); //元素li的第三个元素,负数从后开始

$(‘li’).first().css(‘background’,’#ccc’); //元素li的第一个元素

$(‘li’).last().css(‘background’,’#ccc’); //元素li的最后一个元素

$(‘li’).not(.red).css(‘background’,’#ccc’); //元素li不含class为red的元素

注意::first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素,所以,如果需要明确是哪个父元素,需要指明:

$(‘#box li:last’).css(‘background’,’#ccc’); //#box元素的最后一个li

//或

$(‘#box li’).last().css(‘background’,’#ccc’) //同上

二、内容过滤器

内容过滤器的过滤规则主要是包含的子元素或文本内容上。

过滤器名 jQuery语法 说明 返回 :contains(text) $(‘:contains(“ycku.com”)’) 选取含有”ycku.com”文本的元素 元素集合 :empty $(‘:empty’) 选取不包含子元素或空文本的元素 元素集合 :has(selector) $(‘:has(.red)’) 选取含有class是red的元素 元素集合 :parent $(‘:parent’) 选取含有子元素或文本的元素 元素集合

jQuery提供了一个has()方法来提高.has过滤器的性能:

$(‘ul’).has(.red).css(‘background’,’#ccc’) //选择子元素含有class是red的元素

jQuery提供了一个名称和:parent相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是选取当前元素的父元素,返回是元素集合。

$(‘li’).parent().css(‘background’,’#ccc’) //选择当前元素的父元素

$(‘li’).parents().css(‘background’,’#ccc’) //选择当前元素的父元素及祖先元素

$(‘li’).parentsUntil(‘div’).css(‘background’,’#ccc’) //选择当前元素的父元素及祖先元素,遇到div父元素停止

三、可见性过滤器

可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

过滤器名 jQuery语法 说明 返回 :hidden $(‘:hidden’) 选取所有不可见元素 集合元素 :visible $(‘:visible’) 选取所有可见元素 集合元素

$(‘p:hidden’).size(); //元素p隐藏的元素

$(‘p:visible’).size(); //元素p显示的元素

注意:hidden过滤器一般包含的内容为:CSS样式为display:none、input表单类型为type=”hidden”和visibility:hidden的元素。

四、子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

过滤器名 jQuery语法 说明 返回 :first-child $(‘li:first-child’) 获

父元素的第一个子元素 集合元素 :last-child $(‘li:last-child’) 获取

父元素的最后一个子元素 集合元素 :only-child $(‘li:only-child’) 获取只有一个子元素的元素 集合元素 :nth-child(odd/even/eq(index)) $(‘li:nth-child(even)’) 获取

自定义子元素的元素(索引值从 “

开始计算) 集合元素

五、其他方法

jQuery在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用。

方法名 jQuery语法 说明 返回 is(s/o/e/f) $(‘li’).is(‘.red’) 传递选择器、DOM、jQuery对象 集合元素 hasClass(class) $(‘li’).hasClass(‘red’) 其实就是is(“.”+class) 集合元素 end() $(‘div’).find(‘p’).end() 获取当前元素前一个状态(当前元素的前一个元素) 集合元素 contents() $(‘div’).contents() 获取某元素下面所有元素节点,包括文本你节点 集合元素

$(‘.red’).is(‘li’); //true,选择器,检测class是否为red

$(‘li’).eq(2).hasClass(‘red’); //和is一样,只不过只能传递class

Original: https://www.cnblogs.com/elementplay/p/8306828.html
Author: 赵妹儿
Title: jQuery之过滤选择器

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/575092/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 制作Elasticsearch索引初始化docker镜像

    背景 由于公司使用自己的编排系统(基于docker),所以在业务服务启动时,需要对某些服务对象进行初始化,本文就对es索引的初始做一个小的分享; 大致流程 初始化步骤主要是基于do…

    Java 2023年6月8日
    0120
  • mybatis的mapper特殊字符转移以及动态SQL条件查询

    前言 我们知道在项目开发中之前使用数据库查询,都是基于 jdbc,进行连接查询,然后是高级一点 jdbcTemplate进行查询,但是我们发现还是不是很方便,有大量重复sql语句,…

    Java 2023年6月13日
    0120
  • Buuctf-Web-[ACTF2020 新生赛]Include

    前言 刷题网址:https://buuoj.cn/challenges#[ACTF2020 新生赛]Include 首先打开网页,提示 tips点击他,根据题目提示很难不想到是文件…

    Java 2023年6月13日
    0151
  • 面试官:Java中对象都存放在堆中吗?你知道逃逸分析?

    面试官:Java虚拟机的内存分为哪几个区域? 我(微笑着):程序计数器、虚拟机栈、本地方法栈、堆、方法区 面试官:对象一般存放在哪个区域? 我:堆。 面试官:对象都存放在堆中吗? …

    Java 2023年6月7日
    0113
  • maven工程servlet实例之导入项目依赖jar包

    maven工程servlet实例之导入项目依赖jar包 添加 jar 包的坐标时,还可以指定这个 jar 包将来的作用范围。每个 maven 工程都需要定义本工程的坐标,坐标是 m…

    Java 2023年6月6日
    0130
  • 力扣算法题9. 回文数(Java)

    力扣算法题9. 回文数(Java) 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向左)读都是一…

    Java 2023年6月7日
    096
  • Jetpack架构组件学习(3)——Activity Results API使用

    原文地址:Jetpack架构组件学习(3)——Activity Results API使用 – Stars-One的杂货小窝 技术与时俱进,页面跳转传值一直使用的是 s…

    Java 2023年6月13日
    0123
  • pytorch中的transpose()函数

    torch.transpose(Tensor,dim0,dim1)是pytorch中的ndarray矩阵进行转置的操作 例如:x = ([[0,1,2],[3,4,5],[6,7,…

    Java 2023年6月16日
    0160
  • grep: memory exhausted, 记录一次日志查询问题

    今天某个项目的数据有些问题,需要查询日志看看具体的情况 结果在执行 cat .log |grep “关键字”* 命令后包如下错误: grep: memory…

    Java 2023年6月5日
    0121
  • oracle数据库动态拼接查询条件解决方案

    oracle、动态参数传递 在项目中遇到需要动态拼接查询条件的需求,现将解决方案列于下。 一、 sql;gutter:true; select * from table t whe…

    Java 2023年6月13日
    0120
  • 跟着柴毛毛学Spring(3)——简化Bean的配置

    通过前面的学习。我们会感觉到对于一个有较多Bean的大项目,Spring的配置会比較复杂。 那么接下来我们就介绍怎样简化Spring的配置。 简化Spring的配置主要分为两类:1…

    Java 2023年5月30日
    097
  • 希尔排序(java实现)

    一、概念及其介绍 希尔排序(Shell Sort)是插入排序的一种,它是针对直接插入排序算法的改进。 希尔排序又称缩小增量排序,因 DL.Shell 于 1959 年提出而得名。 …

    Java 2023年6月5日
    0105
  • 标识符和关键字

    标识符 标识符是什么? 关键字 为编程文件取名时不能使用图中的关键字,否则会直接报错,根本没法儿写后续内容 Java的所有组成部分都需要名字。类名,变量名以及方法名都被称为标识符 …

    Java 2023年6月9日
    0119
  • 小众网站

    AI音乐推荐 https://www.gnoosic.com/faves.phpRAP https://foreignrap.com壁纸 https://wallhaven.cc/…

    Java 2023年6月5日
    0111
  • 【上云】网站备案

    此前因为gitee图床挂了换了github,然后网速一般打算搞七牛云,然而七牛云需要备案域名(不然临时外链只能维持30days) 2022-5-19腾讯云服务器+阿里云域名在腾讯云…

    Java 2023年6月5日
    0105
  • SpringBoot扩展接口- ApplicationListener 事件监听器

    ApplicationListener监听器用来监听ApplicationEvent事件。 ApplicationListener 可以在Spring项目运行过程中,监听对应的事件…

    Java 2023年5月30日
    079
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球