jQuery中:hidden选择器用法实例
更新时间：2014年12月30日 15:28:59 投稿：shichen2014
这篇文章主要介绍了jQuery中:hidden选择器用法,以实例形式较为详细的分析了:hidden选择器的功能、定义及设置匹配元素不可见时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery中:hidden选择器用法。分享给大家供大家参考。具体分析如下：
此选择器能够匹配所有不可见元素，或者type为hidden的元素。
语法结构:
复制代码 代码如下:
$(":hidden")
此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:
复制代码 代码如下:
$("div:hidden").css({display:"block",color:"blue"})
以上代码能够将隐藏的div元素设置为可见，并且将里面的字体颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":hidden")等同于$("*:hidden")。
实例代码:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.display{display:none;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:hidden").css({display:"block",color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是后来才可见的</div>
<div>我是本来就是可见的</div>
<button>点击查看效果</button>
</body>
</html>
以上代码可以将隐藏的div设置为可见，并且将里面的文本颜色设置为蓝色。
实例二:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.display {
display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":hidden").css({display:"block",color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是后来才可见的</div>
<div>我是本来就是可见的</div>
<p class="display">我原来也是不可见的</p>
<button>点击查看效果</button>
</body>
</html>
由于以上代码并没有指定与:hidden选择器相配合使用的选择器，所以就默认和*选择器配合使用，于是代码能够让所有隐藏的元素可见，并且将其中的文本颜色设置为蓝色。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery代码实现实时获取时间功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了jquery实现隐藏在左侧的弹性弹出菜单效果,涉及jQuery动态操作页面元素的显示及隐藏技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
在jquery.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现此功能，希望能够给需要的朋友带来帮助2016-01-01
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器介绍，需要的朋友可以参考下。2011-10-10
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery： 是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。2010-01-01
jquery 弹出层注册页面,尽力提高用户体验，吸引用户注册。2010-06-06
下面小编就为大家带来一篇修改jquery中dialog的title属性方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了七个不允许错过的jQuery小技巧，帮助WEB开发人员开发出有创意和漂亮的WEB页面,需要的朋友可以参考下2015-12-12
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范2012-08-08
jquery bankInput插件是银行卡进行格式化显示，能控制文本框输入最小最大个数、控制只能输入数字、控制不能粘贴不能使用输入法。同时插件能实现自动加载格式化显示和支持非输入框的格式话显示2012-08-08
最新评论