jquery 定位

jQuery 定位元素方法

jQuery 提供了多种方法来定位 DOM 元素，主要通过选择器或遍历方法实现。以下是一些核心方法：

通过选择器定位

$("selector") // 基础选择器（ID、类、标签等）
$("#id")      // ID 选择器
$(".class")   // 类选择器
$("div")      // 标签选择器

层次选择器

$("parent > child")  // 直接子元素
$("ancestor descendant") // 后代元素
$("prev + next")     // 相邻兄弟
$("prev ~ siblings") // 后续所有兄弟

属性选择器

$("[attribute]")        // 包含属性
$("[attribute=value]")  // 属性等于值
$("[attribute^=value]") // 属性以值开头

遍历定位方法

父级/祖先元素

.parent()       // 直接父元素
.parents()      // 所有祖先元素
.closest()      // 最近的匹配祖先

子代/后代元素

.children()     // 直接子元素
.find()         // 所有后代元素

兄弟元素

.siblings()     // 所有兄弟元素
.next()        // 下一个兄弟
.prev()        // 上一个兄弟

过滤方法

基础过滤

.first()        // 第一个元素
.last()         // 最后一个元素
.eq(index)      // 指定索引元素

内容过滤

.filter("selector") // 匹配选择器的元素
.not("selector")    // 不匹配选择器的元素
.has("selector")    // 包含特定后代的元素

示例代码

定位表格中的奇数行

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

查找表单中的禁用输入项

$("form").find("input:disabled").val("Disabled");

导航菜单高亮当前项

$(".nav-item").click(function() {
  $(this).addClass("active").siblings().removeClass("active");
});