前面的话

  过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器

焦点状态

: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选择器系列第六篇——过滤选择器之状态选择器的更多相关文章

  1. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  2. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  3. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  4. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  5. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  6. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

  7. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. html 选择器之基础选择器

    我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...

随机推荐

  1. Unity Android加密DLL笔记

    unity mono 地址:https://github.com/Unity-Technologies/mono 下载与unity版本对应的unity mono. brew安装:http://brew ...

  2. 使用nose 进行Python项目的自动化测试

    一.为什么使用nose? 编写测试更容易.nose可以自动识别继承于unittest.TestCase的测试单元,并执行测试,而且,nose也可以测试非继承于unittest.TestCase的测试单 ...

  3. Flask下如何处理Requests 上传中文文件名的问题

    一.问题的由来     最近有个项目,叫做文档服务资源中心,类似于七牛,为各个业务系统提供统一的文件资源服务,包括文件的存储.操作管理.下载.预览等.在做文件存储的时候,遇到了这个当指定上传的文件名为 ...

  4. penpyxl basic function demo code

    Openpyxl basic function demo code demo code: #!/usr/bin/env python # -*- coding: utf-8 -*- "&qu ...

  5. How to make your assembly more secure from referencing by unauthorized bits

    Now the security has a trend to become more and more important in our daily work, hence I did some r ...

  6. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  7. flash小游戏在Kongregate上线——BasketBall Master(篮球大师)

    小游戏地址,欢迎上去留言评论.游戏完成度没有达到期望水平,只能算完成了核心玩法吧,一些其他构想来不及实现. BasketBall Master(篮球大师) 这个小游戏很早之前就基本做好了,只因有些细节 ...

  8. 使用 nvm 管理不同版本的 node 与 npm

    补充说明:Mac 下通过 brew install nvm 所安装的 nvm ,由于安装路径不同,无法正确启用.建议使用 brew uninstall nvm 卸载掉之后,通过本文的方案重新安装一次. ...

  9. Windows Azure Storage (18) 使用HTML5 Portal的Azure CDN服务

    <Windows Azure Platform 系列文章目录> Update:2015-04-15 如果读者使用的是国内由世纪互联运维的Azure China服务,请参考笔者的文档:Azu ...

  10. RxAndroid+Retrofit+MVVM(1)OKHttp

    1)Gradlecompile 'com.squareup.okhttp:okhttp:2.4.0'compile 'com.squareup.okio:okio:1.5.0' 2)Get //创建o ...