深入学习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