jQuery选择器,

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 129 阅读

CC 4.0 BY-SA版权

文章标签：

本文深入解析了jQuery中各种选择器的使用方法，包括基本的选择器如标签名、ID名、class名选择，以及复杂的组合选择器、后代选择器、子代选择器等。同时，还详细介绍了属性选择器的用法，帮助读者更灵活地操作DOM元素。

$("div") 根据标签名选择
$("#div0") 根据id名选择
$(".div0") 根据class名选择
$("div,li") 群组选择器
$("div li") = $("div").find(".li") 后代选择器
$("div>li") = $("div").children("li")子代选择器
$("#div0+") = $("#div0+*") = $("#div0").next() id为div0之后的一个兄弟子元素（可以是任意的）
$("#div0+li") = $("#div0").next("li") id为div0之后的一个兄弟子元素（li）
$("#div0~") = $("#div0~*") = $("#div0").nextAll() id为div0之后的所有兄弟元素（可以是任意的）
$("#div0~li") = $("#div0").nextAll("li") id为div0之后的所有兄弟元素（li）
$("#div0").prev("li") id为div0之前的一个兄弟元素（li）
$("#div0").prevAll("li")id为div0之前的所有兄弟元素（li）
$("#div0").nextUntil("span") 从id为div0向后到span的兄弟元素
$("#div0").prevUntil("span") 从id为div0向前到span的兄弟元素
$("#div0").siblings("span") id为div0的所有不是span的兄弟元素

属性选择器

$("[type]")选择有type属性的元素
$("[type][name]") 选择有type和name属性的元素
$("[hobby^=a]")选择属性是hobby并且值是以a字母开始的元素
$("[hobby$=e]")选择属性是hobby并且值是以e字母结束的元素
$("div[hobby!=ade]")选择属性是hobby但是值不等于ade的所有元素，如果属性没有也会被选中
$("[toggle|=book]")选择属性是toggle，并且这个属性的值是book起头，后面紧跟-的值
$("[class~=div3]")选择属性是class，属性值中包含div3或者等于div3.包含div3在这里是指div3是一个独立的单词，前后有空格隔开
$("[class*=div3]")选择属性是class，属性值的字符串中含有div3字符的，可以不是一个独立的单词