前面的话
过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器
焦点状态
: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>