深入学习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选择器系列第三篇——过滤选择器之索引选择器
× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器
× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- Jquery选择器之基本选择器
id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...
- CSS选择器之基本选择器总结
一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
随机推荐
- Unity Android加密DLL笔记
unity mono 地址:https://github.com/Unity-Technologies/mono 下载与unity版本对应的unity mono. brew安装:http://brew ...
- 使用nose 进行Python项目的自动化测试
一.为什么使用nose? 编写测试更容易.nose可以自动识别继承于unittest.TestCase的测试单元,并执行测试,而且,nose也可以测试非继承于unittest.TestCase的测试单 ...
- Flask下如何处理Requests 上传中文文件名的问题
一.问题的由来 最近有个项目,叫做文档服务资源中心,类似于七牛,为各个业务系统提供统一的文件资源服务,包括文件的存储.操作管理.下载.预览等.在做文件存储的时候,遇到了这个当指定上传的文件名为 ...
- penpyxl basic function demo code
Openpyxl basic function demo code demo code: #!/usr/bin/env python # -*- coding: utf-8 -*- "&qu ...
- 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 ...
- 出现了内部错误-网站中X509Certificate2加载证书时出错
今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...
- flash小游戏在Kongregate上线——BasketBall Master(篮球大师)
小游戏地址,欢迎上去留言评论.游戏完成度没有达到期望水平,只能算完成了核心玩法吧,一些其他构想来不及实现. BasketBall Master(篮球大师) 这个小游戏很早之前就基本做好了,只因有些细节 ...
- 使用 nvm 管理不同版本的 node 与 npm
补充说明:Mac 下通过 brew install nvm 所安装的 nvm ,由于安装路径不同,无法正确启用.建议使用 brew uninstall nvm 卸载掉之后,通过本文的方案重新安装一次. ...
- Windows Azure Storage (18) 使用HTML5 Portal的Azure CDN服务
<Windows Azure Platform 系列文章目录> Update:2015-04-15 如果读者使用的是国内由世纪互联运维的Azure China服务,请参考笔者的文档:Azu ...
- 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 ...