jQuery的选择器有什么-优快云博客

本文链接：https://blog.youkuaiyun.com/yzkdcsdn/article/details/121363378

本文详细介绍了jQuery的各种选择器和筛选器的用法，包括基础选择器（id、标签、类、通配符）、层级选择器（后代、子代、毗邻、兄弟）、过滤选择器（第一、最后、奇偶、索引）以及属性选择器。同时，讲解了如何通过筛选器进行元素的精确选取，如获取指定索引、父元素、子元素和兄弟元素等。此外，还讨论了jQuery中用于查找和筛选元素的各种方法，如`eq()`、`first()`、`last()`、`siblings()`和`find()`等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的选择器有什么

基础选择器

id 选择器$('#brother').css('color','red');
标签选择器：$('a').css({'color':'green','font-size':'24px'});
类选择器：$('.li3').css('background','yellow');
通配符选择器:console.log($('')); $('').html(''); // 清空整个界面的 dom 元素

层级选择器

后代选择器：$('#box p').css('color','red');
子代选择器：$('#box>p').css('color','green');
毗邻选择器，匹配所有的紧接着选中元素的兄弟：$('#father+p').css('font-size','30px');
兄弟选择器 $('#father~p').css('background','gray');

过滤选择器

获取第一个 $('li:first').css('background','gray');
获取最后一个 $('li:last').css('background','yellow');
获取奇数 $('li:odd').css('color','red');
获取偶数 $('li:even').css('color','green');
选中索引值为 1 $('li:eq(1)').css('font-size','32px');
大于索引值 1 $('li:gt(1)').css('font-size','60px');
小于索引值 1 $('li:lt(1)').css('font-size','10px');

属性选择器

1.$('li[class=what]').css('font-size','30px');
2.$('li[class!=what]').css('font-size','50px'); 
3.$('input[name^=username]').css('background','gray'); 
4.$('input[name$=222]').css('background','green'); 
5.$('button[class*=danger]').css('background','orange');

解释：

标签名【属性名】，查找所有含有 id 属性的该标签名的元素
匹配给定的属性是 what 值【attr=value】匹配给定的属性是某个特定
值的元素
没有 class 也会发生变化，[attr!=value]匹配所有不包含有特定的属
性，或者属性不等于特定值的元素
匹配给定的属性是以某些值开始的元素 ^
匹配给定的属性是以某些值结尾的元素 $
匹配给定的属性是以包含某些值的元素 *

筛选选择器

1.$('span').eq(1).css('color','red'); o $('span').first().css('font-size','28px'); 
2.$('span').last().css('color','greenyellow'); console.log($('span').parent());
3.$('span').parent('.p1').css({'width':'300px',height:'400px','backgro und':'red'});
4.$('.list').siblings('li').css('color','red'); o 
5.$('div').find('button').css('background','gray');

解释：

获取第 n 个元素数值从 0 开始 .eq()
获取第一个元素 .first()
获取最后一个元素 .last()
获取父元素 .parent()
选择所有的兄弟元素 .siblings（）
查找所有的后代元素 .find()

jQuery 的筛选器的分类

o 过滤筛选器如：$("li").eq(2) $("li").first() $("ul li").hasclass("test")

o 查找筛选器如：查找子标签：

$("div").children(".test")
$("div").find(".test")

o 向下查找兄弟标签：

$(".test").next() $(".test").nextAll()
$(".test").nextUntil()

o 向上查找兄弟标签：

$("div").prev() $("div").prevAll()
$("div").prevUntil()

o 查找所有兄弟标签： $("div").siblings()

o 查找父标签：

$(".test").parent() $(".test").parents()
$(".test").parentUntil()