jQuery的过滤选择器

在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>


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(0) 浏览(4242) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=be490f&id=28
Tags:
« 【解决】实现父div透明,子div不透明 【推荐】jquery clone 与 clone(true) 的区别 »

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap