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>