码迷,mamicode.com
首页 > 其他好文 > 详细

说说那些选择器

时间:2016-05-21 06:36:08      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

jQuery的选择器...

层次选择器

 <!-- 当点击h2元素时,为#menu下的<span>元素添加色为#09F的颜色背景 -->
   <!-- <script type="text/javascript">
        $(function () {
            $(‘h2‘).click(function () {
                $(‘#menu span‘).css(‘background-color‘,‘#09F‘);
            });
        });
    </script>-->

基本选择器

  <!-- 为标签选择器添加样式 -->
    <script type="text/javascript">
        $(function () {
            $(‘h2‘).click(function () {
                $(‘h3‘).css(‘background-color‘, ‘#09F‘);
              
            });
        });
    </script>

基本过滤选择器

 

<script type="text/javascript">
        $(function () {
            $(‘h2‘).click(function () {
                //$(‘li:first‘).css(‘background-color‘, ‘#09F‘);//第一个
                //$(‘li:last‘).css(‘background-color‘, ‘#09F‘);//最后一个
                //$(‘li:not(.three)‘).css(‘background-color‘, ‘#09F‘);//class不为three的元素
               // $(‘li:even‘).css(‘background-color‘, ‘#09F‘);//索引值为偶数的元素
               // $(‘li:eq(1)‘).css(‘background-color‘, ‘#09F‘);//索引值为1的元素
                 //$(‘li:gt(1)‘).css(‘background-color‘, ‘#09F‘);//索引值大于1的元素
                //$(‘li:lt(1)‘).css(‘background-color‘, ‘#09F‘);//索引值小于1的元素
                //$(‘:header‘).css(‘background-color‘, ‘#09F‘);//所有标题的元素
                $(‘:focus‘).css(‘background-color‘, ‘#09F‘);//获取焦点的元素

            });
        });
    </script>

可见性过滤选择器

<script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            // $(‘p:hidden‘).show();//显示文字
            $(‘p:visible‘).hide();//隐藏文字
        });
    </script>
    <style type="text/css">
        #txt_show
        {
            display:none;color:#00C;
        }
        #txt_hide
        {
            display:block;color:#F30;
        }
    </style>
</head>
<body>
    <p id="txt_hide">点击按钮,我会被隐藏哦~</p>
     <p id="txt_show">隐藏的我,被显示了,嘿嘿~</p>
    <input type="button" name="show" value="点击显示文字 " />
      <input type="button" name="hide" value="点击隐藏文字 " />
</body>

属性选择器

<!--改变class属性的值为odds的元素的背景颜色  -->
     <script type="text/javascript">
         $(function () {
             $("h2").click(function () {
                 $("[class=odds]").css("background-color", "#FFFFFF");
             })
         });
    </script>

 

说说那些选择器

标签:

原文地址:http://www.cnblogs.com/wangxiangxiang/p/5513896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!