当前位置:首页 > 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 操作需求。

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

相关文章

jquery元素选择器

jquery元素选择器

jQuery 元素选择器 jQuery 提供了多种选择器来选取 DOM 元素,以下是常见的几种方法: 基本选择器 $("tagName"):选取所有指定标签的元素,如 $("div") 选取所有…

jquery属性选择器

jquery属性选择器

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

jquery标签选择器

jquery标签选择器

jQuery 标签选择器 jQuery 标签选择器用于直接选取 HTML 元素,通过标签名(如 div、p、a 等)匹配 DOM 元素。语法简单高效,适合快速操作特定类型的元素。 语法格式 $("…

jquery兄弟选择器

jquery兄弟选择器

jQuery 兄弟选择器 jQuery 提供了多种选择器用于选取兄弟元素(即与当前元素同级的其他元素)。以下是常见的兄弟选择器及其用法: 相邻兄弟选择器(+) 选取紧接在指定元素后的第一个兄弟元素:…

jquery选择器name

jquery选择器name

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

uniapp日历选择器

uniapp日历选择器

uniapp日历选择器实现方法 使用uni-calendar插件 uni-calendar是uniapp官方推荐的日历组件,支持单选、多选、范围选择等功能。安装后可直接在页面中使用。 <tem…