jQuery的過濾選擇器

openkk 12年前發布 | 29K 次閱讀 jQuery Ajax框架

在jQuery中,有一種非常好用的選擇器,名為jQuery過濾選擇器,這種選擇器可以根據很多需要進行選擇,下面我 們來舉例說明jQuery的過濾選擇器的用法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>過濾選擇器</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">
    $(function(){//選擇第一個div
        $("#button1").click(function(){
            $("div:first").css("background","red");
        })
    })

    $(function(){//選擇最后一個div
        $("#button2").click(function(){
            $("div:last").css("background","blue");
        })
    })

    $(function(){//選擇索引為偶數的div
        $("#button3").click(function(){
            $("div:even").css("background","green");
        })
    })

    $(function(){//選擇索引為奇數的div
        $("#button4").click(function(){
            $("div:odd").css("background","orange");
        })
    })

    $(function(){//選擇索引為3的div
        $("#button5").click(function(){
            $("div:eq(3)").css("background","orange");
        })
    })

    $(function(){//選擇class不是min的元素
        $("#button6").click(function(){
            $("div:not(.min)").css("background","orange");
        })
    })

    $(function(){//選擇索引大于3的元素
        $("#button7").click(function(){
            $("div:gt(3)").css("background","red");
        })
    })

    $(function(){//選擇索引小于3的元素
        $("#button8").click(function(){
            $("div:lt(3)").css("background","blue);
        })
    })


</script>

</head>

<body> <div id="div1">div1</div> <br/><br/> <div class="min">div2<div>div3</div></div><br/><br/> <div>div3</div><br/><br/> <span>我們</span><br/><br/>

<input id="button1" type="button" value="test1"/><br/> <input id="button2" type="button" value="test2"/><br/> <input id="button3" type="button" value="test3"/><br/> <input id="button4" type="button" value="test4"/><br/> <input id="button5" type="button" value="test5"/><br/> <input id="button6" type="button" value="test6"/><br/> <input id="button7" type="button" value="test7"/><br/> <input id="button8" type="button" value="test8"/><br/>

</body> </html></pre>轉自:http://blog.csdn.net/a352193394/article/details/7577670</span>

 本文由用戶 openkk 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!