jQuery中:hidden选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了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://3water.com/" />

<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://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
jQuery中:has选择器用法实例
Dec 30 #Javascript
jQuery中:empty选择器用法实例
Dec 30 #Javascript
jQuery中:contains选择器用法实例
Dec 30 #Javascript
解决ueditor jquery javascript 取值问题
Dec 30 #Javascript
jQuery中:focus选择器用法实例
Dec 30 #Javascript
JavaScript中的原型链prototype介绍
Dec 30 #Javascript
jQuery中:not选择器用法实例
Dec 30 #Javascript
You might like
php mssql 数据库分页SQL语句
2008/12/16 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php实现文件上传基本验证
2020/03/04 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
谈谈JS中的!!
2017/12/07 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python文件和目录操作详解
2015/02/08 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
求职简历推荐信范文
2013/12/02 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
党校个人总结
2015/03/04 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS