JQuery筛选器

2023-11-06

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")

转载于:https://blog.51cto.com/apprentice/1360778

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JQuery筛选器 的相关文章

  • 如何检测 React 组件与 React 元素?

    React isValidElement对于 React 组件和 React 元素都测试为 true 具体来说 我如何测试一个对象是一个 React 组件 目前 我正在通过测试来做到这一点typeof obj type function 但
  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用
  • JQuery:如何自动完成“城市,州”?

    Question 怎么用啊JQuery 自动完成插件 http docs jquery com Plugins Autocomplete建议地点 City State 用于输入字段 意思是 有人想输入 伊利诺伊州芝加哥 所以他们开始打字 C
  • 如何在javascript中使用自动递增id?

  • jQuery:在整个文档上触发按键功能,但不在输入和文本区域内触发按键功能?

    我有这个 document keypress function e if e keyCode 119 w doSomething Wo 在我的文档上按 w 时doSomething 函数触发 当我当前正在输入 焦点 时 如何防止它触发inp
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 每 x 秒重复一次代码,但如果 [在此处插入检查] 则不重复

    这是后续这个问题 https stackoverflow com questions 13304471 javascript get code to run every minute 我在那里找到了如何使代码每 x 秒重复一次 是否有可能举
  • 为什么我在 ECMAScript / ActionScript 3 中看到不精确的浮点结果?

    大家好 让我们直接跳到代码示例 以展示 ECMAScript JavaScript AS3 如何无法正确执行简单的数学运算 AS3 对 Number 类使用 IEEE 754 双精度浮点数 据说与JavaScript 中使用的 trace
  • Collada 模型面在 Three.js 中无法正确显示

    将 collada 模型导入到 Three js 后 模型的某些面只能从模型内部看到 从外部看不到 如何解决相关面孔的问题 是否可以让模特的脸部从两侧都可见 它无法正常工作的原因是您的文件设置了此双面标志
  • 如何重定向到另一个页面并从表中传递 url 中的参数?

    如何重定向到另一个页面并从表中传递 url 中的参数 我在龙卷风模板中创建了类似的东西 table thead tr th Username th th Nation th th Rank th th th tr thead tbody f
  • 如何使用ckeditore通过ajax发送数据?

    我在 django 中有一个表格 这是 撰写邮件 形式 我将此表单从视图发送到我的模板 然后应用 ckeditor 来更改正文样式 我希望通过 ajax 发布此表单 当使用 ckeditor 时 body 字段的值不会随 request P
  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js
  • 如何使用 JavaScript 禁用滚动条?

    当我仅在 Internet Explorer 7 中显示代表模式窗口的 div 时 我需要锁定浏览器滚动条 谷歌搜索我发现我可以使用document body style overflow hidden 但这不适用于 IE7 我也尝试过do
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 如何使网站适应用户的屏幕分辨率?

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能
  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交
  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时
  • 将 MathJax 脚本添加到 Office 365 Sharepoint 中的页面

    我正在尝试将 Mathjax 库添加到 SharePoint 库 以便我们可以使用 LaTex 语法来添加方程 我在网上搜索时看到了多种方法 但似乎没有一种方法可以与最新版本的 MathJax 和 Office 365 版本的 ShareP
  • 在窗口调整大小和窗口加载时动态调整 pixi 舞台及其内容的大小

    我正在尝试在窗口调整大小时动态调整 pixi 舞台 画布和内容 的大小 并且最初以浏览器窗口的大小加载 而不改变比例 我使用以下内容将初始大小基本上设置为window innerWidth window innerHeight 但它做了一些
  • AngularJS 应用程序:如何将 .js 文件包含到 index.html 中

    我是 angularJS 的新手 我设法使用 AngularJS 构建了一个phonegap应用程序 该应用程序正常并且运行良好 问题是 现在我对 angularJS 的工作原理有了更多的了解 至少我认为我已经了解了 我担心我的应用程序文件

