jQuery选择器

最新推荐文章于 2022-12-29 11:48:03 发布

心树.

最新推荐文章于 2022-12-29 11:48:03 发布

阅读量121

点赞数

文章标签： jquery css3 前端

本文链接：https://blog.csdn.net/qq_60213361/article/details/121205232

版权

通过CSS选择器选取元素：
    基本选择器：
        标签选择器   $("h1")

$("h1").css("background","yellow");

        类选择器     $(".class")

$(".h2").css("background","pink");

        id选择器     $("#id")

$("#h3").css("background","green");

        全局选择器    $("*")

$("*").css("background","pink");

        并集选择器    $("h1,.class,#id,span")

$("h1,.h2,#h3").css("background","pink");

    层次选择器：
        后代选择器：  $("ul li")

$("ul li").css("background","pink");

        子类选择器：  $("ul>li")

$("ul>li").css("background","pink");

        相邻选择器：  $("h3+p")

$(".js+li").css("background","pink");//相邻是拿后面的标签而不是前面的

        同辈选择器：  $("h3~p")

$(".js~li").css("background","pink");

        所有兄弟选择器：    .siblings               除了自己，全部渲染

$(".js").siblings().css("background","pink");

    属性选择器：
        包含某属性   $("a[href]")

$("a[href]").css("background","pink");

        包含某属性并且属性值等于绝对值     $("a[href='abc']")

$("a[href='abc']").css("background","blue");

        包含某属性并且属性值不等于绝对值    $("a[href!='abc']")

$("a[href!='abc']").css("background","pink");

        属性值以XXX开头       $("a[href^='xxx']")

$("a[href^='www']").css("background","pink");

        属性值以XXX结尾       $("a[href$='xxx']")

$("a[href$='html']").css("background","pink");

        包含某属性的绝对值       $("a[href*='abc']")

$("a[href*='a']").css("background","pink")

通过过滤选择器选取元素：
    基本过滤选择器：
        根据索引选择指定的元素：    $("ul:eq(2)")

eq根据小标选取元素从0开始

$("li:eq(1)").css("background","blue")

        大于某索引的元素：   $("li:gt(3)")

$("li:gt(1)").css("background","blue");

        小于某索引的元素：    $("li:lt(3)")

$("li:lt(index)").css("background","blue");

        第一个元素：  $("ul:first")

$("li:first").css("background","blue");

        最后一个元素： $("ul:last")

$("li:last").css("background","blue");

        获得焦点的元素：    $(":focus")

$("input:text").focus();

        正在执行的动画元素：  $(":animated")
        所有的标题元素：    $(":header")

$(":header").css("background","blue");

        所有的奇数元素：    $("li:odd")

$("li:odd").css("background","pink");

        所有的偶数元素：    $("li:even")

$("li:even").css("background","pink");

        不包含执行元素     $("li:not(.aaa)")

$("li:not(li:eq(1))").css("background","pink");

    可见性过滤选择器：
        获取所有不可见的元素：     $(":hidden")
        获取所有可见的元素：      $(":visible")

关注