jquery如何设置占位隐藏_JQuery显示、隐藏div的几种方法简明总结
JS隐藏和显示div的方式有两种:
方式1:隐藏后释放占用的页面空间
通过设置display属性可以使div隐藏后释放占用的页面空间.
style="display: none;"
document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="";//显示
方式2:隐藏后仍占有页面空间,显示空白
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.
style="visibility: none;"
document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示
注意:
使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。
jQuery隐藏和显示div的方式
1、$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
2、$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
3、$("#demo").hide();//隐藏div
$("#demo").show();//显示div
4、$("#demo").toggle(//动态显示和隐藏
function () {
$(this).attr("style","display:none;");//隐藏div
},
function () {
$(this).attr("style","display:block;");//显示div
}
);
注:
$("#demo").show()表示display:block,
$("#demo").hide()表示display:none;
1和2中的display:none可以换成visibility:hidden,display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间
下面是脚本之家小编补充几个例子
$("#top_notice").css("display", "block");//第1种方法
//$("#top_notice").attr("style", "display:block;");//第2种方法
//$("#top_notice").show();//第3种方法
1.给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性
$("#sendPhoneNum").attr("class", "n_input3");
1.2给元素设置style属性
$("#top_notice").attr("style", "display:block;");
2.通过jquery的css方法,设置div隐藏
$("#sendPhoneNum").css("display", "none");
3.通过jquery的show()、hide()方法,设置div隐藏
$("#textDiv").show();//显示div
$("#imgDiv").hide();//隐藏div
在程序设计中经常用到div的显示和隐藏,下面总结几种方法:
1、$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
2、$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
3、$("#demo").hide();//隐藏div
$("#demo").show();//显示div
4、$("#demo").toggle(
function () {
$(this).attr("style","display:none;");//隐藏div
},
function () {
$(this).attr("style","display:block;");//显示div
}
);
仅供大家参考!
jquery如何设置占位隐藏_JQuery显示、隐藏div的几种方法简明总结相关推荐
- android 系统隐藏和显示虚拟按键的几种方法
几种动态显示虚拟按键的方法 上一篇从源码来看了虚拟按键的加载显示流程 android 虚拟按键流程分析,今天来看看虚拟的几种动态显示和隐藏的方法. 其实说到虚拟按键,对于市面上面的很多手机,各种需求都 ...
- jquery如何设置占位隐藏_jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- 原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解. 首先是display的方法 ...
- 隐藏和显示div的两种方法
隐藏和显示div的两种方法 方式一style="visibility: none;"visiblity:visible -------->可见visiblity:hidden ...
- css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏 总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
- 如何在计算机配置里面设置隐藏c盘,如何设置C盘禁止安装任何软件?3种方法,让你电脑5年不卡顿...
如何设置C盘禁止安装任何软件?3种方法,让你电脑5年不卡顿 怎么电脑下载的东西总是自动保存在C盘? 为什么我电脑还没咋用,C盘就已经满了? 想必这是大家在用电脑的时候,经常会发出来的疑问,电脑C盘里面 ...
- win7 计算机属性 灰,win7系统文件夹属性中隐藏选项显示灰色不可改的解决方法...
很多小伙伴都遇到过win7系统文件夹属性中隐藏选项显示灰色不可改的困惑吧,一些朋友看过网上零散的win7系统文件夹属性中隐藏选项显示灰色不可改的处理方法,并没有完完全全明白win7系统文件夹属性中隐藏 ...
- 隐藏div的几种方法
隐藏div的几种方法 方法1: display <div class="one"></div> .one {display: none; } 方法2: op ...
- html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
最新文章
- 智能车竞赛技术报告 | 智能车视觉 - 新余学院 - 开放艺术队
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载四(使用程序载入事件)...
- 【HTTP协议】HTTP状态码列表大全
- python中csv文件通过什么表示字符_python – 如果行包含CSV文件中的字符串,则删除该行...
- mysql中的参数如何调试_mysql 查询优化 ~ 查询参数调节
- 工信部:手机预装软件下月起须报备审核
- java -jar debug_java – 如何在运行时调试jar?
- 【原】机器学习几个基本的问题
- 如何通过官方原版win10PE安装纯净版win10系统
- OWASP zap 代理设置
- python numpy 函数_Python 入门教程:关于 numpy 窗函数 Blackman
- 如何用python画房子_用python画一个小房子
- linux----------2--3----(无名)管道通信原理及管道编程实战
- RabbitMQ系列3之运行和Rabbit服务
- crmsh配置pacemaker集群时报错 CIB not supported: validator 'pacemaker-2.10'
- 如何建立一个真实光栅结构的光导
- python双星号什么运算_Python3基础 双星号 求一个数的几次幂
- 《程序员的七堂课》读书笔记:职业规划
- 什么是零代码?零代码与低代码有什么联系与区别?
- c语言狗脸字符画,小学一年级语文《十二生肖》教学教案
热门文章
- ufo帧率测试网站_技嘉雪鹰3080 VISION OC性能测试
- qsort函数(C语言)
- 基于Android studio的备忘录app设计
- K-means聚类算法第1关:计算欧几里得距离
- Material UI 的安装与使用
- Java并发:乐观锁
- 艾迪普:聚焦元宇宙内容智能生产新基建,共创共享数字内容产业新价值
- 惭愧,才知道这个动画库
- android7.0模拟器调试,android - 为什么在android 7.0及更高版本上出现模拟器错误? - 堆栈内存溢出...
- 使用计算机防病毒软件,在计算机上使用防病毒软件mcafee