JQuery选择器

最新推荐文章于 2025-05-30 08:05:08 发布

沫栀丶

最新推荐文章于 2025-05-30 08:05:08 发布

阅读量127

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44578685/article/details/90635335

版权

开发工具与关键技术：MVC JQuery
作者：郑健鹏
撰写时间：2019.05.28

很多时候我们不能直接通过基本选择器与层级选择器来找到我们所需要的元素，所以在今天我们来学习JQuery插件提供的筛选选择器，筛选选择器可以更快捷的找到我们所需要的元素，筛选选择器有很多都不是css的规范，而是JQuery为了开发者的便利从而延展出来的选择器，筛选选择器的用法与css中的伪元素很相似，选择器都是用英文状态下的冒号开头“:“。
为什么要选择JQuery选择器呢？因为可以让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

<li id="HTML">HTML</li>
<li class="blueColor">CSS</li>
<li>Javascript</li>
<li>jQuery</li>

$(":first") 获取匹配第一个元素      例如:$('li:first');
$(":last") 获取匹配的最后个元素    例如:$('li:last');
$(":not(selector)")去除所有与给定选择器匹配的元素 例如:$("input:not(:checked)")
$(":even")  匹配所有索引值为偶数的元素，从 0 开始计数 例如:$("li:even")
$(":odd")  匹配所有索引值为奇数的元素，从 0 开始计数 例如:$("li:odd")
$(":eq(index)")  匹配一个给定索引值的元素，从 0 开始计数 例如:$("li:eq(1)")
$(":gt(index)")  匹配所有大于给定索引值的元素，从 0 开始计数 例如:$("li:gt(0)")
$(":lt(index)")  匹配所有小于给定索引值的元素，从 0 开始计数 例如:$("li:gt(2)")
$(":header")匹配如 h1, h2, h3之类的标题元素
例如:$(":header").css("background", "#EEE");
$(":animated")匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)    
例如:$(":header").css("background", "#EEE");
$(":focus")  匹配当前获取焦点的元素。
$(":root")  选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素   
示例:设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");
以下是一些基本的普通选择器，使用方法相对于筛选选择器来说比较麻烦。
id选择器：用来查找ID，即元素上的id属性
$(“#HTML”)
id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。
类选择器：通过元素上的class类名来获取该元素
	$(“#blueColor”)
	类选择器相对ID选择器来说，相率相对会低一点，但类选择器可以多选，而ID选择器则是不能重复，因为ID只能有一个。
元素选择器：根据给定（html）标记名称选择所有的元素
	$(“li”)
	搜索指定元素标签名的所有节点，如果把获取到的元素通过控制台输出，则会输出一个合集，和原生JS代码中的getElementsByTagName()一样。
	所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了，选择器中的层级选择器就是用来处理这种关系子元素 后代元素 兄弟元素 相邻元素 通过一个列表，对比层级选择器的区别。
$("ancestor descendant")
后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙等
$("parent > child")
子选择器：parent的直接子元素，直接指定的子元素
$("prev + next")
相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元素
$("prev ~ siblings")
一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素