首页 > 代码库 > 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
目录
[1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态前面的话
过滤选择器的内容非常多，本文介绍过滤选择器的最后一部分——状态选择器
焦点状态
:focus
:focus选择器选择当前获得焦点的元素
<div> <button>btn1</button> <button>btn2</button> <button>btn3</button></div><script> document.onclick = function(){ $(‘:focus‘).css(‘color‘,‘red‘);}</script>
<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/13trfesr" frameborder="0" width="320" height="240"></iframe>
对应于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>
<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/e8k9m3yr" frameborder="0" width="320" height="240"></iframe>
对应的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>
<iframe style="width: 100%; height: 70px;" src="http://sandbox.runjs.cn/show/b7djhoci" frameborder="0" width="320" height="240"></iframe>
显隐状态
: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>
<iframe style="width: 100%; height: 90px;" src="http://sandbox.runjs.cn/show/kvofzwra" frameborder="0" width="320" height="240"></iframe>
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script>深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器