jquery和js实现对div的隐藏和显示方法

2015-02-17  来源:本站原创  分类:jquery  人气:4 

jquery和js分别可以实现对div的隐藏和显示,方法也不一样,jquery的show、show;js的hidden、visible

jQuery对div的显示和隐藏:

显示:

$("#id").show()

隐藏:

$("#id").show()

js对div的显示和隐藏:

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白

复制代码 代码如下:

style="visibility: none;"

document.getElementById("typediv1").style.visibility="hidden";//隐藏

document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间,如下

复制代码 代码如下:

style="display: none;"

document.getElementById("typediv1").style.display="none";//隐藏

document.getElementById("typediv1").style.display="";//显示
相关文章
  • jquery和js实现对div的隐藏和显示方法 2015-02-17

    jquery和js分别可以实现对div的隐藏和显示,方法也不一样,jquery的show.show;js的hidden.visible jQuery对div的显示和隐藏: 显示: $("#id").show() 隐藏: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document

  • js实现对table动态添加.删除和更新的方法 2014-04-29

    这篇文章主要介绍了js实现对table动态添加.删除和更新的方法,涉及javascript针对html中table表格节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

  • js设置控件的隐藏与显示的两种方法 2015-03-15

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

  • C#实现对AES加密和解密的方法 2014-09-20

    C#实现对AES加密和解密的方法,需要的朋友可以参考一下 AES简介 AES(The Advanced Encryption Standard)是美国国家标准与技术研究所用于加密电子数据的规范.它被预期能成为人们公认的加密包括金融.电信和政府数字信息的方法. AES 是一个新的可以用于保护电子数据的加密算法.明确地说,AES 是一个迭代的.对称密钥分组的密码,它可以使用128.192 和 256 位密钥,并且用 128 位(16字节)分组加密和解密数据.与公共密钥密码使用密钥对不同,对称密钥密码

  • Jquery工作常用实例--滑动切换(在隐藏与显示之间)被选元素 2011-07-12

    一:大家都知道$(selector).slideUp()能向上滑动隐藏被选元素,$(selector).slideDown()能 向下滑动显示被选元素,那么如果我们要实现这么一个功能:点击一个按纽,首次点向下滑动显示被选元素,第二次点击向上滑动隐藏被选元素,如此重复切换,怎么做到呢? 二:这时我们可以不用以上两个Jquery事件函数,用$(selector).slideToggle()更方便也更简单,它能对被选元素切换向上滑动和向下滑动 实例: <!DOCTYPE html PUBLIC "

  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件 2014-01-01

    之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了多少流量我无从统计. 从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoa

  • jquery实现拖拽调整Div大小 2014-06-26

    这里给大家分享的是一段自己编写的使用jQuery实现拽调整Div层大小的代码,非常实用,推荐给有需要的小伙伴们. 今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. (function ($) { $.fn.dragDivResize = function () { var deltaX, deltaY, _startX, _startY; var resizeW, resizeH; var size = 20; var minSize = 10; var scrol

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图 2015-02-18

    这篇文章主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法,非常的实用,小伙伴们可以直接拿到项目中使用. 在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. var chart; $(document).ready(function() { chart = new Highcharts.C

  • jquery之超简单的div显示和隐藏特效demo(分享) 2015-01-11

    本篇文章是对jquery中的div显示和隐藏特效demo进行了详细的分析介绍,需要的朋友可以参考下 <!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"&g

  • jQuery制作js下拉收缩.js展开收起.js显示隐藏效果 2012-09-10

    今天发布一个 jquery基础教程-- jQuery制作js下拉收缩.js展开收起.js显示隐藏效果! 废话不多说了先上效果图 素材图片下拉上下图标下载 下面切入正题 先引入jquery.js框架就不说了 然后写html代码 <div style="display: block;" id="panel"> <!-- content--> </div> <p class="slide"><a h

  • 通过JS来动态的修改url,实现对url的增删查改 2015-01-09

    本文主要介绍了通过JS来动态的修改url,实现对url的增删查改,把代码分享给大家,希望能有所帮助 虽然可以通过get方式提交post表单等方式来动态修改url,但如果多个按钮能并行提交时,写多个大体相同,又有些细节差异的表单,难免有些不妥,因此,想到了通过JS来动态的修改url,来实现对url的增删查改. <script> var LG=(function(lg){ var objURL=function(url){ this.ourl=url||window.location.href;

  • JS实现在Repeater控件中创建可隐藏区域的代码 2014-02-19

    在WEB应用中,如何才能使应用高效率呢?如何才能吸引用户呢?这的确是个大学问,页面的内容,色搭配等都十分重要.但不可忽视的是,多数情况下,对于数据的呈现方式也是十分重要的. 由于web应用的规模不断增大,数据也越来越多了,有时候,由于在一个页面同时显示的数据太多,从而造成页面的不美观,用户因此也会感到厌倦和操作困难.因此,本文将介绍利用repeater控件的隐藏区域,以达到较好的数据显示效果. 防止数据过多加载有很多方法,比如采用数据分页的方法,又或者采用master/detail的方式,就是先

  • Jquery实现控件的隐藏和显示实例 2013-12-06

    本篇文章主要是对Jquery实现控件的隐藏和显示实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <!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&qu

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换 2014-01-01

    jquery实现隐藏显示层动画效果.仿新浪字符动态输入.tab效果等等,以下为所有代码,感兴趣的朋友可以练练手哈,希望对大家学习有所帮助 已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏

  • jquery判断元素是否隐藏的多种方法 2014-02-03

    这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,本文总结了多种判断方法实例,需要的朋友可以参考下 第一种:使用CSS属性 var display =$('#id').css('display'); if(display == 'none'){ alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test"> <p>仅仅是测试所用&

  • Javascript与jQuery方法的隐藏与显示 2014-09-10

    这篇文章主要通过实例向大家介绍了Javascript与jQuery方法的隐藏与显示的方法,需要的朋友可以参考下 示例代码很简单,直接奉上,就不多废话了 <html> <head> <title>denotoggle</title> <style> #box { width: 100px; height: 100PX; background-color: #ddd } .show { visibility: hidden; } </style

  • jQuery元素的隐藏与显示实例 2014-10-18

    这篇文章主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="tex

  • jquery validate.js表单验证的基本用法入门 2014-11-10

    jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了. 这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址',

  • jquery.Jwin.js 基于jquery的弹出层插件代码 2014-12-31

    测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用参数都有详细说明 代码如下: (function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide.slide.fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;/

  • jQuery验证控件jquery.validate.js使用说明+中文API 2015-04-30

    一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二.默认校验规则 (1)required:true 必输字段 (2)remote:"ch