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

Posted 小火柴的蓝色理想

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入学习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;width: 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> 

以上是关于深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器的主要内容,如果未能解决你的问题,请参考以下文章

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园

jquery学习记录二(过滤性选择器)

二次学习JQuery 选择器&选择集过滤&转移

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)