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高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Puppet的一些技巧
Sep 17 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
javascript事件问题
2009/09/05 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
用Python编写web API的教程
2015/04/30 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python 如何提高元组的可读性
2019/08/26 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
超搞笑婚前保证书
2015/05/08 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
好人好事新闻稿
2015/07/17 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
创业计划书之花店
2019/09/20 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电