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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
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 header示例代码(推荐)
2010/09/08 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JS实现轮播图效果
2020/01/11 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python 快速排序代码
2009/11/23 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
婚礼主持词
2014/03/13 职场文书
党员群众路线承诺书
2014/05/20 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014年双拥工作总结
2014/11/21 职场文书
学雷锋活动简报
2015/07/20 职场文书
车辆挂靠协议书
2016/03/23 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python