• 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器


    前面的话

      过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器

    焦点状态

    :focus

      :focus选择器选择当前获得焦点的元素

    <div>
       <button>btn1</button>
       <button>btn2</button>
       <button>btn3</button>
    </div>
    <script>    
    document.onclick = function(){
        $(':focus').css('color','red');
    }
    </script>

      对应于CSS选择器:focus

    :focus{color:red}

      如果用javascript实现类似效果

    var tags = document.getElementsByTagName('*');
    for(var i = 0; i < tags.length; i++){
        tags[i].onfocus = function(){
            this.style.color = 'red';
        }
    }

    哈希状态

    :target

      :target选择器用于匹配锚点对应的目标元素

    <div>
        <a href="#test">锚点</a>
        <div id="test">变色</div>
    </div>
    <script>
    window.location = '#test';
    $(':target').css('color','red');
    </script>

      对应的CSS选择器是:target选择器,用于匹配锚点对应的目标元素

    :target{color:red;}

    动画状态

    :animated

      :animated选择器选择所有正在执行动画效果的元素

    <button id="btn">run</button>
    <div id="mover" style="height:30px; 30px;background-color: green;"></div>
    <script>
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
    }
    animateIt();
    btn.onclick = function(){
         $("div:animated").css('background-color','red');
    }
    </script>

    显隐状态

    :hidden

      :hidden选择器选择所有隐藏的元素,返回集合元素

    隐藏

      元素不可见并不是隐藏,元素被认为隐藏有以下几种情况:

      【1】display:none

      【2】表单元素的type='hidden'

      【3】宽度和高度都设置为0

      【4】祖先元素是隐藏的

      [注意]元素visibility: hidden或opacity: 0被认为是可见的,因为他们仍然占据布局空间

    :visible

      :visible选择器选择所有可见的元素,如果元素占据文档一定的空间,元素被认为是可见的

      [注意]隐藏元素上做动画,元素被认为是可见的,直到动画结束

    <button id="btn1">$('#test :hidden')</button>
    <button id="btn2">$('#test :visible')</button>
    <button id="reset">还原</button>
    <div id="test">
        <div>
            <div style="display:none;">hidden</div>  
            <div>visible</div> 
        </div>
        <form>
            <input type="hidden" />
            <input/>
        </form>   
    </div>
    <script>
    reset.onclick = function(){history.go();}
    btn1.onclick = function(){this.innerHTML = ''+$('#test :hidden').length+'个隐藏元素'}
    btn2.onclick = function(){this.innerHTML = ''+$('#test :visible').length+'个可见元素'}
    </script> 

  • 相关阅读:
    5、python中的列表
    Linux---配置新服务器的常见操作(CentOS7)
    MapReduce原理篇
    用MR实现Join逻辑的两种方法
    Linux静态库与共享库
    mysql命令查看表结构及注释
    mysql 数据同步到 elastsearch7 数字类型精度丢失
    canal client-adapter 将mysql数据同步到 es elasticsearch 日期时间少8小时问题解决
    如何用redis做活跃用户统计-HyperLoglog
    jvm 虚拟机内存布局
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5812521.html
Copyright © 2020-2023  润新知