jQuery实现判断控件是否显示的方法


Posted in Javascript onJanuary 11, 2017

本文实例讲述了jQuery实现判断控件是否显示的方法。分享给大家供大家参考,具体如下:

核心代码:

if($("#elem_id").is(":hidden"))
{
}

实例代码1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.4.2.js">
<!--
//-->
</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#btnToogle").click(function(){
$("#dvTest").toggle();
alert( $("#dvTest").is(":visible")); //判断元素显示或隐藏状态
});
$("#btnTestIs").click(function(e){
// alert( $(e.target).is("input") ); //判断元素的标名称
alert( $("#btnToogle").parent().is("body") );
});
});
//-->
</script>
</head>
<body>
<input type="button" value="toogle div" id="btnToogle">
<div style="width:50px; height:100px; border:solid 1px red; background-color:blue;" id="dvTest">
</div>
<br />
<hr />
<input type="button" value="toogle div" id="btnTestIs">
</body>
</html>

jQuery判断div是否隐藏实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绑定函数</title>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
var temp= $("#test").is(":hidden");//是否隐藏
var temp1= $("#test").is(":visible");//是否可见
alert(temp) ;
alert(temp1) ;
}); </script>
</head>
<body>
<p onclick='test()'>刷新测试</p>
<div id="test" style="display:none"></div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
详解vue表单——小白速看
Apr 08 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
jQuery Form表单取值的方法
Jan 11 #Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 #Javascript
浅谈JavaScript中promise的使用
Jan 11 #Javascript
JS多文件上传的实例代码
Jan 11 #Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 #Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
You might like
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
详解python校验SQL脚本命名规则
2019/03/22 Python
详解Python学习之安装pandas
2019/04/16 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
师范毕业生自荐信
2013/10/17 职场文书
材料加工工程求职信
2014/02/19 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
促销活动总结模板
2014/07/01 职场文书
学校个人对照检查材料
2014/08/26 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Rust中的Struct使用示例详解
2022/08/14 Javascript