强大的JQuery选择器!

jQuery
483
0
0
2022-09-01

强大的JQuery选择器!

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文档,上面有更多更详细的说明。