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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue最简单的前后端交互示例详解
Oct 11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
js实现html滑动图片拼图验证
Jun 24 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
网站当前的在线人数
2006/10/09 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php强制运行广告的方法
2014/12/01 PHP
php格式化金额函数分享
2015/02/02 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python中的函数作用域
2018/05/07 Python
windows下python安装pip图文教程
2018/05/25 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
高中生期末评语
2014/01/28 职场文书
大学生创业事迹材料
2014/12/30 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
转变工作作风心得体会
2016/01/23 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python