过滤方法:基于其在一组元素中的位置来选择一个特定的元素。

    first() 方法,last() 方法,eq() 方法,filter() 方法,not() 方法

<!DOCTYPE html>
<html>
<head>
<  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
< >My Test JQuery</ >
    <  type="text/ " src="./js/jquery-1.10.2.min.js"></ >
    <  type="text/ " >    
        $(function(){ 
            //first() 方法返回被选元素的首个元素。
            //last() 方法返回被选元素的最后一个元素。
            //eq() 方法返回被选元素中带有指定索引号的元素。
            //filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
            //not() 方法返回不匹配标准的所有元素。
            $("#btn_first").click(function(){
                $("#myDiv1 div").first().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_last").click(function(){
                $("#myDiv1 div").last().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_eq").click(function(){
                $("#myDiv1 div").eq(2).css({"color":"red","border":"3px solid red"});
            });
            $("#btn_filter").click(function(){
                $("#myDiv1 *").filter("h5").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_not").click(function(){
                $("#myDiv1 *").not("h5").css({"color":"red","border":"3px solid red"});
            });
        });
    </ >
</head>
<body>
    <button type="button" id="btn_first">first</button>
    <button type="button" id="btn_last">last</button>
    <button type="button" id="btn_eq">eq</button>
    <button type="button" id="btn_filter">filter</button>
    <button type="button" id="btn_not">not</button>
    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <h5>Hello</h5>
        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

\"\" \"\" \"\"

\"\" \"\" \"\"

 

收藏 打印