jQuery 过滤器(上)

<input type="text" onfocus="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();//显示

        });



你可能感兴趣的