jQuery选择器

Posted 2022-12-29

什么是jQuery选择器？

    能够选择使用网页上的元素，跟css选择器类似

jQuery选择器的优势

    1.相比于javascript节点获取元素，更容易控制元素

    2.内部添加了特有的选择器。如奇数选择器，偶数选择器

    3.更简单，更容易理解

基本选择器

    标签    id    类

    并集选择器    $("h1,p,li")

    全局选择器    $("*")

层次选择器

    后代选择器    $("ui li")

    子代选择器    $("ui>li")

    相邻兄弟选择器    $("ui+p") 选择ul后面的第一个兄弟元素p

    通用兄弟选择器    $("ui~p") 选择ul后面所有兄弟元素p

伪类选择器

    选择第一个元素    $("li:first-of-type")

    选择最后一个元素  $("li:last-of-type")

    选择第几个元素    $("li:nth-of-type(1)")

属性选择器

    选择具有id属性的元素    $("a[id]")

    选择具有id属性并且为d1的元素    $("a[id=d1]")

    选择具有id属性并且为d1开头的元素  $("a[id~=d1]")

    选择具有id属性并且为d1结尾的元素  $("a[id$=d1]")

    选择具有id属性并且值包含d1的元素  $("a[id*=d1]")

    选择具有id属性并且值不等于d1的元素    $("a[id!=d1]")

过滤选择器

    选择第一个元素  $("li:first")

    选择最后一个元素  $("li:last")

    除了选择器以外的所有元素    $("li:not(li:firsrt)")

    选择第几个元素(根据下标查找)  $("li:eq(2)")

    选择偶数下标  $("li:even")

    选择奇数下标  $("li:odd")

    选择大于下标的元素    $("li:gt(2)")

    选择小于下标的元素    $("li:gt(2)")

    选择标题元素  $(":header")

    选择获取焦点元素  $(":foucs")

    选择动画元素  $(":animated")

可见性过滤选择器

    选择所有隐藏的元素    $("ul>li:visible")

    选择所有显示的元素    $("ul>li:hidden")

特殊符号的转义

    如果选择器中有特殊符号，需要用反斜杠进行转义    \\\\

     例如：<p id="p1#a"></p>

    $("#p1\\\\#a")    加反斜杠进行符号转义