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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
js闭包实现按秒计数
Apr 23 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python求解汉诺塔游戏
2020/07/09 Python
python动态规划算法实例详解
2020/11/22 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
八年级物理教学反思
2014/01/19 职场文书
职工运动会邀请函
2014/02/02 职场文书
2014中考励志标语
2014/06/05 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
MySQL的存储过程和相关函数
2022/04/26 MySQL