当前位置:首页 > jquery

jquery基本选择器

2026-03-16 18:18:43jquery

jQuery 基本选择器

jQuery 提供了多种基本选择器,用于快速定位和操作 DOM 元素。以下是常用的基本选择器及其用法:

ID 选择器

通过元素的 id 属性选择单个元素,语法为 $("#id")。例如:

$("#header").css("color", "red");

选择 idheader 的元素并设置其文字颜色为红色。

类选择器

通过元素的 class 属性选择一组元素,语法为 $(".class")。例如:

$(".menu-item").hide();

选择所有 classmenu-item 的元素并隐藏它们。

元素选择器

通过标签名选择元素,语法为 $("tag")。例如:

$("p").addClass("highlight");

选择所有 <p> 元素并为它们添加 highlight 类。

通配符选择器

选择所有元素,语法为 $("*")。例如:

$("*").css("margin", "0");

将所有元素的 margin 设置为 0。

多选选择器

同时选择多个不同类型的元素,语法为 $("selector1, selector2, selectorN")。例如:

$("h1, h2, h3").css("font-weight", "bold");

选择所有 <h1><h2><h3> 元素并设置它们的字体加粗。

属性选择器

通过元素的属性选择元素,语法为 $("[attribute]")。例如:

$("[href]").css("text-decoration", "none");

选择所有带有 href 属性的元素并移除它们的下划线。

子元素选择器

选择某个元素的直接子元素,语法为 $("parent > child")。例如:

$("ul > li").css("list-style", "none");

选择所有 <ul> 的直接子元素 <li> 并移除它们的列表样式。

后代选择器

选择某个元素的所有后代元素,语法为 $("ancestor descendant")。例如:

$("div p").css("color", "blue");

选择所有 <div> 内部的 <p> 元素并设置它们的文字颜色为蓝色。

第一个和最后一个子元素选择器

选择某个元素的第一个或最后一个子元素,语法为 $("selector:first")$("selector:last")。例如:

$("li:first").css("font-size", "20px");
$("li:last").css("font-size", "20px");

选择第一个和最后一个 <li> 元素并设置它们的字体大小。

奇数/偶数选择器

选择奇数或偶数位置的元素,语法为 $("selector:odd")$("selector:even")。例如:

$("tr:odd").css("background-color", "#f2f2f2");

选择表格中奇数行的 <tr> 元素并设置它们的背景颜色。

索引选择器

选择某个索引位置的元素,语法为 $("selector:eq(index)")。例如:

$("li:eq(2)").css("color", "green");

选择第三个 <li> 元素(索引从 0 开始)并设置其文字颜色为绿色。

jquery基本选择器

这些基本选择器可以组合使用,以满足更复杂的 DOM 操作需求。

标签: 基本选择器
分享给朋友:

相关文章

js实现选择器

js实现选择器

实现基础选择器 使用 document.querySelector 或 document.querySelectorAll 实现类似 CSS 的选择器功能。前者返回第一个匹配元素,后者返回所有匹配的…

jquery的选择器

jquery的选择器

jQuery 选择器基本语法 jQuery 选择器基于 CSS 选择器语法扩展,用于快速定位 DOM 元素。基本语法为 $("selector") 或 jQuery("selector"),返回匹配元…

jquery属性选择器

jquery属性选择器

jQuery 属性选择器概述 jQuery 属性选择器允许通过 HTML 元素的属性或属性值进行筛选和操作。这些选择器基于 CSS 属性选择器的语法扩展,支持更灵活的匹配方式。 常用属性选择器语法…

jquery过滤选择器

jquery过滤选择器

jQuery 过滤选择器 jQuery 提供了一系列过滤选择器,用于从匹配的元素集合中筛选出符合条件的子集。这些选择器通常基于元素的位置、状态或内容进行过滤。 基本过滤选择器 :first 选择匹配…

jquery选择器有几种

jquery选择器有几种

jQuery选择器类型 jQuery选择器允许开发者通过多种方式选取DOM元素,主要分为以下几类: 基本选择器 $("#id"):通过元素的id属性选取,如$("#header")。 $(…

jquery选择器name

jquery选择器name

jQuery 选择器通过 name 属性选取元素 在 jQuery 中,可以通过元素的 name 属性来选取 DOM 元素。以下是几种常用的方法: 使用属性选择器 通过 [name="value"]…