jquery基本选择器
jQuery 基本选择器
jQuery 提供了多种基本选择器,用于快速定位和操作 DOM 元素。以下是常用的基本选择器及其用法:
ID 选择器
通过元素的 id 属性选择单个元素,语法为 $("#id")。例如:
$("#header").css("color", "red");
选择 id 为 header 的元素并设置其文字颜色为红色。
类选择器
通过元素的 class 属性选择一组元素,语法为 $(".class")。例如:
$(".menu-item").hide();
选择所有 class 为 menu-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 开始)并设置其文字颜色为绿色。

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