随机推荐

  • 给jupyter添加多个python版本的kernel

    两种方法 1 想添加的python版本已存在 1 通过ipykernel为jupyter添加python环境 activate env name python m ipykernel install name env name 2 关闭py
  • Windows安装Anaconda,创建pytorch环境,pycharm配置环境

    目录 1 简介 2 安装Anaconda 3 创建一个独立的环境 4 安装依赖的库 5 安装pytorch 6 pycharm中使用conda环境 7 到这里安装就结束了 希望对您有所帮助 如有什么错误请指正 1 简介 安装Anaconda
  • C++:重载

    一 重载 重载 重载函数是函数的一种特殊情况 为方便使用 C 允许在同一范围中声明几个功能类似的同名函数 但是这些同名函数的形式参数 指参数的个数 类型或者顺序 必须不同 也就是说用同一个函数完成不同的功能 重载函数常用来实现功能类似而所处
  • git fatal: unable to access  Failed to connect to localhost port 1080: Connection refused

    git 拉取 更新子模块失败 提示失败 Submodule libXesBase https git xxxxx com xesoa libXesBase git registered for path libXesBase Cloning
  • 整合google,51ditu和mapbar的地图API

    http blog 163 com goodluck lq 126 blog static 63285386201001994058213
  • Java中的异常处理机制的简单原理和应用。

    异常是指java程序运行时 非编译 所发生的非正常情况或错误 与现实生活中的事件很相似 现实生活中的事件可以包含事件发生的时间 地点 人物 情节等信息 可以用一个对象来表示 Java使用面向对象的方式来处理异常 它把程序中发生的每个异常也都
  • 基于STM32F103单片机的车牌识别图像处理识别系统 原理图PCB程序设计

    硬件电路的设计 末尾附文件 系统硬件系统分析设计 1 STM32单片机核心电路设计 STM32系列处理器是意法半导体ST公司生产的一种基于ARM 7架构的32位 支持实时仿真和跟踪的微控制器 选择此款控制芯片是因为本系统设计并非追求成本的最
  • React通过axios拿到数据后,使用hooks,通过map函数对列表进行渲染

    导入hooks 导入你封装的http模块 引入样式 import React useEffect useState from react import http from API import index scss 默认导出一个函数组价 并
  • C#学习记录——.NET的三层架构

    每一个不曾起舞的日子 都是对生命的辜负 尼采 每一个不读书的的日子 都是对时光的辜负 今天学习 零基础学C 3 0 NET的三层架构 为了实现大型应用系统后续功能的扩展性和程序的灵活性 NET编程语言借鉴了JAVA的MVC思想 产生了三层架
  • MySQL - 第9节 - MySQL内外连接

    目录 1 内连接 2 外连接 2 1 左外连接 2 2 右外连接 3 简单案例 1 内连接 表的连接分为内连接和外连接 内连接实际上就是利用where 子句对两种表形成的笛卡儿积进行筛选 我们前面学习的查询都是内连接 也是在开发过程中使用的
  • Markdown语法--Obsidian笔记

    Markdown 语法 笔记 文章目录 Markdown 语法 笔记 语法分类 文字层级类 1 标题 2 段落 3 区块引用 4 代码区块 5 列表 6 待办事项 文字格式类 1 样式 2 表格 链接引用类 1 链接 2 图片 3 脚注 4
  • Dubbo与Spring Cloud的区别

    这是个老生常谈的问题 每个技术团队在业务转型微服务化架构的时候都会纠结过这个选型问题 首先 dubbo 之前确实在 2012 年的时候发布了最后一个版本 2 5 3 并且停止维护更新 在2017年的时候又 起死回生 官方宣布重启更新 并重点
  • 2021图像检索综述

    论文地址 Deep Image Retrieval A Survey 本文是2021年最新的关于图像检索的综述 介绍了基于内容的图像检索 content based image retrieval CBIR 在深度学习技术上的进展 目录 0
  • Traceback (most recent call last): File “D:/python_workspace/hello.py“, line 3, in <module>

    错误背景 python的初学者 在学习多行语句 错误信息如下 错误原因 变量有字符串类型 有整型类型 有浮点型 在java 里面 String标识字符串类型 Int标识整型 在python里面 a yy1 就是字符串类型 a 1就是数字类型
  • 29_content 阶段的concat 模块

    文章目录 提升性能 content 阶段的 caoncat 模块 concat 模块的指令 示例配置 提升性能 content 阶段的 caoncat 模块 功能 当页面需要访问多个小文件时 把它们内容合并到一次http 响应中返回 提升性
  • 数组排序的方法?

    1 sort排序 let arr 1 2 3 4 5 6 7 8 9 0 9 8 7 6 3 4 5 5 var res console log arr 排序前 1 2 3 4 5 6 7 8 9 0 9 8 7 6 3 4 5 5 arr
  • SSD目标检测算法原理(上)

    目录 一 目标检测概述 1 1 项目演示介绍 1 2 图片识别背景 1 3 目标检测定义 二 目标检测算法原理 2 1 任务描述 2 2 目标检测算法必备基础 2 3目标检测算法模型输出 目标检测 overfeat模型 R CNN模型 候选
  • h2database源码解析-查询优化器原理

    目录 一 成本计算规则 二 单表查询 三 多表关联查询 一 成本计算规则 h2的查询优化器基于成本的 因此在执行查询前 会基于成本计算使用哪个索引 如果涉及多表关联 还会计算不同表关联顺序的成本 最终基于最小成本得出执行计划 单表查询时 遍
  • 树莓派驱动开发简单案例完整过程(动态加载驱动)

    1 下载树莓派os镜像 https www raspberrypi org downloads raspbian 2 使用命令 uname a 查看树莓派内核 Linux raspberrypi 4 19 118 v7 1311 SMP M
  • JQuery筛选器

    jQuery提供了强大的选择器让我们获取对象 在这边 我人为地将jQuery选择器分为两大部分 选择对象和筛选条件 选择对象表示要获取什么对象 筛选条件是对获取的对象进行筛选 最终留下符合某些特征的对象 1 选择对象1 基本 id根据给定的