深入学习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.元素 ...
随机推荐
- 微软官方提供的免费正版 Windows 8.1/Win10/7/XP/Vista 操作系统虚拟机镜像下载
https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/
- oracle遍历表更新另一个表(一对多)
declare cursor cur_test is select t.txt_desig, m.segment_id, s.code_type_direct, case when s.uom_dis ...
- [转]关于SVN的操作批处理示例
为了一句话:不要动手做机器能够做的事情. 天天工作用svn,更新啥的打开目录啥的动作天天在重复.每次写些命令也蛮无聊的,不说了,看下面: @echo off rem 显示部分 @echo 注 意 事 ...
- Jenkins 集成打包和上传 App Store 的冲突
周一下午用 Jenkins 集成打包,遇到了一个很奇怪的问题,之前上传到 APP Store 的时候 Build Settings->“Code Signing Resource Rules P ...
- 书中的银行,我们一起奋斗的C#,只因乐在其中~
梦回C#,只因心中还留有那么一点执着,相信大家应该也有这些感触吧!!所以呢?我想给大伙分享我的一些学习,也希望大家能给我多点建议,让我们一起进步,共同成长!!! 那么我们就来看一下该怎么运 ...
- Js中变量的作用域
一.理解函数作用域需要理解以下几点: 1.函数变量的作用域有全局变量和局部变量两种,全局变量写在函数的最前面,局部变量写在函数体内,局部变量省略了var 也就默认成为了全局变量! 2.函数 ...
- WDM驱动和NT驱动之我见
WDM驱动是NT驱动的进化版.我个人觉得它的主要好处有两个 1.能检测到设备的插入,系统能自动分配设备的硬件信息,如中断号.IO端口.设备物理地址等 2.支持设备的开机状态拔出 之前的NT驱动和硬件关 ...
- Algorithm | Binary Search
花了半天把二分查找的几种都写了一遍.验证了一下.二分查找的正确编写的关键就是,确保循环的初始.循环不变式能够保证一致. 可以先从循环里面确定循环不变式,然后再推导初始条件,最后根据循环不变式的内容推导 ...
- java线程学习
线程概念 当我问别人什么是线程的时候,别人给我讲了一大堆线程如何创建,如何使用以及若干线程的高深问题,其实作为一个资深菜鸟,我就想问问,什么是线程而已,找了书中的一些概念总结了一下,多线程与操作系统中 ...
- ios获取左右眼图片景深图
cv::Mat leftMat,rightMat,depthMapMat; UIImageToMat(leftImage, leftMat); UIImageToMat(rightImage, rig ...