深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
Posted 小火柴的蓝色理想
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深入学习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选择器系列第五篇——过滤选择器之内容选择器
深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园
JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)