jquery控制元素的隐藏和显示的几种方法。

组织略显凌乱,请耐心看!

使用jquery控制div的显示与隐藏,一句话就能搞定,例如:

1.$("#id").show()表示为display:block,

$("#id").hide()表示为display:none;

2.$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,则切换为可见的。

3.$("#id").css(‘display‘,‘none‘);//隐藏

$("#id").css(‘display‘,‘block‘);//显示

或者

$("#id")[0].style.display=‘none‘;

  display=none 控制对象的隐藏
  display=block控制对象的显示

4.$("#id").css(‘visibility‘,‘hidden‘);//元素隐藏

$("#id").css(‘visibility‘,‘visible‘);//元素显示

CSS visibility 属性规定元素是否可见。
visible 元素可见。 
hidden 元素不可见。 
collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 
inherit 从父元素继承 visibility 属性的值。

注意:

display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,即它仍然具有高度、宽度等属性,通俗来说就是看不见但摸得到。

//第1种方法 ,给元素设置style属性
$("#hidediv").css("display", "block");
//第2种方法 ,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性
$("#hidediv").attr("class", "blockclass");
//第3种方法,通过jquery的css方法,设置div隐藏
$("#blockdiv").css("display", "none");  

$("#hidediv").show();//显示div
$("#blockdiv").hide();//隐藏div 
时间: 2024-10-05 04:19:11

jquery控制元素的隐藏和显示的几种方法。的相关文章

js设置控件的隐藏与显示的两种方法

js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility=&qu

细说HTML元素的隐藏和显示

CSS文档对HTML的显示和隐藏有2个属性可供选择: 1.display 2.visiblity 这2个有什么区别呢? display: display版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:有 语法: display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-colum

Js - 判断元素是否隐藏、显示

判断元素是否隐藏.显示的方法,需要的朋友可以参考下 : 1.通过判断元素display属性状态值来实现 console.log($('div').css("display"));       // inlineif($('div').css("display") != 'none') { console.log('aaaaa');       // aaaaa $('div').hide();         console.log($('div').css(&qu

元素的隐藏和显示

<!doctype html> <html> <head><title>元素的隐藏和显示</title></head> <style type="text/css"> .hid{ display:none;} </style> <body> <div class="hid">div块一</div> <div>div块二<

AE控制图层中要素可见状态的几种方法

转自原文 AE控制图层中要素可见状态的几种方法 工作中常有这样的需求,一个作业图层由几个作业员来操作,我们要 控制每一个作业员只能看到他负责的区域.作业员的可见区域控制有时候是按空间区域划分,有时候是按照作业属性划分,有时候是属性和区域结合来划分,在程序中应该如何控制呢?本人总结了如下几种可用的方法,不知大家是否有更好的解决方案. ?   唯一值符号法 该方法比较简单,就是通过给图层设置一个唯一值符号渲染,把不想显示的要素符号设置为空.虽然简单,这种方法有这很大的局限性,如果我们要控制某一个区域

IOS 隐藏软键盘的3种方法

IOS开发里软键盘是经常需要打交道的地方,下面为大家带来我整理总结的3种隐藏键盘的方法. 使用软键盘的 Done 键隐藏键盘 出发软键盘隐藏最常用的事件是文本框的 Did End on Exit,它在用户按软键盘中的 Done 键时发生.选中一个UITextField控件,点击鼠标右键弹出面板,鼠标左键按住 Did End on Exit 事件旁边的圆圈,然后拖曳到右侧 .h 文件中,命名为 CloseTheKeyBoard,在 m 文件中具体实现如下图所示(此处同时显示 .h 文件与 .m 文

控制导航条最后一个标签样式的三种方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>控制导航条最后一个标签样式的三种方法</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script> <style> .nav{

26 计算用户输入的内容中索引为奇数并且对应的元素为数字的个数的两种方法

#计算用户输入的内容中索引为奇数并且对应的元素为数字的个数第二种方法content = input(">>>")count = 0for i in range(len(content)):#i就是下标,或者说就是索引 if i % 2 == 1 and content[i].isdigit(): count += 1print(count) #计算用户输入的内容中索引为奇数并且对应的元素为数字的个数的第一种方法 li = []res = ' '.join(input(

JQuery 控制元素显示隐藏

JS在浏览器里面做调试的时候,先在浏览器里面找到页面代码加上断点来执行.然后根据执行情况来查找部分变量是否能找到,一点一点的排查内容.可以做筛选条件 部分隐藏.默认让部分条件加上.hide 默认隐藏,然后通过点击 更多类目 来切换 隐藏与显示 <style>.hide{display:none;}<style> <div class="seach-guide"> <div class="item clearfix">3