jQuery 过滤器(上)

心已赠人 2022-09-19 12:16 145阅读 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">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").css("background", "red"); //过滤第一个
                $("input[type=button]:first").css("background", "red"); //与普通选择器配合使用
                $("li:last").css("background", "red"); //过滤最后一个
                $("ul:first li:last").css("background", "#ccc"); //第一个ul的最后一个
                $("li:not(.test)").css("background", "#ccc"); //除过class位test的所有li
                $("li:even").css("background", "#ccc"); //偶数
                $("li:odd").css("background", "white"); //基数
                $("li:eq(0)").css("background", "red"); //获取元素 从上往下从0开始从下往上从-1开始
                $("li:gt(5)").css("background", "red"); //取索引大于5的  lt 小于
                $(":header").css("background", "red"); //h1-h6
                $("input[type=text]").focus();
                $(":focus").css("background", "red"); //得到焦点
                //最常用的过滤器 专用方法
                $("li").first();
                $("li").last();
                $("li").not(".test");
                $("li").eq(2);
                //内容过滤器
                $("li:contains('test1')").css("background", "green"); //包含某段文本的li、
                //:empty  空标签 :parent  有子元素的
                $("ul:has('.test')").css("background", "green"); //包含class为test的元素的ul
                $("li").parent().css("background", "green"); //父节点
                $("li").parents().css("background", "green"); //父节点及祖先节点
                $("li").parentsUntil("body").css("background", "red"); //父节点直到body
                $("div:hidden").size();//隐藏
                $("div:visible").size();//显示
    
            });