04_jQuery_基础过滤

    <input type="button" id="run" value="run"/>
    <div></div>
    <div id="mover"></div>
    <div></div>
    

$(function(){    //文档加载完成之后
            $("#run").click(function(){        //按钮的点击事件
                $("div:animated").toggleClass("colored");//$("div:animated")找到正在执行动画的div，toggleClass()对设置或者移除的被选元素的一个或多个类进行切换
            });
            function animatedIt(){
                $("#mover").slideToggle("slow",animatedIt);//slideToggle通过滑动来切换元素的可见状态，slideToggle("slow(600毫秒的时间)",animatedIt)
            }
            animatedIt();//调用函数
        });

div{
        width:100px;
        height:100px;
        background-color:yellow;
        float:left;
        border:solid 1px #aaaaaa;
        margin:0 5px;
    }
    .colored{
        background-color:green;
    }

<div id="content">
        <input type="text" tabindex="1">
　　　　　　<!--tabindex控制tab键控制次序，（当tab用于导航时）--><input type="text" tabindex="2">
        <select tabindex="3">
            <option>select0 menu</option>
            <option>select1 menu</option>
            <option>select2 menu</option>
        </select>
        <div tabindex="4">
             a div
        </div>
    </div>

$(function(){
        $("#content").delegate("*","focus blur",function(event){//delegate("所有元素"，"事件是获得焦点"，)给指定的元素添加一个或者多个事件
            var e=$(this);//存储当前指向的对象
            setTimeout(function(){
                e.toggleClass("focused",e.is(":focus"));//e.is(":focus")获取焦点的时候
            },0);
        })
    });

.focused{
        background-color:#abcdef;
    }

　　<table border="1"><!--border="1"表格边框的宽度-->
        <tr>
            <td>#9</td>
            <td>#8</td>
            <td>#7</td>
        </tr>
        <tr>
            <td>#6</td>
            <td>#5</td>
            <td>#4</td>
        </tr>
        <tr>
            <td>#3</td>
            <td>#2</td>
            <td>#1</td>
        </tr>
    </table>

$(function(){
                $("td:lt(4)").css("color","red");
            })