display: none; 与 jq show方法之间的联系
1. 定义四种常用隐藏元素的方式，然后调用 jq 的 show 方法显示，观察各原先隐藏元素的 display 表现，结合 jq 源码，show 方法设置 元素 display 属性值为 隐藏时的 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
border: 1px solid red;
color: red;
}
.hide{
display: none;
}
.inline-block{
display: inline-block;
}
.wrap li:nth-child(4){
display: none;
}
</style>
</head>
<body> <ul class="wrap">
<li style="display: none;">style="display: none;"</li>
<li class="hide">class="hide" + display:list-item;</li>
<li class="hide inline-block">class="hide" + display:inline-block;</li>
<li>display:list-item;</li>
</ul>
<script src="jquery-1.9.1.min.js"></script>
<script>
$('.wrap li').show();
</script>
</body>
</html>
2. 相关文章
3. 扩展 其他隐藏方式 及区别
1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
display: none; 与 jq show方法之间的联系的更多相关文章
- Android学习笔记之dispatchTouchEvent和OnInterceptTouchEvent和OnTouchEvent三个方法之间的联系...
PS:好久没有写博客了,项目正式开始启动了,但是怎么也打不起精神来...可能还是不适应放假留校...这下一年只能回家一次了...伤感...写篇博客舒坦下... 学习内容: Android中disp ...
- 李洪强iOS开发之OC[018]对象和方法之间的关系
// // main.m // 18 - 对象和方法之间的关系 // // Created by vic fan on 16/7/14. // Copyright © 2016年 李洪强. A ...
- 并查集类的c++封装，比較union_find algorithm四种实现方法之间的性能区别
问题描写叙述: 在计算机科学中,并查集是一种树型的数据结构,其保持着用于处理一些不相交集合(Disjoint Sets)的合并及查询问题.有一个联合-查找算法(union-find algorithm ...
- jq筛选方法
jq筛选方法(参照手册) 过滤: 1) eq(index|-index):获取第N个元素 负值表示从末尾开始匹配 <!-- 获取匹配的第二个元素 --> <p> This is ...
- 关于让simulink中display组件显示二进制的方法
关于让simulink中display组件显示二进制的方法 1.首先需要配置gateway out模块,勾选propagate data type to output 2.配置display模块 fo ...
- jquery中使元素显示和隐藏方法之间的区别
在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...
- synchronized修饰的方法之间相互调用
1:synchronized修饰的方法之间相互调用,执行结果为There hello ..因为两个方法(main,hello)的synchronized形成了互斥锁. 所以当main方法执行完之后 ...
- 二.OC基础--1，对象的存储细节,2，#pragma mark指令,3，函数和对象方法的区别,4，对象和方法之间的关系 ,5.课堂习题
1,对象的存储细节, 1. 当创建一个对象的时候:Person *p1 = [Person new],做了三件事情: 1,申请堆内存空间: 2,给实例变量初始化: 3,返回所申请空间的首地址; 2. ...
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
随机推荐
- Docker学习笔记之为容器配置网络
0x00 概述 在互联网时代,网络已经成为绝大多数应用进行数据交换的主要通道,Docker 作为集群部署的利器,在网络支持上也下了许多功夫.功能丰富和强大,并不代表使用复杂,在 Docker 的封装下 ...
- 单元测试Mock框架Powermockito 【mockito1.X】
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
- 阿里云centos远程连接mysql
首先在服务器管理控制台设置防火墙规则 添加规则 使用root登录到mysql 添加一个用户名,权限为%的远程连接用户 grant all on *.* to 'yuancheng'@'%' ident ...
- socket - option编程：SO_REUSEADDR
网友vmstat多次提出了这个问题:SO_REUSEADDR有什么用处和怎么使用.而且很多网友在编写网络程序时也会遇到这个问题.所以特意写了这么一篇文章,希望能够解答一些人的疑难. 其实这个问题在Ri ...
- mycat下mysql jdbc connector使用高版本报PacketTooBigException异常
如下所示: 5.1.30切换为mysql-connector 5.1.46/40,报错,可参考https://blog.csdn.net/n447194252/article/details/7530 ...
- 看起来像是break的考量
代码运用了if+break: package day20181008; import java.util.Scanner; public class ZuoYe01 { public static v ...
- 06: 字典、顺序表、列表、hash树 实现原理
算法其他篇 目录: 1.1 python中字典对象实现原理 1.2 顺序表 1.3 python 列表(list) 1.1 python中字典对象实现原理返回顶部 注:字典类型是Python中最常 ...
- docker 实践
https://doc.yonyoucloud.com/doc/docker_practice/etcd/etcdctl.html 启动http restful API docker批量映射端口 怎么 ...
- [c/c++] programming之路（5）、吓人小程序、变量、进制等
一.设计一个吓人的东西 首先创建MFC项目(勾选“基于对话框”后点击完成即可) 添加三个按钮 双击按钮进入响应代码段 void CMFCWindowsDlg::OnBnClickedButton1() ...
- 20145212 罗天晨 《网络对抗》Exp3 Advanced 恶意代码伪装技术实践
恶意代码伪装技术实践 木马化正常软件. 啊哈--原本以为很复杂--然后我看了一下蔡野同学的博客,发现原理竟然如此简单-- 对原先生成病毒的代码稍作修改: 于是--把生成的后门软件改成骗人的名字:这里改 ...