当前位置: 首页 > news >正文

jQuery 元素选择器集合

jQuery 提供了一套非常强大的元素选择器,它们可以以各种方式定位和操作网页文档中的元素。

以下是 jQuery 中的一些常用选择器:

1、基本选择器

#id:选择 ID 为 id 的元素。.(类选择器):选择具有特定类的所有元素。标签选择器:选择所有指定类型的标签。*:选择所有元素。[attribute]:选择具有指定属性的元素。[attribute=value]:选择具有指定属性和值的元素。

2、层次选择器 

>:子元素选择器,选择作为其直接子元素的元素。+:相邻兄弟选择器,选择紧接在另一个元素后的元素,且两个元素有相同的父元素。~:一般兄弟选择器,选择拥有相同父元素的元素。

3、后代选择器

空格分隔的选择器:选择作为后代元素的所有元素,无论层次多深。

4、子集选择器

:first:选择第一个元素。:last:选择最后一个元素。:even:选择索引为偶数的元素。:odd:选择索引为奇数的元素。:eq(index):选择索引为 index 的元素。:gt(index):选择索引大于 index 的所有元素。:lt(index):选择索引小于 index 的所有元素。

5、表单对象属性过滤器

:input:选择所有的 <input>, <textarea>, <select> 和 <button> 元素。:text:选择所有的 <input type="text"> 元素。:password:选择所有的 <input type="password"> 元素。:radio:选择所有的 <input type="radio"> 元素。:checkbox:选择所有的 <input type="checkbox"> 元素。:selected:选择所有 <option> 被选中的元素。:checked:选择所有被选中的 <input> 元素。:enabled:选择所有启用的表单元素。:disabled:选择所有禁用的表单元素。

6、可见性过滤器

:visible:选择所有可见的元素。:hidden:选择所有不可见的元素。

7、内容过滤器

:contains(text):选择包含文本 text 的元素。:empty:选择没有子元素或文本的元素。:parent:选择含有子元素或文本的元素。

8、属性选择器

:has(selector):选择含有匹配 selector 的子元素的元素。[attribute!=value]:选择不具有属性 value 的元素。[attribute^=value]:选择属性值以 value 开头的元素。[attribute$=value]:选择属性值以 value 结尾的元素。[attribute*=value]:选择属性值包含 value 的元素。

这些选择器可以组合使用,形成更复杂的查询表达式。

例如:

div p:选择所有位于 div 元素内部的 p 元素。div > p:选择所有直接位于 div 元素内部的 p 元素。div + p:选择所有紧接在 div 元素之后的 p 元素。div ~ p:选择所有位于 div 元素之后的 p 元素,但不一定紧接在后。

使用这些选择器时,只需要将它们按照语法要求组合起来,然后用 $() 函数包裹即可。

例如:

$('#someId').find('div p');
$('.someClass').siblings('.anotherClass');
$('div').children('p');

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 数据结构第25节 深度优先搜索
  • 【算法】无重复字符的最长子串
  • MySql中modify、rename、change的用法和区别
  • CSS技巧专栏:一日一例 1.纯CSS实现 会讨好的热情按钮 特效
  • Java版Flink使用指南——从RabbitMQ中队列中接入消息流
  • 卷积神经网络——LeNet——FashionMNIST
  • tensorflow之欠拟合与过拟合,正则化缓解
  • Google Hacking
  • server nat表和会话表的作用及NAT地址转换详细
  • Linux 一键部署Mysql 8.4.1 LTS
  • 深度学习Day-24:ResNeXt-50算法思考
  • Kafka学习
  • PS怎么给图片打马赛克
  • 从 ArcMap 迁移到 ArcGIS Pro
  • linux创建定时任务
  • [PHP内核探索]PHP中的哈希表
  • 自己简单写的 事件订阅机制
  • Flex布局到底解决了什么问题
  • Java 23种设计模式 之单例模式 7种实现方式
  • log4j2输出到kafka
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • puppeteer stop redirect 的正确姿势及 net::ERR_FAILED 的解决
  • Python利用正则抓取网页内容保存到本地
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 从tcpdump抓包看TCP/IP协议
  • 二维平面内的碰撞检测【一】
  • 给github项目添加CI badge
  • 前端面试总结(at, md)
  • 携程小程序初体验
  • 源码安装memcached和php memcache扩展
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​低代码平台的核心价值与优势
  • # 利刃出鞘_Tomcat 核心原理解析(二)
  • #APPINVENTOR学习记录
  • #QT(TCP网络编程-服务端)
  • #知识分享#笔记#学习方法
  • ()、[]、{}、(())、[[]]等各种括号的使用
  • (2)STL算法之元素计数
  • (3) cmake编译多个cpp文件
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (C#)一个最简单的链表类
  • (DenseNet)Densely Connected Convolutional Networks--Gao Huang
  • (Oracle)SQL优化基础(三):看懂执行计划顺序
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (第27天)Oracle 数据泵转换分区表
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (十八)SpringBoot之发送QQ邮件
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • *** 2003
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .net core 源码_ASP.NET Core之Identity源码学习
  • .net反编译工具