【皇甫】☀说说那些选择器

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>

posted @ 2016-05-21 01:39 Fx_柚子阅读(151) 评论(0) 收藏举报

刷新页面返回顶部