标签：
过滤选择器的内容非常多，本文介绍过滤选择器的最后一部分——状态选择器
: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选择器系列第六篇——过滤选择器之状态选择器
标签：
原文地址：http://www.cnblogs.com/xiaohuochai/p/5812521.html
