强大的JQuery选择器!

moboyou 2025-06-20 19:00 13 浏览

JQuery这个JS框架有多强大想必大家也是深有体会，在平常的工作当中我们用到的可能只有三分之一，但基本也是已经够用的了。现在我们来温习一下JQuery万能的选择器~~

在JavaScript中，我们可以使用

1、根据id获取DOM对象:
document.getElementById("id")
2、根据name属性获取一个DOM数组：
document.getElementsByName("name")
3、根据tag获取一个DOM数组：
document.getElementsByTagName("tag")

在JQuery中，我们则可以使用简单的：

$("#id")、$(".class")、$("tag")

来根据元素的ID、类名和html标签名进行DOM操作。

JQuery强大的选择器有以下这些：

1、匹配找到的第一个元素：$("div:first")
2、匹配找到的最后一个元素：$("div:last")
3、匹配一个给定索引值的元素,索引从0开始：$("div:eq(1)")
4、查找第1个以后的元素：$("div:gt(0)")
5、查找第一、二、三行的元素：$("div:lt(3)")
6、匹配所有索引值为奇数的元素，从 0 开始计数：$("div:odd")
7、找带有段落字样的p元素：$("p:contains('段落')")
8、匹配所有不包含子元素或者文本的空元素：$("div:empty")
9、匹配含有选择器所匹配的元素的元素：$("div:has('p')")
10、匹配含有子元素或者文本的元素：$("div:parent")
11、在每个div中查找第一个p：$("div p:first-child")
12、在每个div中查找最后一个p：$("div p:last-child")
13、在每个div中查找第二个p：$("div p:nth-child(2)")
14、匹配所有的不可见元素：$("div:hidden")
15、匹配所有的可见元素：$("div:visible")

当然，强大的JQuery当然不止有这些选择器，还有很多更高级的，有需要的朋友可以看一下JQuery的API文档，上面有更多更详细的说明。

css基础选择器

上一篇：38个CSS资源升级你的CSS技能
下一篇：通用日期选择器的设置方法

强大的JQuery选择器!

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

MYSQL经典面试题汇总

oracle常见问题处理

医院信息系统突发应急演练记录

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

苹果停止更新Windows版QuickTime!

Navicat Data Modeler使用教程十二:配置