[分享]揭秘jQuery取对象技巧：轻松驾驭前端开发，让代码更简洁高效

$(document).ready(function(){ $("div").css("background-color", "yellow");
});

1.2 标签选择器

标签选择器与元素选择器类似，只是直接使用标签名。例如，选取所有

元素：

$(document).ready(function(){ $("p").css("color", "red");
});

1.3 类选择器

类选择器用于选取具有特定类的元素。例如，选取所有类名为 .my-class 的元素：

$(document).ready(function(){ $(".my-class").css("font-size", "20px");
});

1.4 ID 选择器

ID 选择器用于选取具有特定 ID 的元素。例如，选取 ID 为 my-id 的元素：

$(document).ready(function(){ $("#my-id").css("text-align", "center");
});

二、层次选择器

2.1 子选择器

子选择器用于选取父元素中直接嵌套的子元素。例如，选取

元素中直接嵌套的

元素：

$(document).ready(function(){ $("div p").css("color", "blue");
});

2.2 后代选择器

后代选择器用于选取所有后代元素。例如，选取

元素的所有

元素：

$(document).ready(function(){ "div p".css("color", "green");
});

2.3 相邻兄弟选择器

相邻兄弟选择器用于选取紧接在指定元素后的兄弟元素。例如，选取

元素后面的 元素：

$(document).ready(function(){ "div + span".css("color", "orange");
});

三、属性选择器

属性选择器用于选取具有特定属性的元素。例如，选取所有具有 data-id 属性的元素：

$(document).ready(function(){ $('[data-id]').css("border", "1px solid red");
});

四、伪类选择器

伪类选择器用于选取具有特定状态的元素。例如，选取所有悬停状态下的 元素：

$(document).ready(function(){ "a:hover".css("background-color", "yellow");
});

五、总结

通过以上介绍，相信你已经掌握了 jQuery 中常用的取对象技巧。在实际开发中，灵活运用这些技巧，可以帮助你轻松驾驭前端开发，让代码更简洁高效。

收藏 分享

社交分享

×

扫一扫分享

QQ分享微博分享

关闭