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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
JavaScript门面模式详解
Oct 19 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 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
配置支持SSI
2006/11/25 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php获取参数的几种方法总结
2014/02/18 PHP
php实现多城市切换特效
2015/08/09 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js Event对象的5种坐标
2011/09/12 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
用JS实现选项卡
2020/03/23 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
师范毕业生个人求职信
2013/12/09 职场文书
酒后驾车标语
2014/06/30 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书