jQuery选择器

最新推荐文章于 2024-01-23 10:52:48 发布

@Daling

最新推荐文章于 2024-01-23 10:52:48 发布

阅读量224

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_57727548/article/details/116985332

版权

jQuery选择器

一、jQuery基本选择器

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发的一个重点。

jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

jQuery支持主流的CSS1~CSS3选择器的写法，我们从最简单的也是最常用的说起：

1.1ID选择器$(“#id”);

ID选择器也是基本的选择器，jQuery内部使用JavaScript函数document。getelementById()来处理ID的获取。

原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果采用ID的话尽然考虑这个选择器

注意：ID是唯一的，每个ID值在一个页面中只能使用一次。如果多个元素分配了相同的ID，将只匹配ID选择集合的第一个DOM元素。但这种行为不应该发生；有超过一个元素的页面使用相同的ID是无效的

1.2class选择器 $(“.classname”);

类选择器，相对ID选择器来说，效率相对会低一点，，但是优势就是可以多选

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生GetElementClassName()函数来实现的

1.3 element元素选择器$（“标签名称”）；

元素选择器，根据给定HTML标记名称选择所有的元素

搜索指定元素标签名的所有节点，这个是一个集合的操作。同样的也有原生方法getElementsByTagName（）函数支持

1.4全选择器 $（“*”）

全选择器，也是*选择器

在CSS中，经常会在第一行写下这样一段样式* {padding: 0; margin: 0;}

通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素

1.5层级选择器

文档中所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系子元素，后代元素，兄弟元素相邻元素

通过一个列表，对比层级选择器的区别

选择器	描述
$("ancestor descendant")	后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能该元素的一个孩子，孙子，曾孙等
$("parent > child")	子选择器：parent的直接子元素
$("prev + next")	相邻兄弟选择器：匹配所有紧接在prev元素后的next元素
$("prev ~ siblings")	一般兄弟选择器：匹配prev元素之后的所有sibkings元素