jquery的选择器和过滤器

一.选择器

1.基本选择器
html标签

<div a="1" b="ab">1</div>
    <div class="div1" b="ac">2
    <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <span a="5" b="3"></span>
    <div a="2" b="cd ab">3</div>
    <div a="3" class="div2" b="ab-c">4</div>
    <div a="12" b="a-b-c">5</div>

选择器

$("div");//标签名选择器
$("#div1");//id选择器
$(".div0");//class选择器
$("*");//通配符选择器
$("div .div1");//后代选择器
$("div>.div1");//子代选择器
$(".div1+div");//下一个兄弟选择器 ,如果下面第一个不是div,获取不到
$(".div1~div");//下面所有的兄弟选择器,只能获取到div

$("div.div1");//中类名是div1的元素   返回的是div1
$(".div1>*");  //类名是ddiv中类名是div1的div, 返回的是div
$("div .div1");//div后代iv1所有的子元素   返回的是div的所有div1后代元素
console.log($(".div1>*").length);//div1子元素的数量
onsolce.log($(".div1>").length);//div1子元素的数量
$(".div1+*")//div1下一个任意兄弟元素,即使不是div也可以获取到
console.log($(".div1+"))

2.选择器方法

$(".div1").next();//$(".div1+");
$(".div1").nextAll();//$(".div1~");
$(".div1").nextUntil(".div2").css("color","red");//div1到div2之间的兄弟元素  元素类型无要求

$(".div1").prev();//向上的一个兄弟元素
$(".div1").prevAll();//向上的所有兄弟元素
$(".div1").prevUntil(".div2");//向上到div2直接兄弟元素

$(".div1").find("span");//$(".div1 span");
$(".div1").children();//$(".div>");

3.属性选择器放在[]中,特殊判断字符放在=的左边

console.log($("div[a]"));//[a] 表示是否具备标签属性a  的div
console.log($("[a]"));//[a] 表示是否具备标签属性a 所有的元素
console.log($("[a=1]"));//标签必须有a属性，并且属性值是1
console.log($("[a^=1]"));//属性值的开头是1的元素
$("[b|=ab]").css("color", "red");//属性b的值是ab或者以ab起头后面使用—来连接的
$("[b~=ab]").css("color", "red");//属性b的值是ab或者值是以空格区分，并且包含ab的
$("[b$=b]"); b的值以b结尾
$("[b!=ab]"); b的值不是ab的
$("[b*=c]"); b的值中包含有c这个字符的
$("[a][b]");//有a属性和b属性的元素  全有才符合条件

二.过滤器

html标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        div{
            animation: boxMove 2s;
        }
        @keyframes boxMove {
            0%{
                left:0;
            }
            50%{
                left:100px;
            }
            100%{
                left:0;
            }
        }
    </style> -->
    <style>
        .div4
        {
            /* display: none; */
            visibility: hidden;
        }
    </style>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul>
        <span>10</span>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul>
    <ul>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
    </ul>
    <div>1</div>
    <div></div>
    <div><span></span></div>
    <div>3</div>
    <div class="div1">
        <div></div>
        <div class="div2">1</div>
        <div class="div2"></div>
        <div></div>
    </div>
    <div class="div1">
        <div></div>
        <div class="div3"></div>
        <div class="div3"></div>
        <div></div>
    </div>
    <div class="div4">1</div>

</body>
</html>

过滤器

一般过滤器

$("li:first").css("color","red")  //第一组的第一个li
$("li:first-child").css("color","red");  //每组的第一个元素,如果不是li,则此组跳过   
$("li:first-of-type").css("color","red");  //每组类型的第一个   按照类型查找
$("li:last")
$("li:last-child")
$("li:last-of-type")

$("ul>:not(li)")  //ul所有子元素中不是li元素的
$("li:even").css("color","red");   //偶数项  列表是从0开始计数   按照类型查找
$("li:odd").css("color","red");   //奇数项

$("li:nth-child(2)").css("color","red");  //每组的第二个 ,别的类型的元素也计算在内
$("li:nth-of-type(2)").css("color","red"); //类型查找   每组的第二个
$("li:nth-child(even)").css("color","red"); //偶数，列表是从1开始计数
$("li:nth-of-type(even)").css("color","red"); //偶数，列表是从1开始计数
$("li:nth-child(odd)").css("color","red"); //奇数，列表是从1开始计数
$("li:nth-of-type(odd)").css("color","red"); //奇数，列表是从1开始计数

$("li:nth-child(2n)");//偶数
$("li:nth-child(2n-1)")//奇数

特殊过滤器

$("li:eq(2)").css("color","red");   /从0开始计算,第一组的第二个   类型查找
$("li:gt(2)").css("color","red");//列表中下标大于2的所有元素   类型查找 但是是获取后的总列表
$("li:lt(2)").css("color","red");//列表中下标小于2的所有元素

$(":header");//所有h1-h6的元素
$(":animated");//所有使用aniamte动画的元素
$(":focus"); //聚焦元素
$(":empty");//没有内容或者子元素的元素
$(".div1:has(.div2)")  //含有div2的内容的div1
$(".div1:parent")   //判断有子元素的或者有内容的div1

console.log($(".div2").parent());//获取div2的父元素
console.log($(".div2").parents());//获取div2的所有父元素
console.log($(".div2").parentsUntil("html"));//获取div2的所有父元素中到什么之前的
$(".div1:contains(1)")   //内容为1的div1

$(".div4:hidden")   //隐藏元素，针对display:none或者是不显示的元素
$(":visible")    //显示元素
$(":only-child") 只有一个子元素的元素

console.log($("div").is(".div1"))//这个方法得到一个布尔值，是否在div中有类名是div1的元素    不仅可以判断className,还可以判断id,name等
console.log($("div").is("[a]"))
console.log($("div").hasClass("div1"));//这个方法得到一个布尔值，是否在div中类名是div1的元素  只能来判断className

console.log($("li").slice(2,4));//div列表中选择第2个到第4个之间的元素

$(":input")  //获取input
$(":text");//type=text的input
$(":password");//获取有password属性的input

$(":disabled");//不可用
$(":enabled");//可用
$(":checked");//用于input中checkbox和radio
$(":selected");//用于下拉菜单的元素

jquery的选择器和过滤器

jquery的选择器和过滤器

一.选择器

二.过滤器

过滤器

推荐阅读