jQuery 过滤器(下)

小灰灰 2022-09-19 12:16 166阅读 0赞

<input type="text" οnfοcus="aa()"/>
    <input type="image"  value="test" />
    <input type="button" value="click"/>
    <input type="button" value="click"/>
     <ul>
        <li>test</li>
        <li class="test" title="aa">test1</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
     </ul>
    
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
     </ul>
     <h3>title</h3>

$(function () {
                $("li:first-child").css("background", "#ccc"); //每个父元素第一个子元素
                $("li:last-child").css("background", "#ccc"); //每个父元素最后个子元素
                $("li:only-child").css("background", "#ccc"); //获取只有一个子元素的
                $("li:nth-child(even)").css("background", "red"); //从1开始 odd为基数
                $("li:nth-child(2)").css("background", "orange"); //可以指定一个
                $("li:nth-child(3n)").css("background", "green"); //以倍数显示
                $(".test").is("li"); //判断某个元素是不是li 返回bool
                $(".test").is(function () {  //可以直接写一个函数
                    return $(this).attr("id") == 't1';
                });
                $("ul:first li").slice(5, 7).css("background", "blue"); //从第六个位置选到第八个位置
                $("li").filter(".test").css("background", "black"); //普通过滤
                $("li").filter(".test,:first,:last-child").css("background", "black");
                $("li").filter(function () {//也可以直接写成function 更加灵活
                    return $(this).attr("class") == 'test' && $(this).attr("title") == "aa";
                }).css("color", "white");
            });