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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
javascript iframe跨域详解
Oct 26 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
一百多行代码实现react拖拽hooks
Mar 23 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
smarty缓存用法分析
2014/12/16 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Javascript浅谈之this
2013/12/17 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
java程序员面试交流
2012/11/29 面试题
单位活动策划方案
2014/08/17 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Redis入门教程详解
2021/08/30 Redis