怎样判断jQuery 元素是不是显示与隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样判断jQuery 元素是不是显示与隐藏相关的知识，希望对你有一定的参考价值。
1、新建html文件。
2、引入jquery.min.js文件。
3、创建HTML内容。
4、用jquery创建点击事件，点击隐藏按钮，p内容隐藏
5、用jquery创建点击事件，点击显示按钮，p内容显示。
6、预览如图当点击隐藏按钮，p内容隐藏。
7、当点击显示按钮，p内容显示。
判断方法：
1、使用CSS属性
var display =$('#id').css('display');
if(display == 'none')
alert("被你发现了，我是隐藏的啦！"
);
2、使用jquery内置选择器
假设我们页面有这么个标签,
<div id="test"><p>仅仅是测试所用</p></div>
那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:
if($("#test").is(":hidden"))... //前提是已经将jQuery的库导进来了
这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动,比如:
if($("#test").is(":hidden"))
$("#test").show(); //如果元素为隐藏,则将它显现
else
$("#test").hide(); //如果元素为显现,则将其隐藏
3、jQuery判断对象是否显示或隐藏
Js代码
// jQuery("#tanchuBg").css("display")
// jQuery("#tanchuBg").is(":visible")
// jQuery("#tanchuBg").is(":hidden")
扩展资料：
jQuery语言特点：
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了javascript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如php网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
4、提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
5、增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
6、更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
参考资料：百度百科——jQuery
参考技术B jQuery 判断一个元素是显示还是隐藏， jQuery 使用 is() 的方法来判断一个元素是否显示，反之，则为隐藏，jQuery 判断是否显示，jQuery 判断是否隐藏，jQuery 判断是否可见。判断一个元素是否显示，可以使用 jQuery 中的 is() 方法来实现。JS 代码：假设这个 div 元素的 id 为 mydiv 。以下为引用内容： $(document).ready(function()if($("#mydiv").is(":visible")==false)
);以上代码可以很好地判断 div 、input 、button 等元素的显示与隐藏。 参考技术C JQuery中元素是否显示或者隐藏，有两种方式，主要通过获取元素节点的hidden和visible两个属性来进行判断，代码如下：
var node=$('#id');
第一种写法
if(node.is(':hidden')) //如果node是隐藏的则显示node元素，否则隐藏
node.show();
else
node.hide();
第二种写法
if(!node.is(':visible')) //如果node是隐藏的则显示node元素，否则隐藏
node.show();
else
node.hide();
if(node.is(':visible')) //如果node是显示的则隐藏node元素，否则显示
node.hide();
else
node.show();
参考技术D 可以用jquery获得他display属性的值，根据这个值来判断。
$("#div").css("display").如果值是block的话就是显示的，如果是none就是隐藏的。如果这个值没有设置，是null的话就是默认是显示的。
或者利用$("#div").is(':visible'),看结果是true还是false来判断也可以。
怎样用jquery控制div的显示与隐藏
<div id="tab"><input/></div>
<div id="tab"><input/></div>
<div id="tab"><input/></div>
就是有三个div 里面都有一个按钮 怎样实现点击第一个div的按钮出现第二个div 隐藏第一个和第三个 点击第二个div的按钮出现第三个div 隐藏第一个和第二个div
divs.each(function(i)
var $this=$(this);
$this.children("input").click(function()
if(i==0)
divs.eq(0).hide();
divs.eq(2).hide();
divs.eq(1).show();
else if(i==1)
divs.eq(0).hide();
divs.eq(1).hide();
divs.eq(2).show();
else .....//依此类推
);
);
大概是这样，至于如何优化，就看你的了。。
参考技术A <!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
$ ('div#tab :button').click (function ()
$(this).closest('div#tab').next('div').show().siblings('div').hide();
)
)
</script>
</head>
<body>
<div id="tab">
<input type="button" value="test1" />
</div>
<div id="tab">
<input type="button" value="test2" />
</div>
<div id="tab">
<input type="button" value="test3" />
</div>
</body>
</html>追问
没用昂
追答这个是例子，你看下，有没有效果
$(this).removeClass('check_on').addClass('check_on').siblings().removeClass('check_on');
);
你不能用id，用class可以
id 属性只能在每个 HTML 文档中出现一次
以上是关于怎样判断jQuery 元素是不是显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章